マーカー固有の情報ウィンドウにコンテンツを表示する方法は？

Question

Googleマップ（api v3）を検索結果に応じてマーカーの数で作成しました。マーカーをクリックすると、情報ウィンドウが開きます。その情報ウィンドウにそのマーカーに関連する情報を表示させる最良の方法は何ですか？すべてのマーカーに関連する情報は、私がajaxリクエストから受け取るjsonオブジェクト内にあります。

for (i=0; i < result.point.length; i++) { 
        var latLng = new google.maps.LatLng(result.proint[i].Latitude,result.point[i].Longitude);          
        var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString() 
         //map: map 
        }); 
        markersArray.push(marker); 

        var infowindow = new google.maps.InfoWindow({ 
         content: 'specific information associated to the marker clicked' 
        }); 

        google.maps.event.addListener(markersArray[i], 'click', function(event) { 
         infowindow.open(map, this); 
        }); 

Answer 1

あなたは何をしようとしているのかよくわかりません。どこのコンテンツを読み込もうとしていますか？

google.maps.event.addListener(marker, 'click', (function(event, index) { 
    return function(){ 
    infowindow.content = markersArray[index].yourcontent; 
    // or 
    infowindow.content = yourcontentarray[index]; 
    infowindow.open(map,this); 
    } 
})(marker,i)); 

マーカーとインフォウィンドウ変数を関数外に宣言してください。

Answer 2

あなたはループの先頭で、あなたの例では、いくつかのタイプミス（proint）を持っている：

for (i=0; i < result.point.length; i++) { 
    var info_window_content = result.point[i].Latitude + '<br />'; 
    info_window_content += result.point[i].Longitue + '<br />'; 
    // etc for any value in you json object 
    // create your marker as is. 
    ... 
    var infowindow = new google.maps.InfoWindow({ 
        content: info_window_content 
       }); 
    // etc, etc. 

あなたは、あなたがやっているように、各マーカーにイベントリスナーを追加する必要があります。私はそれに何の問題も見ません。 これ以外にinfoWindow.open（map、marker）を使用します。

もっと効率的な方法があります。つまりinfoWindow.open（）の後です。 infoWindow.setContent（info_window_content）

Answer 3

まず、infoWindowの作成をforループから外す必要があります。あなたはこれにクリックイベントを添付

次に、変更は：

google.maps.event.addListener(markersArray[i], 'click', function(content) { 
    return function(event){ 
     infowindow.setContent(content); 
     infowindow.open(map, this); 
    } 
}(WHATEVER_THE_CONTENT_SHOULD_BE_FOR_THIS_MARKER)); 

あなたはこのの代わりマーカーを使用します。 は、イベントが発生したオブジェクトを参照し、マーカーは、最後に作成されたマーカーを参照します。

Answer 4

上記のようにinfoWindowを1つだけ作成してください。

マーカー内のコンテンツストア：

var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString(), 
         //set your content here 
         content:'your specific content' 
         //map: map 
        }); 

窓の開口部：

google.maps.event.addListener(markersArray[i], 'click', function(event) { 
         infoWindow.setContent(this.content); 
         infowindow.open(map, this); 
        }); 

Answer 5

はこれを試してみてください、それは私がコードを生きるために

// Add markers 

    for (i=0; i < result.point.length; i++) { 
        var latLng = new google.maps.LatLng(result.proint[i].Latitude, result.point[i].Longitude);          
        var marker = new google.maps.Marker({ 
         position: latLng, 
         title: i.toString() 
         //map: map 
        });      

    // marker info start 
        var infowindow = new google.maps.InfoWindow(); 

    (function (marker, result.point[i]) { 
        // add click event 
        google.maps.event.addListener(marker, 'click', function() { 
        var infoContent: "specific information associated to the marker clicked" 
        }); 
     infoWindow.setContent(infoContent); 
         infowindow.open(map, marker); 
        }); 

    // selected marker 4 infowindow 
    (marker, result.point[i]); 

     markersArray.push(marker); 
     }