JavaScript – Alexander Dick

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 &gt; 0 &amp;&amp; !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 &amp;&amp; !isNaN(this_lat)) &amp;&amp;
(this_lng &amp;&amp; !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 &lt; 24576)
zoomLvl = 1;
if(dist &lt; 12288)
zoomLvl = 2;
if(dist &lt; 6144)
zoomLvl = 3;
if(dist &lt; 3072)
zoomLvl = 4;
if(dist &lt; 1536)
zoomLvl = 5;
if(dist &lt; 768)
zoomLvl = 6;
if(dist &lt; 384)
zoomLvl = 7;
if(dist &lt; 192)
zoomLvl = 8;
if(dist &lt; 96)
zoomLvl = 9;
if(dist &lt; 48)
zoomLvl = 10;
if(dist &lt; 24)
zoomLvl = 11;
if(dist &lt; 11)
zoomLvl = 12;
if(dist &lt; 4.8)
zoomLvl = 13;
if(dist &lt; 3.2)
zoomLvl = 14;
if(dist &lt; 1.6)
zoomLvl = 15;
if(dist &lt; 0.8)
zoomLvl = 16;
if(dist &lt; 0.3)
zoomLvl = 17;

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

/**

* 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

Kategorie: JavaScript

Google Maps V3 – Scrollbar bei InfoWindow entfernen

JavaScript Blog

jQuery keepalive

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