Zoom To Fit All Markers on Google Maps API v3

I’d like a problem that for once hasn’t already been solved by someone else.

I had a set of markers which needed to be all on screen, and for some reason there’s no .zoomToShow method. Fortunately it’s pretty simple to create yourself.

//  Make an array of the LatLng's of the markers you want to show
var LatLngList = new Array (new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017));
//  Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
//  Go through each...
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) {
  //  And increase the bounds to take this point
  bounds.extend (LatLngList[i]);
}
//  Fit these bounds to the map
map.fitBounds (bounds);

And that’s pretty much it. Then, of course, I found that someone had already done this before, but for version two of the API.

46 thoughts on “Zoom To Fit All Markers on Google Maps API v3”

  1. Just wanted to send you a quick thanks for this little snippet. My version which was much longer stopped working in version 3 — this one is much simpler.

  2. Do you know of a way to zoom to fit all markers while keeping the center of the map at a certain lat/long or marker?

  3. .count is not a valid javascript property. Please update your code to use the .length property.

    As matt said, change LatLngList.count() to be LatLngList.length

    Note: it’s a property, not a method, so leave out the parens ().

  4. If you have a list of markers and want to zoom and center them on screen, you can also keep extending bounds object while adding markers to list. So when you want to center map, you will not need to loop all markers again. Good luck

    var fMapBounds = new google.maps.LatLngBounds();
    function PlotMarker(Position) { //add a marker to map
    var latlng = new google.maps.LatLng(Position.Longitude);
    var googMarker = new google.maps.Marker({
    position: latlng,
    map: map,
    });
    fMapBounds.extend();
    return googMarker;
    }

    function CenterMap() { //just fit it
    if (fMapBounds!= undefined) {
    map.fitBounds(fMapBounds);
    }
    }

  5. Thanks much for the code. How come when I use this SOMETIMES one level of zoom-in still works; I mean all markers are still visible. Any idea? What could be the reason?
    Thanks!

  6. Thanks for your nice code, but sometimes auto zoom doesn’t work as expected as the zoom level is not selected correctly, so that I can still zoom-in one level and my all of my markers are fully displayed in map, what is going wrong?

  7. It’s JavaScript so you should initialize array like that:
    var LatLngList = [new google.maps.LatLng (52.537,-2.061), new google.maps.LatLng (52.564,-2.017)];

  8. Super handy stuff, thanks. I just thought I’d point out though that this tends to look pretty odd if there’s only one marker in question. You basically end up zooming level 21 where everything is grey. To force the map to a maximum level (I’ve arbitrarily picked 16 here) you can do the following:


    google.maps.event.addListenerOnce(map, "idle", function() {
    if (map.getZoom() > 16) map.setZoom(16);
    });

  9. Thanks alot man, I really want this function, very helpful in my BlackBerry Tracking with google maps project. Many thumbs up for your great information.

  10. Just wow !!! :)

    I already building a plugin for WordPress, that allowing the end users to choose the start end the end of a trip and then they can see the trip on the Google Map.

    Your code solving my problem, as I like to zoom in, in order to make the trip path more clear to the end user.

    This implementation is also usefull, for a WordPress theme I am creating too. I creating a theme, that operates as a business directory. In the backend, the admins, are able to add unlimited address for business, and then in the front end I like to use a single map instance, to display the store address. By using your code noe, I am able to show any marker on the map, regardless the physical location of each address.

    Thanks a lot for your code publication :)

  11. Shane, this is awesome and saved me so much time! Thanks so much.

    One quick question: while the map “zooms” to fit all the points, it can wind up cropping off most of a marker. Is there a quick way to compensate for that?

    It’s not the end of the world, but my OCD would allow me to sleep better if I was able to do that.

    Thanks again!

Leave a Reply

Your email address will not be published.