Google map：各ポリゴンにクリックリスナーを追加

Question

私はWebアプリケーションを作成しています。 私は配列からポリゴンを追加するGoogleマップを持っています。私はその配列をループし、マップにポリゴンを追加します。私はまた、問題はポリゴンがすべて正しく描画されている

これは私が

map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 
//Loop on the polygonArray 
for (var i = 0; i < polygonArray.length; i++) { 
    //Add the polygon 
    var p = new google.maps.Polygon({ 
     paths: polygonArray[i], 
     strokeWeight: 0, 
     fillColor: '#FF0000', 
     fillOpacity: 0.6, 
     indexID: i 
    }); 
    p.setMap(map); 

    //Add the click listener 
    google.maps.event.addListener(p, 'click', function (event) { 
     //alert the index of the polygon 
     alert(p.indexID); 
    }); 
} 

をやっているポリゴンクリックにイベントリスナーを追加し、ポリゴン

の位置を警告する必要があります。しかし、問題は、ポリゴンをクリックしようとすると、常に最後のインデックスが表示されることです。追加された最後のポリゴンをクリックするようなものです。新しいリスナーを追加すると、古いリスナーを上書きすると思います。正しいインデックスを警告するために追加された各ポリゴンにリスナーを追加するにはどうすればよいですか？

ありがとうございました

Answer 1

これは正常な動作です。 私は考えることができる2つのソリューションがあります：

1）私は（私はそれをテストしていない）あなたはコンテキストからポリゴンをバック見つけることができると確信しています：

google.maps.event.addListener(polygon, 'click', function (event) { 
    alert(this.indexID); 
}); 

2あなたはまた）可能性があり（http://stackoverflow.com/questions/13017915/open-infowindow-for-each-polygon-google-maps- [各ポリゴンのGoogleマップのV3のオープン情報ウィンドウ]の

var addListenersOnPolygon = function(polygon) { 
    google.maps.event.addListener(polygon, 'click', function (event) { 
    alert(polygon.indexID); 
    }); 
} 

map = new google.maps.Map(document.getElementById('map_canvas'), 
    mapOptions); 
//Loop on the polygonArray 
for (var i = 0; i < polygonArray.length; i++) { 
    //Add the polygon 
    var p = new google.maps.Polygon({ 
     paths: polygonArray[i], 
     strokeWeight: 0, 
     fillColor: '#FF0000', 
     fillOpacity: 0.6, 
     indexID: i 
    }); 
    p.setMap(map); 
    addListenersOnPolygon(p); 
}