/**
* 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);
};

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

1. Hey,

   Check this one, its is the better one i got succesfullly placed

   http://econym.googlepages.com/basic14.htm

   Antworten

2. 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! 😉

   Antworten

3. Hi,

   i try the Mohan method but sometimes function of map.setCenter(bounds.getCenter());
   didn’t return the correct value.

   Alex, don’t you consider the size google map display, because hardcode is risky.

   check this out for your reference.

   http://aiskahendra.blogspot.com/2009/01/set-zoom-level-of-google-map-base-on.html

   Thank you all.

   Antworten

4. Hi Aiska,
   it’s a pity that google’s functions do not work properly.

   Your formula for getting the zoom level looks very promising – does it work 100%?

   Antworten

5. 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.

   Antworten

6. 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));
   }
   });
   }

   Antworten

7. Yes, Jin-young, that’s the „native“ way 😉
   I did it like that in some recent projects, worked very well!

   Antworten

8. Here is an adaptation of this code I made for API v3 :
   http://grapsus.net/blog/post/Google-API-v3-fit-map-zoom-and-bounds-to-all-markers

   Antworten

9. 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.

   Antworten