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

Question

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.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter());
this.map.map.fitBounds(this.map.bounds);
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
}
this.markerNumber++;

where this.map.bounds was previously defined as:

this.map.bounds = new google.maps.LatLngBounds();

However, the problem I am having is that the line this.map.map.setZoom(16); doesn't work if I use this.map.map.fitBounds(this.map.bounds);, 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.

The .map.map is on purpose there or is a mistake?If possible upload a test page and provide a linkso we can see the problem with more ease. — Argiropoulos Stavros, Dec 24 '10 at 07:31
.map.map was there on purpose. The first referred to my map object and the second one to the google map object. I've since cleaned this issue from my code. — Andrew De Andrade, Feb 23 '11 at 20:42
see http://stackoverflow.com/questions/2437683/google-maps-api-v3-can-i-setzoom-after-fitbounds — Mawg says reinstate Monica, Apr 18 '14 at 03:34

Herman Schaaf · Accepted Answer · 2016-08-14T12:46:10.263

117

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 = this.map.map;

map.fitBounds(this.map.bounds);
zoomChangeBoundsListener = 
    google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
        if (this.getZoom()){
            this.setZoom(16);
        }
});
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.

edited Aug 14 '16 at 12:46

answered Jan 17 '11 at 00:17

Herman Schaaf

46,821
21
100
139

10

Nice solution, worked for me as well. Although you could have done `addListenerOnce()` which would do away with the `removeListener()` call. – Mike Purcell Dec 08 '11 at 23:48
2

In addition to using addListenerOnce, I would advise using setTimeout to remove the listener. I had a case where the bounds did not change because the markers were in close proximity to each other. With this code, the user would be unable to zoom (at least once). – h0tw1r3 Jan 17 '12 at 17:01
@MikePurcell & h0tw1r3: I edited the code to add your suggestions, thanks! Didn't test it, so hope I didn't introduce any silly mistakes. – Herman Schaaf Jan 17 '12 at 18:39
@Herman.....thnx herman i have stuck on this problem for about 3 hours...thnx again... – Usman Feb 24 '12 at 18:43
Shouldn't the setTimeout be placed outside the listener function to have the desired effect? – Roger Ertesvag Mar 09 '12 at 08:24
addListernerOnce did the trick, thanks for answering @HermanSchaaf – Cristian Rojas Apr 10 '13 at 15:39
1

I had to put the removeListener inside the addListener callback function. Otherwise the execution would remove the listener even before calling it. – Arman Bimatov Oct 03 '13 at 14:17
Setting the zoom after bounds changed won't be smooth. @EmeryLapinski answer has a much better solution. – Pedro Estevão Aug 11 '19 at 17:38

score 109 · Answer 2 · edited Jan 18 '14 at 10:36

109

google.maps.event.addListenerOnce(yourMap, 'bounds_changed', function(event) {
  if (this.getZoom() > 15) {
    this.setZoom(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).

edited Jan 18 '14 at 10:36

Mathias Bynens

144,855
52
216
248

answered Aug 15 '12 at 20:15

Nequin

1,091
1
7
2

4

Good solution. Could make it better by using `google.maps.event.addListenerOnce` instead of adding and then removing the listener. – chuck w Oct 11 '13 at 02:23
3

I’ve taken the liberty to edit the answer to use `addListenerOnce`. – Mathias Bynens Jan 18 '14 at 10:38
1

That solution doesn't work for me. this.getZoom() always is undefined in the callback and this.setZoom() has no effect. – horace Mar 23 '18 at 19:16
Perfect, best answer – 00-BBB Apr 03 '19 at 11:11
Remember the problems using **this** I would instead use the reference to the map passed to the event handler, like this: `if (yourMap.getZoom() > 15) { ... }`. It sounds that @horace had problems with it and probably this refers to the current class where the implementation is being done or the `google.maps.event` instance. Avoid using this if you simply want to use the passed-in reference to your map. – Sparker73 Nov 30 '19 at 19:33

score 16 · Answer 3 · answered Oct 03 '13 at 16:22

16

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:

map.setOptions({
    maxZoom: 10
});

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

map.fitBounds(bounds);

var listener = google.maps.event.addListenerOnce(map, "idle", function()
{
    map.setOptions({
        maxZoom: 999
    });
});

answered Oct 03 '13 at 16:22

Emery Lapinski

1,572
18
26

much better solution, because setting the zoom after bounds changed (as the other answers suggested) won't be smooth, will be very ugly actually. – Pedro Estevão Aug 11 '19 at 17:35

score 2 · Answer 4 · answered Dec 24 '10 at 15:08

2

I have simple and dirty solution.
Use If else ...

var marker = this.map.createMarker(view.latlng, this.markerNumber);
this.map.bounds.extend(view.latlng);
this.map.map.setCenter(this.map.bounds.getCenter()); 
if (this.markerNumber === 1) {
  this.map.map.setZoom(16);
} else {
   this.map.map.fitBounds(this.map.bounds);
}       
this.markerNumber++;

answered Dec 24 '10 at 15:08

Vishwanath

6,284
4
38
57

1

But do you know why the two don't work together? I don't see why these are incompatible when called serially. – Andrew De Andrade Dec 27 '10 at 20:24

score 1 · Answer 5 · edited Mar 11 '12 at 06:48

1

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').fitBounds(this.get('bounds'));
        this.get('map').setZoom(16);//line added
        return this;
    },

edited Mar 11 '12 at 06:48

Mike G

746
5
19

answered Feb 22 '12 at 10:11

Mirek Komárek

33
1
3

score 0 · Answer 6 · answered Mar 23 '18 at 19:18

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);

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

6 Answers6

Linked