Google Maps v3 API Extend Bounds. Javascript How-To?

Question

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 = [];

function 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

Answer 1

Ok. I answered this myself.

For future readers.

You need to pass an array just containing Long/Lat vars to the extendbounds function.

Thanks