Google Map API v3 — set bounds and center
Got everything sorted - see the last few lines for code - (bounds.extend(myLatLng); map.fitBounds(bounds);
)
function initialize() {
var myOptions = {
zoom: 10,
center: new google.maps.LatLng(0, 0),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(
document.getElementById("map_canvas"),
myOptions);
setMarkers(map, beaches);
}
var beaches = [
['Bondi Beach', -33.890542, 151.274856, 4],
['Coogee Beach', -33.923036, 161.259052, 5],
['Cronulla Beach', -36.028249, 153.157507, 3],
['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
['Maroubra Beach', -33.950198, 151.159302, 1]
];
function setMarkers(map, locations) {
var image = new google.maps.MarkerImage('images/beachflag.png',
new google.maps.Size(20, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
new google.maps.Size(37, 32),
new google.maps.Point(0,0),
new google.maps.Point(0, 32));
var shape = {
coord: [1, 1, 1, 20, 18, 20, 18 , 1],
type: 'poly'
};
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < locations.length; i++) {
var beach = locations[i];
var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
shadow: shadow,
icon: image,
shape: shape,
title: beach[0],
zIndex: beach[3]
});
bounds.extend(myLatLng);
}
map.fitBounds(bounds);
}
Yes, you can declare your new bounds object.
var bounds = new google.maps.LatLngBounds();
Then for each marker, extend your bounds object:
bounds.extend(myLatLng);
map.fitBounds(bounds);
API: google.maps.LatLngBounds
My suggestion for google maps api v3 would be(don't think it can be done more effeciently):
gmap : {
fitBounds: function(bounds, mapId)
{
//incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
if (bounds==null) return false;
maps[mapId].fitBounds(bounds);
}
}
In the result u will fit all points in bounds in your map window.
Example works perfectly and u freely can check it here www.zemelapis.lt
The answers are perfect for adjust map boundaries for markers but if you like to expand Google Maps boundaries for shapes like polygons and circles, you can use following codes:
For Circles
bounds.union(circle.getBounds());
For Polygons
polygon.getPaths().forEach(function(path, index)
{
var points = path.getArray();
for(var p in points) bounds.extend(points[p]);
});
For Rectangles
bounds.union(overlay.getBounds());
For Polylines
var path = polyline.getPath();
var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();
for(var i = 1; i < path.getLength(); i++)
{
var e = path.getAt(i);
slat = ((slat < e.lat()) ? slat : e.lat());
blat = ((blat > e.lat()) ? blat : e.lat());
slng = ((slng < e.lng()) ? slng : e.lng());
blng = ((blng > e.lng()) ? blng : e.lng());
}
bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));