Как показать все маркеры на карте Google при начальной загрузке?

Question

Я разработал проект, который показывает карту google с несколькими маркерами. Моя проблема заключается в том, что не все маркеры отображаются на начальной загрузке. то есть. если у меня есть четыре маркера, только 2 отображаются на карте, когда карта первоначально загружается. Мне нужно уменьшить масштаб, чтобы просмотреть остальные маркеры.

Как я могу решить проблему?

Heres мой код для получения GoogleMap с помощью яваскрипта

window.onload=function(){     
     var mapOptions={     
      center:new google.maps.LatLng(markers[0].lat,markers[0].lng),     
      mapTypeId:google.maps.MapTypeId.ROADMAP   
     }; 
     var infoWindow=new google.maps.InfoWindow(); 
     var map=new google.maps.Map(document.getElementById("dvMap"),mapOptions); 
     var bounds=new google.maps.LatLngBounds(); 
     for(i=0;i<markers.length;i++){     
      var data=markers[i]; 
      var latlng=new google.maps.LatLng(data.lat,data.lng); 
      var marker=new google.maps.Marker({ 
       position:latlng, 
       map:map, 
       title:data.title    
      }); 
      (function(marker,data){ 
       google.maps.event.addListener(marker,"click",function(e){ 
        infoWindow.setContent(data.description); 
        infoWindow.open(map,marker); 
       });     
      })(marker,data);     
     } 
    }  

Answer 1

Это было некоторое время, так как я сделал Google Maps API работает, но я считаю, что вам нужно это:

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

// Go through each... 
for (var i = 0, LtLgLen = LatLngList.length; i < LtLgLen; i++) { 
    // And increase the bounds to take this point 
    bounds.extend (LatLngList[i]); 
} 

// Fit these bounds to the map 
map.fitBounds (bounds); 

Вы уже определить bounds array и loop ваши маркеры, чтобы просто добавить каждый маркер в массив bounds, а затем fitBounds.

См. http://blog.shamess.info/2009/09/29/zoom-to-fit-all-markers-on-google-maps-api-v3/ для оригинальной статьи.

Answer 2

for(i=0;i<markers.length;i++){     
      var data=markers[i]; 
      var latlng=new google.maps.LatLng(data.lat,data.lng); 
      var marker=new google.maps.Marker({ 
       position:latlng, 
       map:map, 
       title:data.title    
      }); 
      bounds.extend(marker); // here is the code to add every marker plotted on bounds 
      (function(marker,data){ 
       google.maps.event.addListener(marker,"click",function(e){ 
        infoWindow.setContent(data.description); 
        infoWindow.open(map,marker); 
       });     
      })(marker,data);     
     } 
map.setCenter(latlngbounds.getCenter()); // this will set the center of map to center of all markers 
map.fitBounds(latlngbounds); // this will fit all the markers to screen