Google マップ Web アプリで問題が発生しています。マップにマーカーを追加しようとしています。ユーザーがそのマーカーをクリックすると、マーカーの名前が表示されます。
次のように、各マーカーに関する情報を配列に保存します。
var citymap = {};
citymap['edinburgh'] = {
center: new google.maps.LatLng(55.934120, -3.226569),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue1'
};
citymap['clue2'] = {
center: new google.maps.LatLng(55.970783, -3.164594),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue2'
}
citymap['clue4'] = {
center: new google.maps.LatLng(55.939583, -3.202092),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue3'
}
citymap['clue9'] = {
center: new google.maps.LatLng(0, 0),
population: 284,
image:clueImage,
color: '#ff0000',
elementId:'clue1'
}
次に、配列をループして、マーカーをマップに追加します。
for (var city in citymap) {
var playerMarker = new google.maps.Marker({
position: citymap[city].center,
map: map,
icon: citymap[city].image
});
google.maps.event.addListener(playerMarker, "click", function() {
var elementConnected = citymap[city].elementId;
console.log(elementConnected);
});
}
すべてが意図したとおりに機能しますが、いずれかのマーカーをクリックすると、配列内の最後のマーカーの値がすべてログに記録されます。これは、ループが終了した場所であるためだとわかっていますが、これを機能させる方法が思いつきません。
ヘルプは非常に役立ちます!