Google MAP API v3: Center & Zoom on displayed markers

Question

I use the following code to set markers on my map:

  var latLngs = []
  $.each(locations.markers, function(i, m){
   var myLatLng = new google.maps.LatLng(m.latitude, m.longitude);
   latLngs[i] = myLatLng                                          
   var marker = new google.maps.Marker({
    position: myLatLng,
    map: map,
    shadow: shadow,
    icon: image,
    shape: shape,
    title: m.city,
    zIndex: i
   });
  }) 

the markers show up on my map. now i would like to center & zoom the map on these markers. How can i accomplish that? I have tried:

map.fitBounds(getBoundsForLatLngs(latLngs));

the console.log of latLngs gives out:

 [(46.793182, 7.146903) { b=46.793182,  more...}, (46.8077779, 7.1709386) { b=46.8077779,  more...}]

But it seams not work and i get no error in the console. What i am doing wrong?

Answer 1

did you try adding:

zoom: 10,
center: myLatlng,

to your marker object ?

I've also find this fix that zooms to fit all markers

Update: another fix I've found online:

// map: an instance of GMap3
// latlng: an array of instances of GLatLng
var latlngbounds = new google.maps.LatLngBounds();
latlng.each(function(n){
   latlngbounds.extend(n);
});
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds); 

Answer 2

Can you trace the latLngs in console? I think your array mignt not be a continuous one (e.g. [0, 1, 2, 3, 5]) or some of the latlngs in that array might have invalid lat/lng values.