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