Schlagwort-Archiv: maps

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