Aiska Blog

Yesterday my Project Manager asks me to embedded Google Map into the module.

It’s should be easy to do, but after I try so many times I failed to complete this task.

The main problem is I cannot set zoom level of Google Map that all markers are visible.

Then I search in Google and Google Map Documentation, and I still did not find any good solution,

So I decide to find my own solution. This is my solution
First think I do is get the minimum, maximum and center of the marker.

var minlat = [Minimum Latitude];
var maxlat = [Maximum Latitude];
var minlng = [Minimum Longitude];
var maxlng = [Maximum Longitude];
var ctrlng = [Center Longitude];
var ctrlng = [Center Longitude];

The second way is I calculate the distance of Minimum and Maximum Latitude and Longitude. After I search in Google I found formula to calculate distance in Google Map.

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)))));

Then I calculate Google Map distance for each Zoom Level by using of formula of distance.
Base on calculate of Google Map distance for each level, so I make formula to calculate zoom level. The formula is :

var zoom = Math.floor(8 - Math.log(1.6446 * dist / Math.sqrt(2 * (mapdisplay * mapdisplay))) / Math.log (2));


where :
dist = the distance of bound
mapdisplay = the square display of Google Map in pixel (I get from height or width of Google Map where is the smallest).

But I have a problem when Minimum and Maximum of Latitude is equal, and the zoom level become incorrect,

The problem is I calculate the horizontal marker, and calculate the diagonal of Google map where diagonal is more longer than horizontal or vertical, that's why zoom level is not correct.

So I decide to make all diagonal calculate. And I change the minimum and maximum of latitude and longitude. To the largest value so I can calculate the diagonal value.

var interval = 0;
If ((maxlat - minlat) > (maxlng - minlng)) {
interval = (maxlat - minlat) / 2;
minlng = ctrlng - interval;
maxlng = ctrlng + interval;
} else {
interval = (maxlng - minlng) / 2;
minlat = ctrlat - interval;
maxlat = ctrlat + interval;
}

Then I calculate again, and it’s work.

full code should be like this

var minlat = [Minimum Latitude];
var maxlat = [Maximum Latitude];
var minlng = [Minimum Longitude];
var maxlng = [Maximum Longitude];
var ctrlng = [Center Longitude];
var ctrlng = [Center Longitude];
var mapdisplay = 600;
var interval = 0;

If ((maxlat - minlat) > (maxlng - minlng)) {
interval = (maxlat - minlat) / 2;
minlng = ctrlng - interval;
maxlng = ctrlng + interval;
} else {
interval = (maxlng - minlng) / 2;
minlat = ctrlat - interval;
maxlat = ctrlat + interval;
}

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)))));

var zoom = Math.floor(8 - Math.log(1.6446 * dist / Math.sqrt(2 * (mapdisplay * mapdisplay))) / Math.log (2));

var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(ctrlat, ctrlng), zoom);

Ok that’s all Thank you, and I hope this article can help you and others.
Thanks to Dusan for the formula and all Google Map Programmer for helping me to Finnish this task.