Google MAP API v3: Centre et zoom sur les marqueurs affichés

Question

J'utilise le code suivant pour définir des repères sur ma carte:

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 
    }); 
    }) 

Les marqueurs apparaissent sur ma carte. Maintenant, je voudrais & zoomer la carte sur ces marqueurs. Comment puis-je accomplir cela? J'ai essayé:

map.fitBounds(getBoundsForLatLngs(latLngs)); 

Le console.log de LatLng donne sur:

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

Mais il ne semble pas fonctionner, et je reçois pas d'erreur dans la console. Qu'est-ce que je fais mal?

Answer 1

J'ai aussi trouver ce correctif qui zooms to fit all markers

LatLngList: un tableau d'instances de latLng, par exemple:

// "map" is an instance of GMap3 

var LatLngList = [ 
        new google.maps.LatLng (52.537,-2.061), 
        new google.maps.LatLng (52.564,-2.017) 
       ], 
    latlngbounds = new google.maps.LatLngBounds(); 

LatLngList.forEach(function(latLng){ 
    latlngbounds.extend(latLng); 
}); 

// or with ES6: 
// for(var latLng of LatLngList) 
// latlngbounds.extend(latLng); 

map.setCenter(latlngbounds.getCenter()); 
map.fitBounds(latlngbounds); 

Answer 2

Essayez cette fonction .... ça marche ...

$(function() { 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
     var latlng_pos=[]; 
     var j=0; 
     $(".property_item").each(function(){ 
      latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()); 
      j++; 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()), 
       // position: new google.maps.LatLng(-35.397, 150.640), 
       map: map 
      }); 
     } 
     ); 
     // map: an instance of google.maps.Map object 
     // latlng: an array of google.maps.LatLng objects 
     var latlngbounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < latlng_pos.length; i++) { 
      latlngbounds.extend(latlng_pos[ i ]); 
     } 
     map.fitBounds(latlngbounds); 



    }); 

Answer 3

Si vous préférez un style plus fonctionnel:

// map - instance of google Map v3 
// markers - array of Markers 
var bounds = markers.reduce(function(bounds, marker) { 
    return bounds.extend(marker.getPosition()); 
}, new google.maps.LatLngBounds()); 

map.setCenter(bounds.getCenter()); 
map.fitBounds(bounds);