Как настроить масштаб карты, чтобы охватить все маркеры, видимые маркеры?

Question

Я создал карту с маркерами, которые извлекают данные latlongs из коллекции mongodb. Я установил центр как конкретное местоположение и уровень масштабирования до 5, но я хочу, чтобы карта должна увеличивать или уменьшать масштаб на основе местоположения маркера. Так что мне не нужно давать какое-либо конкретное место в центре. Пожалуйста, помогите.

Кодекс ниже -

<div class="page-content"> 
      <div id="tab-general"> 
       <div id="map" style="height: 500px; width: 100%;"> 

       </div> 
      </div> 
</div> 

<script type="text/javascript"> 
//LOAD DATA FROM MONGO 
     data= <%-JSON.stringify(data)%> 

</script> 
<script type="text/javascript"> 

var LatLngs = []; 
    for (j=0;j<data.length;j++){ 

    LatLngs[j] = [data[j].latitude, data[j].longitude, data[j].time, data[j].name]; 

    } 

var map = new google.maps.Map(document.getElementById('map'), { 
    center: new google.maps.LatLng(23.2500, 77.4170), 
    zoom: 5, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
}); 

var infowindow = new google.maps.InfoWindow(); 

var marker, i ,ext; 


for (i = 0; i < LatLngs.length; i++) { 
    marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(LatLngs[i][0], LatLngs[i][1]), 
    map: map 
    }); 

    google.maps.event.addListener(marker, 'click', (function(marker, i) { 
    return function() { 
     infowindow.setContent("Time - "+LatLngs[i][2]+"<br>User Name -"+LatLngs[i][3]); 
     infowindow.open(map, marker); 
    } 
    })(marker, i)); 
} 

Спасибо,

Dia

Answer 1

Что вы делаете, создаёте объект LatLngBounds. Когда вы добавляете каждый маркер, вы расширяете границы, чтобы указать местоположение этого маркера. После того, как все маркеры будут добавлены, вы затем обновите карту, чтобы соответствовать этим границам, и она автоматически изменит масштаб, чтобы все маркеры были видны.

var bounds = new google.maps.LatLngBounds(); 

for (i = 0; i < LatLngs.length; i++) { 
    position = new google.maps.LatLng(LatLngs[i][0], LatLngs[i][1]); 

    marker = new google.maps.Marker({ 
     position: position, 
     map: map 
    }); 

    bounds.extend(position) 
} 

map.fitBounds(bounds);