Google Maps v3 fitBounds() Zoom too close for single marker

Question

Is there a way to set a max zoom level for fitBounds()? My problem is that when the map is only fed one location, it zooms in as far as it can go, which really takes the map out of context and renders it useless. Perhaps I am taking the wrong approach?

Thanks in advance!

Solution 1

I like mrt's solution (especially when you don't know how many points you will be mapping or adjusting for), except it throws the marker off so that it isn't in the center of the map anymore. I simply extended it by an additional point subtracting .01 from the lat and lng as well, so it keeps the marker in the center. Works great, thanks mrt!

// Pan & Zoom map to show all markers
function fitToMarkers(markers) {

    var bounds = new google.maps.LatLngBounds();

    // Create bounds from markers
    for( var index in markers ) {
        var latlng = markers[index].getPosition();
        bounds.extend(latlng);
    }

    // Don't zoom in too far on only one marker
    if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
       var extendPoint1 = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
       var extendPoint2 = new google.maps.LatLng(bounds.getNorthEast().lat() - 0.01, bounds.getNorthEast().lng() - 0.01);
       bounds.extend(extendPoint1);
       bounds.extend(extendPoint2);
    }

    map.fitBounds(bounds);

    // Adjusting zoom here doesn't work :/

}

Solution 2

You can setup your map with maxZoom in the MapOptions ^{(api-reference)} like this:

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

This would keep the map from zooming any deeper when using fitBounds() and even removes the zoom levels from the zoom control.

Solution 3

Another solution is to expand bounds if you detect they are too small before you execute fitBounds():

var bounds = new google.maps.LatLngBounds();
// here you extend your bound as you like
// ...
if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
   var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
   bounds.extend(extendPoint);
}
map.fitBounds(bounds);

Solution 4

Once you've added all of the real bounds add these lines

var offset = 0.002;     
var center = bounds.getCenter();                            
bounds.extend(new google.maps.LatLng(center.lat() + offset, center.lng() + offset));
bounds.extend(new google.maps.LatLng(center.lat() - offset, center.lng() - offset));

it get the center of the real bounds then adds two additional points one to the northeast and one to the southwest of you center

This effectively sets the minimum zoom, change the value of offset to increase or decrease the zoom

Solution 5

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

Using the MaxZoom option works best for not zooming to close on to the marks you have.

View more solutions

Comments

[Kennet]

stackoverflow.com/questions/4523023/… is a much better solution. Particular @Nequins answer

[Metro Smurf]

Good idea on keeping the original center. The reason the zoom level can not be reliably adjusted when using the fitBounds() method is because the zoom is occurring asynchronously: stackoverflow.com/questions/2989858/…

[Shane]

This worked great for me. I did have to pass the map reference into the function "function fitToMarkers(markers, map)" on V3, but it works like a charm after that!

[willdanceforfun]

Love that. Good one @ryan. Worked great for me, but .01 in my case zoomed out too far, .001 hit the sweet spot.

[Le Droid]

I like this solution but insert the setzoom inside the if to not call it each time. There could also be a timing side effect that return 'undefined' from getzoom(). Solution: zoom = map.getZoom(); if (typeof zoom !== 'undefined' && zoom > 8) map.setZoom(8);

[Goran Jakovljevic]

Thanks. Like @willdanceforfun same case , 001 hit the spot.

[Flygenring]

@candlejack So exactly as described in my answer?

[El Yobo]

You can set the maxZoom before fitting the bounds and then unset it again using map.setOptions({ maxZoom: undefined }) on the idle event fired by changing the bounds. This prevents the zoom in, zoom out effect of instead resetting the zoom in the idle event.

[Alberto M]

easiest solution

[NinjaOnSafari]

I would recommend this solution stackoverflow.com/questions/2437683/…

[Travis B]

Great work! Quick fix to the problem I was running into.

[Jaypee]

Fantastic! Life saver!

[Maksym Kozlenko]

Used this solution. Thanks

[Grant]

I don't fully grasp what this is doing, but it works sweet, thanks