Google v3 MAP API: Center & zoom na wyświetlanych markerów

Question

używam następujący kod do ustawione znaczniki na mojej mapie:

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

Znaczniki pojawiają się na mojej mapie. Teraz chciałbym wyśrodkować & powiększyć mapę na tych znacznikach. Jak mogę to zrobić? Próbowałem:

map.fitBounds(getBoundsForLatLngs(latLngs)); 

console.log z latLngs rozdaje:

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

Ale nie wydaje się do pracy, a ja się żadnego błędu w konsoli. Co ja robię źle?

Answer 1

Ja również znaleźć tę poprawkę zooms to fit all markers

LatLngList: tablica wystąpień latLng, na przykład:

// "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

spróbować tej funkcji .... to działa ...

$(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

w przypadku wolisz styl bardziej funkcjonalne:

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