Google Maps APIでマーカーのポップアップを設定するにはどうすればよいですか？

Question

私はすべてのマーカーを表示して設定するこのコードを持っています。このコードでマーカーに関する情報を含むポップアップを追加するにはどうすればよいですか？テキストに "i"変数を追加しますが、 "test - 723"というポップアップをすべてのマーカーに設定します。ここで、723は "i"変数の最後の値です。なにが問題ですか？

for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
    position: new google.maps.LatLng(arraylng[i], arraylat[i]) 
    }); 
    var infowindow = new google.maps.InfoWindow({ 
    content: " " 
    }); 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent('test: ' + i + ''); 
    infowindow.open(map, this); 
    }); 
    markers.push(marker); 
} 

Answer 1

まず、ループ条件をi < arraylng.lengthに変更します。今は配列の最後の要素をキャプチャしていません。

JavaScript変数は関数スコープで機能しますので、正しい変数参照を作成するために各マーカーリスナーの関数を呼び出す必要があります。あなたは、匿名関数を使用しas seen here、またはクリックリスナーを作成するための関数を定義することができます

複数の情報ウィンドウ：

function makeInfoWindowEvent(map, infowindow, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.open(map, marker); 
    }); 
} 

ほとんどの場合ので、あなたは、複数の情報ウィンドウのオープンと同時に、したくはありません閉鎖をクリックしなければならないのは面倒ですx。次に、あなただけの1つの情報ウィンドウオブジェクトをしたい、とマーカーをクリックすると内容を設定します：

シングル情報ウィンドウ：ループ内

... 
    var infowindow = new google.maps.InfoWindow(); 

    for (var i = 0; i < arraylng.length-1; i++) { 
    var marker = new google.maps.Marker({ 
     position: new google.maps.LatLng(arraylng[i], arraylat[i]), 
     map: map 
    }); 

    makeInfoWindowEvent(map, infowindow, "test" + i, marker); 

    markers.push(marker); 
    } 
} 

function makeInfoWindowEvent(map, infowindow, contentString, marker) { 
    google.maps.event.addListener(marker, 'click', function() { 
    infowindow.setContent(contentString); 
    infowindow.open(map, marker); 
    }); 
} 

Answer 2

変数 iがループで使用されないため、マーカーがクリックされたときだ

- と、私は最後のインデックス+ 1に等しい... addListenerは、同期、非同期ではありません。

infowindow.setContent('test: ' + i + '');を削除し、content: " "をcontent: 'test: ' + iに置き換えます。これはあなたの問題を解決するはずです。

Answer 3

var marker = new google.maps.Marker({ 
       position: myLatLng, 
       .... 
       content: point[4] 
      }); 
google.maps.event.addListener(marker, 'click', function() { 
      infowindow.setContent(this.content); 
      infowindow.open(map, this); 
      }); 

コード。これは私にとって完璧に機能しました。