web-dev-qa-db-ja.com

Google Maps APIでマーカーにポップアップを設定する方法は？

このコードを使用して、すべてのマーカーを表示および設定します。このコードでマーカーに関する情報を含むポップアップを追加するにはどうすればよいですか？テキストに「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);
}
javascriptgoogle-mapsgoogle-api
21
whoah

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

JavaScript変数は関数スコープで機能するため、マーカーリスナーごとに関数を呼び出して、適切な変数参照を作成する必要があります。ここに見られるように、匿名関数を使用するか、クリックリスナーを作成するための関数を定義できます。

複数の情報ウィンドウ：

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

ほとんどの場合、複数のInfoWindowを同時に開くことは望ましくありません。閉じるためにクリックする必要があるのは面倒です x。次に、InfoWindowオブジェクトが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);
  });
}
38
Heitor Chang
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);
          });

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

1
user3635230

これは、ポップアップのコンテンツを追加できる領域です

var infowindow = new google.maps.InfoWindow({
                content: "Add your popup content here"
              });

これはポップアップを表示するためのものです

marker.addListener('click', function() {
          infowindow.open(map, marker);
        });

以下のコードは、その動作と使用方法を示しています。

features.forEach(function(feature) {
          var infowindow = new google.maps.InfoWindow({
                    content: "Add your popup content here"
                  });
            var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat,long),
            icon: "image.png",
            /*icon: icons[feature.type].icon,*/
            title: "Title for marker",
            map: map
          });
          marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
        });
1
Rishabh Jhalani

これは、変数iがループで使用されていないが、マーカーがクリックされたときに、そしてiが最後のインデックス+ 1に等しいためです... addListenerは非同期であり、同期ではありません。

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

0
dda