Googleマップの情報ウィンドウはJavaScriptのマーカーの1つにしか表示されません

Question

私は位置情報サービスを提供するウェブサイトを開発中です。 JavaScriptを使用してGoogle Map APIと私のウェブサイトを統合しています。次に、データをMapにインポートし、各項目をMapのマーカーとして表示します。地図上にマーカーとしてデータをインポートして表示するとうまくいきます。

しかし、マップ上の各マーカーの情報ウィンドウを表示する際に問題が発生しています。問題はマップ上に2つのマーカーがあることですが、アイテムをクリックすると情報ウィンドウは常に同じアイテムに表示されます。以下のスクリーンショットをご覧ください。

あなたはスクリーンショットで見ることができるように、私は右側にマーカーをクリックしたが、情報ウィンドウは別の項目に表示されています。

これは、マップのための私の完全なJavaScriptのである：

var map; 

    function initialize() { 
     var lat = $('.region-latitude').val(); 
     var long = $('.region-longitude').val(); 
     map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 4, 
      center: new google.maps.LatLng(lat, long), 
      mapTypeId: google.maps.MapTypeId.TERRAIN 
     }); 

     var script = document.createElement('script'); 
     script.src = $('.map-items-url').val(); 
     document.getElementsByTagName('head')[0].appendChild(script); 
    } 

    window.items_callback = function (results) { 

     for (var i = 0; i < results.features.length; i++) { 
      var coords = results.features[i].geometry.coordinates; 

      var latLng = new google.maps.LatLng(coords[0], coords[1]); 
      var itemMarker = new google.maps.Marker({ 
       position: latLng, 
       map: map, 
       title: results.features[i].name 
      }); 

      var contentString = '<h3>' + results.features[i].name + '</h3>'; 

      var infowindow = new google.maps.InfoWindow({ 
       content: contentString 
      }); 

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

     } 
    } 

    google.maps.event.addDomListener(window, 'load', initialize) 

私のコードの何が問題になっているのですか？マーカーごとに異なる情報ウィンドウを表示するにはどうすればよいですか？

Answer 1

これはスコープの問題のようです。 clickハンドラがアクティブになった時点で、itemMarkerは最後に追加されたマーカーを指しており、infowindowは最後に作成された情報ウィンドウを指しています。そのため、常に最後に追加されたマーカーにしか表示されません。これらの変数をカプセル化するスコープを作成する必要があります。

これを試してみてください：

for (var i = 0; i < results.features.length; i++) { 
    (function(index){ 
     var coords = results.features[index].geometry.coordinates; 

     var latLng = new google.maps.LatLng(coords[0], coords[1]); 
     var itemMarker = new google.maps.Marker({ 
      position: latLng, 
      map: map, 
      title: results.features[index].name 
     }); 

     var contentString = '<h3>' + results.features[index].name + '</h3>'; 

     var infowindow = new google.maps.InfoWindow({ 
      content: contentString 
     }); 

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

    })(i); 
} 

は、詳細については、このSO question and answerともthis SO question and answersを確認してください。また、thisは、スコープに関する良い記事です。