Set zoom level of a google map so that all markers are visible

Hi out there,
A couple of months ago I needed to set the zoom level of a Google Map so that all markers in the map are visible. After hours of reading the API documentation, I did not find any solution on that issue, so I wrote a little Javascript function that does exactly that.

/**
* Center map and set zoom level so that all markers are visible
* global markers array required
*/
centerMap = function() {

/* if an infoWindow is open, do not center map (return / do nothing) */
var iW = map.getInfoWindow();
if(iW.getContentContainers().length > 0 && !iW.isHidden())
return;

for(var i in markers) {
var this_lat = markers[i].getLatLng().lat() || null;
var this_lng = markers[i].getLatLng().lng() || null;

if(
(this_lat && !isNaN(this_lat)) &&
(this_lng && !isNaN(this_lng))
) {
var minLat = minLat || this_lat;
var maxLat = maxLat || this_lat;
var minLng = minLng || this_lng;
var maxLng = maxLng || this_lng;

//get min and max markers and save in variables
minLat = Math.min(minLat, this_lat);
maxLat = Math.max(maxLat, this_lat);
minLng = Math.min(minLng, this_lng);
maxLng = Math.max(maxLng, this_lng);
}
}

//avg of the coordinates
var centerLat = minLat + ((maxLat - minLat) / 2);
var centerLng = minLng + ((maxLng - minLng) / 2);

//what's the distance of our coordinates? (in kilometers)
var dist = (6371 *
Math.acos(
Math.sin(minLat / 57.2958) *
Math.sin(maxLat / 57.2958) + (
Math.cos(minLat / 57.2958) *
Math.cos(maxLat / 57.2958) *
Math.cos(maxLng / 57.2958 - minLng / 57.2958)
)
)
);

//default zoom level
var zoomLvl = 10;

//determine the zoom level out of the calculated distance
if(dist < 24576)
zoomLvl = 1;
if(dist < 12288)
zoomLvl = 2;
if(dist < 6144)
zoomLvl = 3;
if(dist < 3072)
zoomLvl = 4;
if(dist < 1536)
zoomLvl = 5;
if(dist < 768)
zoomLvl = 6;
if(dist < 384)
zoomLvl = 7;
if(dist < 192)
zoomLvl = 8;
if(dist < 96)
zoomLvl = 9;
if(dist < 48)
zoomLvl = 10;
if(dist < 24)
zoomLvl = 11;
if(dist < 11)
zoomLvl = 12;
if(dist < 4.8)
zoomLvl = 13;
if(dist < 3.2)
zoomLvl = 14;
if(dist < 1.6)
zoomLvl = 15;
if(dist < 0.8)
zoomLvl = 16;
if(dist < 0.3)
zoomLvl = 17;

//center map and set zoomLvl
var point = new GLatLng(centerLat, centerLng);
map.setCenter(point, zoomLvl);
};

This function has to be called after all markers have been inserted into the map.
Here I set up a quick example: https://www.adick.at/wp-content/uploads/map/

EDIT:
The above example is deprecated. It is based on a function I wrote some months ago –
now there is a better and more common way for doing this: http://econym.org.uk/gmap/example_map14.htm

Cheers
Alex

9 Gedanken zu „Set zoom level of a google map so that all markers are visible“

  1. Hi Mohan,
    thanks for this! Actually, the time I wrote this post I did some research on that issue again and I then found these „native“ Google-funtions for doing that. I simply wanted to post my own solution anyway, maybe I should mention the safer and more common way in the post! 😉

  2. Hi Alex,

    Ahh… you’re right
    i miss to divide 57.2958 in each point when i calculating distance
    so the formula is not 100% work. especially in lower zoom.

    so i change the formula :

    var zoom = Math.floor(8 – Math.log(1.6446*dist / Math.sqrt(2 * (mapdisplay * mapdisplay))) / Math.log (2));

    i hope this formula work.

    Thank you for your advice.

  3. Hi Alex. Probably, the native way that you’ve found is similar with below, isn’t it? 🙂

    //server side returns marker information by JSON type
    function loadAllMarkers(url, target_map)
    {
    jQuery.ajax({
    url: url,
    type: „get“,
    dataType: „json“,
    success: function(markers) {
    var bound = new GLatLngBounds();
    markers.each(function(marker) {
    var latlng = new GLatLng(marker.latitude, marker.longitude);
    bound.extend(latlng);
    target_map.addOverlay(new GMarker(latlng, {title:marker.name}));
    });
    target_map.setCenter(bound.getCenter());
    target_map.setZoom(map.getBoundsZoomLevel(bound));
    }
    });
    }

  4. Hi,
    I am using the cluster marker to show the different plants of an organization across the world. My problem is in the database, there are some plants which have the same name, though with different IDs. So, when I click that cluster, the markers aren’t shown for that location. Could someone help me with this please? Thanks a ton.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert