Googleマップのマーカーイベントクリックの問題

Question

function initMap() { 
    var markers = []; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 10, 
     center: { lat: -33.9, lng: 151.2 }, 
     mapTypeControl: false, 
     streetViewControl: false 

    }); 

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

    @foreach (var item in Model.legs) 
    { 
     if (item.Lat != null && item.Long != null) 
     { 
      <text> 

       var myLatLng = {lat: @item.Lat, lng: @item.Long}; 
       var marker = new google.maps.Marker({ 
        position: myLatLng, 
        map: map, 
        title: '@(item.From) - @(item.To)', 
        icon: '@(Url.Content("~/content/images/Map-Marker.png"))', 
       }); 
       marker.addListener('click', function() { 
        marker.setIcon('@(Url.Content("~/content/images/Map-Marker-Blue.png"))'); 
        alert(' @item.Id clicked'); 
       }); 
       bounds.extend(myLatLng); 
       markers.push(marker);      
      </text> 
     } 
    } 
    map.fitBounds(bounds); 
} 

google maps API上では、alert item.idがその場所にあるajaxポップアップ（コードには表示されません）を発生させる必要があります。マーカーをクリックすると、選択したマーカーのIDが表示されます。この部分は問題ありません。

マーカーをクリックしたときにマーカーアイコンを別のアイコンに変更するコードを追加しましたが、最後のマーカーのアイコンが変更されます。どのアイコンがクリックされたかにかかわらず。私は間違って何をしていますか？

Answer 1

あなたはマーカーの代わりにこれを使用する必要があり、あなたのマーカーは、最終的理由スコープチェーン

marker.addListener('click', function() { 
       this.setIcon('@(Url.Content("~/content/images/Map-Marker-Blue.png"))'); 

}

はそれが役に立てば幸いで最後のマーカーを指します。