Take the 2-minute tour ×

I'm drawing a series of markers on a map (using v3 of the maps api).

In v2, I had the following code:

  bounds = new GLatLngBounds();

  ... loop thru and put markers on map ...
  ... end looping

  var level = map.getBoundsZoomLevel(bounds);
  if ( level == 1 ) 
    level = 5;
  map.setZoom(level > 6 ? 6 : level);

And that work fine to ensure that there was always an appropriate level of detail displayed on the map.

I'm trying to duplicate this functionality in v3, but the setZoom and fitBounds don't seem to be cooperating:

... loop thru and put markers on the map
  var ll = new google.maps.LatLng(p.lat,p.lng);
... end loop

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

I've tried different permutation (moving the fitBounds before the setZoom, for example) but nothing I do with setZoom seems to affect the map. Am I missing something? Is there a way to do this?

share|improve this question
add comment

7 Answers

up vote 47 down vote accepted

I happened to be looking for the same thing :)

At this discussion on Google Groups I discovered that basically when you do a fitBounds, the zoom happens "asynchronously" so you need to capture the zoom and bounds change event. The code in the final post worked for me with a small modification... as it stands it stops you zooming greater than 15 completely, so used the idea from the fourth post to have a flag set to only do it 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.initialZoom = false;
map.initialZoom = true;

Hope that helps,


share|improve this answer
Thank you! I've been fighting with that for a couple of hours! It does seem like a bug, though. –  chris Jun 7 '10 at 14:47
This is a good method. Another method is to check the current bounds and extend the bounds, i.e., stackoverflow.com/questions/3334729/… . Though the linked answer here is only expanding the bounds by a fraction, you can use the same method to expand the bounds by a larger number; I've found that adding 7 to all corners does a good job. –  Metro Smurf Aug 28 '11 at 22:34
This is a cool solution. I noticed, however, that it works fine for me in chrome, ie, and firefox without using map.initialZoom. –  Andrew Nov 20 '11 at 18:53
I'd like to correct my previous comment. I think that setting the initialZoom property might be needed. I had some trouble zooming in real close on IE 9 after leaving out that part of the code... Cool solution! –  Andrew Dec 12 '11 at 15:54
Use google.maps.event.addListenerOnce(), so you don't have to manually remove the listener afterwards. –  pstadler Jan 18 '13 at 15:19
show 1 more comment

Without trying it, I'd say you should be able to do it just by having fitBounds() before you get the zoom level, i.e.

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

If you did try that and it didn't work, you can setup your map with minZoom in the MapOptions (api-reference) like this:

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

This would keep the map from zooming any further out when using fitBounds().

share|improve this answer
nice simple and elegant solution! –  Falantar014 Mar 13 '13 at 19:48
short & simple thank's to Flygenring –  Pragnesh Mca Jul 26 '13 at 7:42
Setting the minZoom and maxZoom values restricts the user from zooming beyond those values, so it doesn't help if all you want to do is set the initial zoom to something reasonable (which is what I think the OP was talking about) –  Izazael Jan 8 at 5:17
So basically pretty much exactly as I wrote in my answer? –  Flygenring Jan 8 at 22:43
add comment

Anthony's solution is very nice. I only needed to fix the zoom for the inital page load (ensuring that you weren't too far zoomed in to start with) and this did the trick for me:

var zoomChangeBoundsListener =
        map.setZoom( Math.min( 15, map.getZoom() ) );

map.fitBounds( zoomBounds );
share|improve this answer
add comment

In my case, I simply wanted to set the zoom level to one less than what google maps chose for me during fitBounds. The purpose was to use fitBounds, but also ensure no markers were under any map tools, etc.

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

This is in the initial block where the map object is originally created...

var mapZoom = null;

Then this is added to each block where a marker is added, right before the map.fitBounds is called...

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

When using 'bounds_changed' without the check in place, the map zoomed out once for every marker regardless of whether it needed it or not. Conversely, when I used 'zoom_changed', I would sometimes have markers under map tools because the zoom didn't actually change. Now it is always triggered, but the check ensures that it only zooms out once and only when needed.

Hope this helps.

share|improve this answer
add comment

When you call map.fitBounds() on one item - the map may zoom in too closely. To fix this, simply add 'maxZoom' to mapOptions...

var mapOptions = {
  maxZoom: 15
share|improve this answer
add comment

Since Google Maps V3 is event driven, you can tell the API to set back the zoom to a proper amount when the zoom_changed event triggers:

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

I used initial to make the map not zooming too much when the eventual fitBounds is permorfed, but to let the user zoom as much as he/she wants. Without the condition any zoom event over 11 would be possible for the user.

share|improve this answer
add comment

You can also set the maxZoom option just before calling fitBounds() and reset the value afterwards:

if(!bounds.isEmpty()) {
    var originalMaxZoom = map.maxZoom;
    map.setOptions({maxZoom: 18});
    map.setOptions({maxZoom: originalMaxZoom});
share|improve this answer
add comment

Your Answer


