Googleマップ3：同じマーカーをクリックしても同じ情報ウィンドウが表示される

Question

私のGoogleマップにはいくつかのマーカーがあります。それぞれには、情報ウィンドウの形でクリックされたときに表示されるテキストがあります。このすべてのコードは以下のとおりです。しかし、問題は、地図上の任意のマーカーをクリックすると、地図上で常に同じマーカーがズームインされ、同じマーカーの情報ウィンドウがポップアップすることです。どこでも私はいつも同じクリックしています。

私が間違っていることが明白な何かがあるかどうかわかりません。誰かが私に助言をくれますか？

function getlistings() 
    { 
    $.getJSON('list/listings.json', processlistings); 
    } 



function processlistings(data) 
{ 
    listings = data; 
    markersArray = []; 
    for(i = 0; i < listings.length; i++) 
    { 
     var listing = listings[i]; 
     var markerLatLng = new google.maps.LatLng(parseFloat(listing["latitude"]), parseFloat(listing["longitude"])); 
     marker = new google.maps.Marker({ 
      position : markerLatLng, 
      title: listing['name'], 
      map : map 
     }); 

    var infowindow = new google.maps.InfoWindow( 
     { 
      content: listing['name'], 
      position: markerLatLng 
     }); 

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

    }); 

    markersArray.push(marker); 
} 

}

Answer 1

にコンテンツを設定するためのクリックを変更する必要があります。ループの最後には、がmarkerLatLngにあります。

マーカーをクリックするとinfowindow.open()が呼び出され、infowindowはmarkerLatLngになります。あなたはhttp://www.geocodezip.com/v3_MW_example_map1.html

//loop through markers, but create each with a helper function 
      var point = new google.maps.LatLng(43.82589,-79.10040); 
      var marker = createMarker(point,'Some stuff to display in the<br>Third Info Window') 

    function createMarker(latlng, html) { 
     var contentString = html; 
     var marker = new google.maps.Marker({ 
      position: latlng, 
      map: map, 
      zIndex: Math.round(latlng.lat()*-100000)<<5 
      }); 

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

で実証されたように、関数クロージャを使用する必要が

Answer 2

リストを通してあなたループとして、あなたは情報ウィンドウのVARの内容を上書きしています。あなたのデータをループ、あなたがオーバーInfoWindow何度も作成しているときに代わりに、あなたはthis.title

var infoWindow = new google.maps.InfoWindow({content: 'Loading...'});;  
function processlistings(data) 
    { 
     listings = data; 
     markersArray = []; 
     for(i = 0; i < listings.length; i++) 
     { 
      var listing = listings[i]; 
      var markerLatLng = new google.maps.LatLng(parseFloat(listing["latitude"]), parseFloat(listing["longitude"])); 
      marker = new google.maps.Marker({ 
       position : markerLatLng, 
       title: listing['name'], 
       map : map 
      }); 

     markersArray.push(marker); 
     } 
     for (var i = 0; i < markersArray.length; i++) { 
      var marker = markersArray[i]; 
      google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.setContent(this.title); 
      infoWindow.open(map, this); 
      }); 
     } 
    }