Google Maps v3: Enforcing min. zoom level when using fitBounds

Question

I draw a series of markers on a map (using v3 api maps).

In v2, I had the following code:

bounds = new GLatLngBounds(); ... loop thru and put markers on map ... bounds.extend(point); ... end looping map.setCenter(bounds.getCenter()); var level = map.getBoundsZoomLevel(bounds); if ( level == 1 ) level = 5; map.setZoom(level > 6 ? 6 : level); 

And this works great to ensure that an appropriate level of detail is always displayed on the map.

I am trying to duplicate this function in v3, but setZoom and fitBounds do not seem to work together:

 ... loop thru and put markers on the map var ll = new google.maps.LatLng(p.lat,p.lng); bounds.extend(ll); ... end loop var zoom = map.getZoom(); map.setZoom(zoom > 6 ? 6 : zoom); map.fitBounds(bounds); 

I tried another permutation (e.g. moving fitBounds to setZoom), but I'm not doing anything with setZoom, it seems to affect the map. Am I missing something? Is there any way to do this?

Answer 1

During this discussion of Google groups, I found that basically when you do fitBounds, scaling happens asynchronously, so you need to capture the zoom and bounds event. The code in the last post worked for me with a slight modification ... in this form, it stops full scaling for more than 15, so I used the idea from the fourth post to set the flag only for the first time.

 // Do other stuff to set up map var map = new google.maps.Map(mapElement, myOptions); // This is needed to set the zoom after fitbounds, google.maps.event.addListener(map, 'zoom_changed', function() { zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { if (this.getZoom() > 15 && this.initialZoom == true) { // Change max/min zoom here this.setZoom(15); this.initialZoom = false; } google.maps.event.removeListener(zoomChangeBoundsListener); }); }); map.initialZoom = true; map.fitBounds(bounds); 

Hope this helps,

Anthony.

Answer 2

Without trying to do this, I would say that you can do it, just fitBounds() , before you get the zoom level, i.e.

 map.fitBounds(bounds); var zoom = map.getZoom(); map.setZoom(zoom > 6 ? 6 : zoom); 

If you tried to do this and it didn’t work, you can configure your map using minZoom in MapOptions ^{(api- link)} as follows:

 var map = new google.maps.Map(document.getElementById("map"), { minZoom: 6 }); 

This will cause the map to scale more when using fitBounds() .

Answer 3

Anthony's solution is very nice. I only needed to adjust the scale for loading on the page (make sure you are not too far zoomed in for a start), and this did the trick for me:

 var zoomChangeBoundsListener = google.maps.event.addListener(map, 'bounds_changed', function(event) { google.maps.event.removeListener(zoomChangeBoundsListener); map.setZoom( Math.min( 15, map.getZoom() ) ); }); map.fitBounds( zoomBounds ); 

Answer 4

You can also set the maxZoom option immediately before calling fitBounds () and reset after this value:

 if(!bounds.isEmpty()) { var originalMaxZoom = map.maxZoom; map.setOptions({maxZoom: 18}); map.fitBounds(bounds); map.setOptions({maxZoom: originalMaxZoom}); } 

Answer 5

When you call map.fitBounds () on one element - the map may get too close. To fix this, simply add "maxZoom" to mapOptions ...

 var mapOptions = { maxZoom: 15 }; 

Answer 6

In my case, I just wanted to set the zoom level to one less than what Google maps chose for me during fitBounds. The goal was to use fitBounds, but also to ensure that no markers were in any map tools, etc.

My map is created earlier, and then a number of other dynamic page components have the ability to add markers by calling fitBounds after each addition.

This is in the start block, where the map object was originally created ...

 var mapZoom = null; 

This is then added to each block where a marker is added, right before calling map.fitBounds ...

 google.maps.event.addListenerOnce(map, 'bounds_changed', function() { if (mapZoom != map.getZoom()) { mapZoom = (map.getZoom() - 1); map.setZoom(mapZoom); } }); 

When using 'bounds_changed' without checking in place, the map is scaled once for each marker, regardless of whether it is needed or not. Conversely, when I used "zoom_changed", sometimes I had markers in the map tools because the scale did not change. Now it always works, but checking ensures that it only scales once and only if necessary.

Hope this helps.

Answer 7

Since Google Maps V3 is event driven, you can tell the API to set the zoom to the desired amount when the zoom_changed event fires:

 var initial = true google.maps.event.addListener(map, "zoom_changed", function() { if (initial == true){ if (map.getZoom() > 11) { map.setZoom(11); initial = false; } } }); 

I used the initial value to make the map too scalable when the possible fitBounds is overridden, but so that the user zooms in as much as he wants. Without a condition for the user, a scaling event of more than 11 would be possible.

Answer 8

I found the following to work pretty well. This is a variant of Ryan’s answer to https://stackoverflow.com/a/3906/2/2/2/2/2/2/12.jpg. This ensures that the area is shown at least twice the offset value in degrees.

 const center = bounds.getCenter() const offset = 0.01 const northEast = new google.maps.LatLng( center.lat() + offset, center.lng() + offset ) const southWest = new google.maps.LatLng( center.lat() - offset, center.lng() - offset ) const minBounds = new google.maps.LatLngBounds(southWest, northEast) map.fitBounds(bounds.union(minBounds))