Googleマップ - 複数マーカー - 1 InfoWindowの問題

Question

さまざまな情報を表示するためにマーカーを取得できません。マーカーは常に最後の "contentString"の内容を表示します。

私は他のいくつかの投稿を読んだことがありますが、どれも役に立たないようです。

これはコードです：

function setMarkers(branches, map) { 
     var bounds = new google.maps.LatLngBounds(); 
     var contentString = null; 
     var infowindow = null; 
     infowindow = new google.maps.InfoWindow(); 
     for (var i = 0; i < branches.length; i++) { 
      var marker = null; 
      branch = branches[i]; 
      var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 
      contentString = '<p>' + branch[3] + '</p>'; 

      var marker = new google.maps.Marker({ 
       position: myLatlngMarker, 
       map: map, 
       title: branch[2] 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 

      bounds.extend(myLatlngMarker); 
     } 

     map.fitBounds(bounds); 
    } 

誰もが私が間違っているのかを見ることができますか？

おかげ

Answer 1

右、

私は解決策を見つけました。 'info'というマーカーに追加のプロパティを追加し、 'addlistener'イベント 'infowindow.setContent（this.info）'から参照しました。

function setMarkers(branches, map) { 
    var marker = null; 
    var infowindow = new google.maps.InfoWindow(); 
    var bounds = new google.maps.LatLngBounds(); 

    for (var i = 0; i < branches.length; i++) { 
     branch = branches[i]; 

     var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 

     var marker = new google.maps.Marker({ 
      position: myLatlngMarker, 
      map: map, 
      title: branch[2], 
      info: branch[3], 
      icon: '<%=Icon%>' 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.info); 
      infowindow.open(map, this); 
     }); 

     bounds.extend(myLatlngMarker); 
    } 

    map.fitBounds(bounds); 
} 

Answer 2

あなたはforループの代わりに、ループの内外情報ウィンドウとcontentStringを宣言したことがありますか？

function setMarkers(branches, map) { 
     var bounds = new google.maps.LatLngBounds(); 

     for (var i = 0; i < branches.length; i++) { 
      var infowindow = new google.maps.InfoWindow(); 
      var contentString = ""; 
      var marker = null; 
      branch = branches[i]; 
      var myLatlngMarker = new google.maps.LatLng(branch[0], branch[1]); 
      contentString = '<p>' + branch[3] + '</p>'; 

      var marker = new google.maps.Marker({ 
       position: myLatlngMarker, 
       map: map, 
       title: branch[2] 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(contentString); 
       infowindow.open(map, this); 
      }); 

      bounds.extend(myLatlngMarker); 
     } 

     map.fitBounds(bounds); 
    } 

Answer 3

イム同じ問題を抱えて：ここで

が更新されたコードです。それはそれは時にクリックイベント火災に設定されているものですので、それは常に最後contentStringを表示

setMarkers(map, airports); 
} 

function setMarkers(map, locations) 
    { 
    //you only need 1 infoWindow 
    var infowindow = new google.maps.InfoWindow({ 
     content: "holding" //content will be set later 
    }); 

    for (var i = 0; i < locations.length; i++) 
    { 
     var airport = locations[i]; 
     var myLatLng = new google.maps.LatLng(airport[1], airport[2]); 
     var marker = new google.maps.Marker({ 
      position: myLatLng, 
      map: map, 
      title: airport[0], 
      zIndex: airport[3], 
      html: airport[4], 
     }); 




     google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent(this.html);//set the content 
       infowindow.open(map,this); 
     }); 
    } 
    } 

Answer 4

理由がある：私はタイトルはしかし、このコードを使って異なる表示され得ることができました。 forループの各繰り返しで上書きされます。

クロージャを使用してイベントハンドラを割り当て、関数の引数としてcontextStringを渡して、実際のハンドラを返す必要があります。

google.maps.event.addListener(marker, 'click', function(content) { 
    return function(){ 
     infowindow.setContent(content);//set the content 
     infowindow.open(map,this); 
    } 
}(contentString));