Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.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.

like image 410
Andrew De Andrade Avatar asked Dec 23 '10 22:12

Andrew De Andrade


2 Answers

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.

like image 61
Herman Schaaf Avatar answered Oct 02 '22 14:10

Herman Schaaf


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

like image 24
Nequin Avatar answered Oct 02 '22 14:10

Nequin