Question

I’m using the gMap plugin for jQuery. On my map I have several markers. How do I center the map based on the extents of the markers? Then, if possible, zoom out slightly to leave a margin between the outermost markers and the map’s edge?

Thanks!

Edit 1- The code is similar to this example from http://gmap.nurtext.de/examples.html …

$("#map4").gMap({ markers: [{ latitude: 47.651968,
                              longitude: 9.478485,
                              html: "_latlng" },
                            { address: "Tettnang, Germany",
                              html: "The place I live" },
                            { address: "Langenargen, Germany",
                              html: "_address" }],
                  address: "Braitenrain, Germany",
                  zoom: 10 });

Answer 1

This might help you a little…

//Zoom and center the map to fit the markers  
//This logic could be conbined with the marker creation.  
//Just keeping it separate for code clarity.  
var bounds = new google.maps.LatLngBounds();  
for (index in markers) {  
    var data = markers[index];  
    bounds.extend(new google.maps.LatLng(data.lat, data.lng));  
}  
map.fitBounds(bounds);