Google Maps API v3 - マーカーすべての情報を共有同じInfoWindow

Question

私はどこでも掘り下げてきましたが、これを理解できないようです。それは私を夢中にさせている！私は一般的にjavascriptの初心者なので、私の問題を解決する翻訳にはかなり指摘することはできません。私は多くの人がこの問題を抱えていることに気付きましたが、それらはすべて私よりも高度な（または混乱しやすい）コードを使用しているようです。とにかく、ここに行きます！

私はすべてのマーカーが同じコンテンツを共有するという問題を抱えています。

function initialize() { 
var myOptions = { 
    center: new google.maps.LatLng(34.151271, -118.449537), 
    zoom: 9, 
    mapTypeId: google.maps.MapTypeId.ROADMAP, 
    mapTypeControl: false, 
    streetViewControl: false, 
    panControl: false, 
    zoomControl: true, 
    zoomControlOptions: { style: google.maps.ZoomControlStyle.SMALL }, 
}; 

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

setMarkers(map, clubs); 

} 

var clubs = [ 
['Poop', 34.223868, -118.601575, 'Dookie'], 
['Test Poop', 34.151271, -118.449537, 'Test Business'] 
]; 

function setMarkers(map, locations) { 
var image = new google.maps.MarkerImage('images/image.png', 
    new google.maps.Size(25, 32), 
    new google.maps.Point(0,0), 
    new google.maps.Point(0, 32) 
); 
var shape = { 
coord: [1, 1, 1, 20, 18, 20, 18 , 1], 
type: 'poly' 
}; 
for (var i = 0; i < locations.length; i++) { 
var club = locations[i]; 
var myLatLng = new google.maps.LatLng(club[1], club[2]); 
var infowindow = new google.maps.InfoWindow(); 
var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    icon: image, 
    shape: shape, 
    title: club[0], 
}); 
google.maps.event.addListener(marker, 'click', function(){ 
    infowindow.setContent(club[3]); 
    infowindow.open(map, this); 
}); 
} 
} 

私は詐欺だと知っていますが、誰かが私を助けてください！ ：P

Answer 1

問題は、ループ内のマーカークリックのイベントリスナーを設定しているためです。したがって、すべてのマーカーは、最後のマーカーのコンテンツを取得するだけになります。代わりにこれを試してください。新しいグローバル関数を作成します。あなたのループ内で次に

function bindInfoWindow(marker, map, infowindow, html) { 
    marker.addListener('click', function() { 
     infowindow.setContent(html); 
     infowindow.open(map, this); 
    }); 
} 

を、これを置き換えます。これで

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

：

// add an event listener for this marker 
bindInfoWindow(marker, map, infowindow, club[3]); 

Answer 2

マーカーオブジェクト（var marker = new ...）を設定するときは、この行を "title：club [0]"から "title：club [i]"に変更してください。はい、0をiに変更してください。

これで問題は解決します。

このリンクを参考にして、Google Maps APIのチュートリアルをご覧ください。

http://code.google.com/apis/maps/documentation/javascript/tutorial.html

それは非常に簡単で便利でなければなりません。