Google Mapsインフォウィンドウ上のマーカーの繰り返し

Question

さて、以下のコードでは、マップとマーカーが生成されたときに、生成された最後のマーカーをクリックして見ることができるのはなぜですか？これを実装するためのアイデアですか？ありがとう

<script> 
    function initMap() { 
     var uluru = {lat: -25.363, lng: 131.044}; 
     var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 5, 
     center: uluru 
    }); 

     {% for i in locations %} 
     { 
     var stuff = "{{ i.Name }}" 
     var marker = new google.maps.Marker({ 
      position: { {{ i.Loc }} }, 
      clickable: true, 
      label: "{{ i.Name }}", 
      animation: google.maps.Animation.DROP, 
      map: map 
     }); 
     } 
     {% endfor %} 
     var infowindow = new google.maps.InfoWindow({ 
      content: stuff 
     }); 
     marker.addListener('click', function() { 
      infowindow.open(map, marker); 
     }); 

    } 
    </script> 

Answer 1

あなたが探しているコードはmarker.setMap(null)です。

これを実装するには、ページが読み込まれるときにグローバルmarkers配列を作成する必要があります。

window.markers = [] 

（init関数内で）マーカーをその配列に押し込んで、後で参照できるようにします。あなたはそれをループにしたいし、それぞれを削除するには、Googleマップを教えてあげるあなたのclickリスナーで次に

var marker = new google.maps.Marker({ 
    ...your code... 
}); 
markers.push(marker); 

：

for (var i = 0, marker; (marker = markers[i]); i++) marker.setMap(null); 

次に、あなたのclick内部からnew google.maps.Markerを作りたいよ勿論リスナー。

CodePenにコードをスローすると、これを実装するのに役立ちます。