Googleマップ（API v3）ですべてのマーカーを表示する方法

Question

Googleマップ上にすべてのマーカーを表示したいが、ループは最後のレコードのみを表示する。どのようにそれを修正できますか？

function initMap() { 
    for (i = 0; i < markers.length ; i++) { 
     var location = {lat: markers[i][0], lng: markers[i][1]}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 10, 
      center: location 
     }); 
     var marker = new google.maps.Marker({ 
      position: location, 
      // prevent the user move the marker 
      draggable: false, 
      map: map 
     }); 
     } 
     } 

Answer 1

ループのたびにマップを作成しています。このため、最後のマーカーのみが表示されます。ループの外側にマップを作成するコードを移動します。

function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: {lat: markers[0][0], lng: markers[0][1]} 
    }); 

for (i = 0; i < markers.length ; i++) { 
    var location = {lat: markers[i][0], lng: markers[i][1]}; 

    var marker = new google.maps.Marker({ 
     position: location, 
     // prevent the user move the marker 
     draggable: false, 
     map: map 
    }); 
    } 
} 

あなたがマップは、あなたがLatLngBoundsクラスを使用することができますすべてのマーカーを表示することでズームしたい場合。