Google Maps API - dynamically calculate zoom level for clusters of markers

If you have various points and want to display them all.
Here is one way to display it.



<table border="0" cellpadding="0" cellspacing="0" width="100%" >
<%-- 620 * 300 --%>
<tr>
<td valign="top"> <div id="map" style="width: 450px; height: 300px"></div> <td>
</tr>

</table>


<script type="text/javascript">
//<![CDATA[

var gmarkers = [];
var htmls = [];
var i = 1;
var minLatlng, maxLatlng;



/**
* Calculate boundary to contains all the markers around given center.
* find anti-symmetry again mapCenter of lat and lng
*
*/
function bestFitWithCenter(map, bounds, mapCenter) {
var swLL = bounds.getSouthWest();
var neLL = bounds.getNorthEast();


//leave margin each side
var marginRatio = 0.0001;

var minLat = Math.min(2*mapCenter.lat() - neLL.lat(), swLL.lat());
var maxLat = Math.max(2*mapCenter.lat() - swLL.lat(), neLL.lat());
var minLng = Math.min(2*mapCenter.lng() - neLL.lng(), swLL.lng());
var maxLng = Math.max(2*mapCenter.lng() - swLL.lng(), neLL.lng());

//GLog.write("minLat="+minLat + ", minLng="+minLng);
//GLog.write("maxLat="+maxLat + ", maxLng="+maxLng);


var minLatLng = new GLatLng(minLat-marginRatio, minLng-marginRatio);
var maxLatLng = new GLatLng(maxLat+marginRatio, maxLng+marginRatio);

bounds.extend(maxLatLng);
bounds.extend(minLatLng);

map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(mapCenter);
}

/**
* Display all the markers and calculate center of all markers
*
*/
function bestFit(map, bounds) {
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
}

function onLoad0() {

if (GBrowserIsCompatible()) {
var bounds = new GLatLngBounds();
var map = new GMap2(document.getElementById("map"));
var mapCenter = new GLatLng(34.020545, -84.248765);
map.setCenter(mapCenter, 12);

var widthHeight = map.getSize().toString().split(',');
var width = widthHeight[0];
var heitht = widthHeight[1];
//GLog.write("width="+width + ", heitht="+heitht);

map.addControl(new GSmallMapControl());
map.addControl(new GScaleControl());
map.addControl(new GMapTypeControl());


//add center marker
var marker = new GMarker(new GLatLng(34.020545, -84.248765));
map.addOverlay(marker);
//GLog.write(map.getZoom());
bounds.extend(marker.getPoint());

marker = new GMarker(new GLatLng(34.02898, -84.25421));
map.addOverlay(marker);
bounds.extend(marker.getPoint());


marker = new GMarker(new GLatLng(34.04898, -84.24421));
map.addOverlay(marker);
bounds.extend(marker.getPoint());

marker = new GMarker(new GLatLng(34.11898, -83.99421));
map.addOverlay(marker);
bounds.extend(marker.getPoint());

marker = new GMarker(new GLatLng(34.01898, -84.22421));
map.addOverlay(marker);
bounds.extend(marker.getPoint());


//bestFitWithCenter(map, bounds, mapCenter);
bestFit(map, bounds);

GLog.write(map.getZoom());

}

}
//]]>
</script>