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.

About Sarah Maddox

Technical writer, author and blogger in Sydney

Posted on 22 June 2014, in Google Maps, technical writing and tagged , . Bookmark the permalink. 3 Comments.

  1. Thank you for this! I spent hours trying to determine why my map.fitBounds(…) call was causing screwy behavior. Adding the disableAutoPan to my InfoBox’s did the trick. Thanks!!!

  2. Sunil Vishwakarma

    Great man…you saved me…!!!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: