Question

I have a map that is taller than wide. I noticed that in some instances, the fitBounds method was failing to adjust the zoom and center correctly in order to display all of the markers.

I’ve managed to isolate the issue in this example:

http://jsbin.com/welcome/2568

In the example I first try to load 23 positions and you will notice its zoomed quite far in. What I’m doing is:

//extending 23 positions doesn't really work
bounds = new google.maps.LatLngBounds ();
for (var i = 0; i < markerList.length; i++) {
    pos = new google.maps.LatLng (markerList[i]["Za"],markerList[i]["$a"])
    bounds.extend(pos);
}
window.map.fitBounds(bounds);

After 5 seconds I run that basic script again, but this time instead of extending 23, I only extend the bounds 5 times. This time the map actually zooms out!

What I noticed is that to get this issue to reproduce, I have to set the width and height of the canvas div:

<div id="map_canvas" style="width:450px;height:600px;"></div>

So I guess my question is: How can I both set the map canvas size and successfully fitBounds() for 25+ positions?

Answer 1

I just figured what was happening is that I was setting the minZoom in the map configuration.

It seems that if the minZoom is lower than the one needed by fitBounds() to display all the positions, it silently fails.

The reason the width of the map influenced is that the thinner the map, the more it had to zoom out to display the whole set of positions, and when it met the constraint of minZoom, it would die.

The reason the subset of 5 positions would work I think is just because it wasn’t reaching the minZoom.

To solve the issue I removed the minZoom setting.