designing4u.de Yet Another Coding Blog

Setting boundaries for google map with more markers using jQuery

For a project I'm currently working on I had to display more markers in one google map. No problem at all, but only if all of them are placed in one city. You can just set up default level for the city and display as many markers as you want. In my case I had to display latest markers, which were saved all over the country. One would say no problem at all, just use default zoom level for the country and display the markers. What if 10 latest markers were placed in one city though? It would look stupid if they would be displayed covering each other. Additionally we do not want to use an onload event, therefore, we will use jQuery in this example. For this kind of problem google came up with a pretty nice solution.

if you want to see a working demo of this example, just click here.

One of the classes available in second version of google maps is GLatLngBounds. Instantiating this class constructs a rectangle in geographical lengths. One of the methods, called 'extend' allows us to extend this rectangle to get a perfect zoom level. It means that every time our loop will display a new marker, we will call 'extend' method, which will additionally extend the boundaries of the rectangle, so it contains that given point. An additional functionality, which will be covered by this function is an event listener, which will display info window when a user clicks on one of the markers. At the end we will set the zoom level using one of the methods (getBoundsZoomLevel()) from another class, which can be called though, without instantiating it and use the getCenter() method from GLatLngBounds to get the center of our map.

To save us some time, I decided to skip the part where we are creating our XML document, which contains all necessary information (latitude, longitude and text for info window) to display our markers, therefore if you need that part to be covered as well, just let me know. Let's take a closer look at our code:
[source:javascript]
$(document).ready(function() {
//our map container and instance of GLatLngBounds
var mapContainer = $("#map")[0];
var bounds = new GLatLngBounds();

//if browser is compatible
if (GBrowserIsCompatible()) {
//if div with given id was found
if(mapContainer) {
//instance of the GMap2 and some controls
var map = new GMap2(mapContainer);
map.addControl(new GLargeMapControl);
map.addControl(new GMapTypeControl);
map.addControl(new GScaleControl);
map.setCenter(new GLatLng(0,0),0);
}
//AJAX request
$.get('coordinates.xml',function(data) {
//we are looking for all marker and looping through them
$(data).find('marker').each(function(){
//serializing some data from the request
var lat = $(this).attr('lat');
var lng = $(this).attr('lng');
var desc = $(this).attr('desc');
var point = new GLatLng(lat,lng);
var marker = new GMarker(point);

//new marker
map.addOverlay(marker);
//extending the boundaries
bounds.extend(point);
//and the info window
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(desc);
});

});
//setting the zoom level and the center
map.setZoom(map.getBoundsZoomLevel(bounds));
map.setCenter(bounds.getCenter());
});

}

});
[/source]
I hope everything is clear. In case of any question just use the comment or contact form. One more thing left to show. Here is the content of xml file:
[source:xml]







[/source]