[Solved] Using setZoom() after using fitBounds() with Google Maps API V3

I’m using fitBounds() to set the zoom level on my map too include all the markers currently displayed. However, when I have only one marker visible, the zoom level is 100% (… which zoom level 20 I think…). However, I don’t want it to be that far zoomed in so the user can adjust the position of the marker without having to zoom out.

I have the following code:

var marker =, this.markerNumber);;;;
if (this.markerNumber === 1) {;

where was previously defined as: = new google.maps.LatLngBounds();

However, the problem I am having is that the line; doesn’t work if I use;, however, I know that line of code is correct because when I comment out the fitBound() line, the setZoom() magically starts functioning.

Any ideas how I resolve this? I’m thinking of setting a maxZoom level as an alternative if I can’t get this working.

Solution #1:

Alright, I’ve figured it out. Apparently, the fitbounds() happens asynchronously, so you have to wait for a bounds_changed event before setting zoom works.

map =;

zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
setTimeout(function(){google.maps.event.removeListener(zoomChangeBoundsListener)}, 2000);

Update: See @Nequin’s answer using addListenerOnce for a better solution that doesn’t require a timeout.

Respondent: Andrew De Andrade

Solution #2:

google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {

This solution works better… instead of waiting on timeout to remove listener. Call this directly before using fitBounds (I believe calling after will work as well).

Respondent: Herman Schaaf

Solution #3:

I found the additional zoom to be a little jarring. If you set the maxZoom option before calling fitBounds (and then unset it in the callback) you can avoid it:

    maxZoom: 10

map.setCenter(new google.maps.LatLng(-89, -179)); // make sure it changes so the idle listener gets called back


var listener = google.maps.event.addListenerOnce(map, "idle", function()
        maxZoom: 999
Respondent: Nequin

Solution #4:

I have simple and dirty solution.
Use If else …

var marker =, this.markerNumber);;; 
if (this.markerNumber === 1) {;
} else {;
Respondent: Emery Lapinski

Solution #5:

I just added one line to the function addBounds(position) and it fixed it, as the following shows:

    addBounds: function(position) {
        this.get('bounds', new google.maps.LatLngBounds()).extend(this._latLng(position));
        this.get('map').setZoom(16);//line added
        return this;
Respondent: Vishwanath

Solution #6:

All the solutions with event listeners didn’t work for me (this.getZoom() always is undefined in the callback and this.setZoom() has no effect).

I came up with this solution which worked nicely:

function set_zoom() {
    if(map.getZoom()) {map.setZoom(map.getZoom() - 1);}
    else {setTimeout(set_zoom, 5);}
setTimeout(set_zoom, 5);
Respondent: Mirek Komárek

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Most Popular

To Top
India and Pakistan’s steroid-soaked rhetoric over Kashmir will come back to haunt them both clenbuterol australia bossier man pleads guilty for leadership role in anabolic steriod distribution conspiracy