How to stop your map from jumping around when info windows open – Google Maps JavaScript API

By default when an info window pops up on a map created with the Google Maps JavaScript API, the map pans automatically to ensure that the entire content of the info window is visible. If your map has a large number of markers that provide info windows on hover, this auto-panning can be quite disturbing for the user.

TL;DR: To disable the automatic movement of the map, set disableAutoPan to true in the properties on infoWindowOptions. See the documentation.

The automatic movement of the map, called auto-panning, can be very useful in some situations. It’s good to make sure people can see all the content of an info window without having to scroll the map themselves.

On the other hand, let’s say you have a large number of markers on the map, and have added some JavaScript to make an info window open each time the cursor moves over a marker. If auto-panning is enabled, the map can jig around as the cursor moves across it, repositioning the map each time an info window pops up. This can be quite disconcerting for the user.

My Tech Comm on a Map project suffered from that problem, until I disabled auto panning:

var infoWindow = new google.maps.InfoWindow({
  pixelOffset: new google.maps.Size(0, -10),
  disableAutoPan: true
});

The full code is on GitHub.