TOP
Home > Blog > Fix Google Maps Controls with Magento and/or Prototype

Fix Google Maps Controls with Magento and/or Prototype

Posted by Derek on November 4, 2014

When trying to use the Google Maps API to display a map within a Magento CMS page I was having trouble trying to get the map controls to display. I found many suggestions on the web that involved removing the 'max-width: 100%' style on images inside the map canvas container. The style change is still need, but that wasn't working for me.

The problem ended up being a conflict with the API's Javascript and the version of Prototype that Magento uses. It appears Google made a change in the 3.exp version. If I specify version 3 in the script everything works. Here is summary of everything I used to get a map on a Magento CMS page.

CSS
#map_canvas {
  height: 300px;
  width: 100%;
  img { max-width: none; }
}
HTML/Javascript
<div id="map_canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?key=[key]&v=3"></script>
<script>
  var map;
  function initialize() {
    var myLatlng = new google.maps.LatLng(45.652771,-84.492618);
    var mapOptions = {
      zoom: 9,
      zoomControl: true,
      zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL
    },
    center: myLatlng
  }
  var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
  var infowindow = new google.maps.InfoWindow({
    content: 'Destination'
  });
  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    animation: google.maps.Animation.DROP,
    title: 'Destination'
  });
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>

Leave a Reply



(Your email will not be publicly displayed.)


Captcha Code

Click the image to see another captcha.