Google Maps v3 API Extend Bounds. Javascript How-To?
function initialize(){
// Creating a map
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(53.0123601276819, -2.44519164333635),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var m = [];
functi开发者_如何学运维on addMarker(title, lat, lng) {
m[m.length] = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title,
clickable: true,
icon: 'http://domain.com/MVC/images/full.png'
});
}
addMarker('Home', 53.0682143712504, -2.52150736731894);
addMarker('Away', 53.0123601276819, -2.44519164333635);
addMarker('Away', 59.0123601276819, -2.44519164333635);
// Create a LatLngBounds object
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < m.length; i++) {
// Insert code to add marker to map here
// Extend the LatLngBound object
bounds.extend(m[i]);
}
alert(m[0]);
map.fitBounds(bounds);
document.write(getBounds());
}
The above is my code.
My intentions are to develop a map which shows numerous markers and pans the zoom such that all the markers fit on my screen.
I am new to JS.
My understanding is that
var m = [];
creates an empty array.
Then everytime i call addMarker()
the details get added to this array m
At the top I set a default zoom and center point.
I then add various markers.
I then loop through each key in the m array and extend the bounds using the data from this.
It is then my understanding that map.fitBounds(bounds);
should redefine the zoom/center as applicable to fit all the markers.
It does not. All my markers show, but the zoom/center is not auto adjusting as such, and I have no idea why.
Any advice would be greatly appreciated. Thanks
You need to pass a LatLng
object to the bounds.extend
function.
Here is the code :
....
bounds.extend(new google.maps.LatLng(lat, lng));
....
Here is a clarification of the above answer which is correct except it's missing a parenthesis and a little brief.
//make an empty bounds variable
var bounds = new google.maps.LatLngBounds();
//do your map stuff here
//special note: make sure your lat and lng are floats or googleMaps will error
var lat = 38.103;
var lng = -121.572;
bounds.extend(new google.maps.LatLng(lat, lng));
//adjust the viewport of the map
//special note: this only needs to be done once, don't put it in a loop
map.fitBounds(bounds);
精彩评论