Javascript – Google Maps: How to prevent InfoWindow from shifting the map

google mapsgoogle-maps-api-3javascript

Using Google Maps API v3.

I noticed that if I have a map marker near the edge of my map border … that if I click the
marker icon so that the InfoWindow will display, my entire map shifts so that the
markers InfoWindow is centered.

I don't want my map to shift.

Question: How do I prevent the map from shifting when InfoWindows are near the end of the map border (which causes the InfoWindow by default to center & shift the map)?

Best Answer

Since you are using v3, you can simply prevent the infoWindow from shifting the map with the disableAutoPan option, as in the following example (API Reference): 

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps disableAutoPan Demo</title> 
   <script src="http://maps.google.com/maps/api/js?sensor=false" 
           type="text/javascript"></script> 
</head> 
<body> 

   <div id="map" style="width: 200px; height: 200px"></div> 

   <script type="text/javascript"> 

   var myLatlng = new google.maps.LatLng(37.44, -122.14);
   var myOptions = {
      zoom: 4,
      center: myLatlng,
      mapTypeId: google.maps.MapTypeId.ROADMAP
   }

   var map = new google.maps.Map(document.getElementById("map"), myOptions);

   var infowindow = new google.maps.InfoWindow({
      content: 'Test',
      disableAutoPan: true
   });

   var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Test Marker'
   });

   google.maps.event.addListener(marker, 'click', function() {
     infowindow.open(map, marker);
   });

   </script> 
</body> 
</html>

Screenshot:

disableAutoPan

Related Topic