各マーカーを独自のinfoWindowにリンクするにはどうすればよいですか？あなたが見ることができるように

Question

、私はこのようなマーカー情報を含むJSONオブジェクトに反復処理しています：

（私もインフォボックスのプラグインを使用していますが、それは問題には関係ありません）

function drawAirports() { 
    var markers = []; 

    if (markers != undefined) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length = 0; 
    } 

    var json = [ 
     {"id":8585885,"airport":"airport name", "lat" : "1.3", "long" : "1.33"}, 
     {"id":8585886,"airport":"airport name 1", "lat" : "-1.3", "long" : "1.33"}, 
     {"id":8585886,"airport":"airport name 2", "lat" : "42.5000", "long" : "1.5000"}, 
     {"id":8585886,"airport":"airport name 3", "lat" : "24.0000", "long" : "54.0000"}, 
     {"id":8585886,"airport":"airport name 4", "lat" : "17.0500", "long" : "-61.8000"}, 
     {"id":8585886,"airport":"airport name 5", "lat" : "18.2500", "long" : "-63.1667"}, 
     {"id":8585886,"airport":"airport name 6", "lat" : "24.0000", "long" : "54.0000"}, 
     {"id":8585886,"airport":"airport name 7", "lat" : "41.0000", "long" : "20.0000"}, 
     {"id":8585886,"airport":"airport name 8", "lat" : "40.0000", "long" : "45.0000"}, 
     {"id":8585886,"airport":"airport name 9", "lat" : "12.2500", "long" : "-68.7500"}, 
     {"id":8585886,"airport":"airport name 10", "lat" : "-12.5000", "long" : "18.5000"}, 
     {"id":8585886,"airport":"airport name 11", "lat" : "35.0000", "long" : "105.0000"}, 
     {"id":8585886,"airport":"airport name 12", "lat" : "-90.0000", "long" : "0.0000"}, 
     {"id":8585886,"airport":"airport name 13", "lat" : "34.0000", "long" : "-64.0000"}, 
     {"id":8585886,"airport":"airport name 14", "lat" : "-14.3333", "long" : "-170.0000"}, 
     {"id":8585886,"airport":"airport name 15", "lat" : "47.3333", "long" : "13.3333"}, 
     {"id":8585886,"airport":"airport name 16", "lat" : "-27.0000", "long" : "133.0000"}, 
     {"id":8585886,"airport":"airport name 17", "lat" : "12.5000", "long" : "-69.9667"} 
    ]; 

    var airports = eval(json); 

    for (var i = 0; i < airports.length; i++) { 

     var airport = airports[i]; 

     var marker = new google.maps.Marker({ 
      position: new google.maps.LatLng(airport.lat, airport.long), 
      map: map, 
      title: airport.airport, 
      icon: 'img/gmaps/marker.png', 
      visible: true 
     }); 

     infobox = new InfoBox({ 
      content: '<h3>'+airport.airport+'</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>', 
      disableAutoPan: false, 
      maxWidth: 150, 
      pixelOffset: new google.maps.Size(-212, -150), 
      zIndex: null, 
      boxStyle: { 
       width: "280px" 
      }, 
      closeBoxMargin: "0", 
      closeBoxURL: "img/gmaps/close.png", 
      infoBoxClearance: new google.maps.Size(1, 1) 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infobox.open(map, this); 
      map.panTo(loc); 
     }); 

     markers.push(marker);      
    } 
} 

私の問題は、各マーカーが最後（番号17）の情報ウィンドウを開くことです。

私は間違っていますか？

Answer 1

あなたの問題は、Google Maps APIの使用率やライブラリではなく、クロージャを使用する方法で問題になります。あなたはグローバル変数infoboxを持っています。新しいインフォボックスを開く前に、1つのインフォボックスだけを必要とし、地図上にあるインフォボックスを閉じることはできますが、infoboxは、最後に作成された番号17 。 Javascriptクロージャを使用して、リスナーコードの内部にインフォボックスを作成し、airportの場合、クロージャのために常に正しいデータが含まれていることを利用します。これは動作するはずです：

function drawAirports() { 
    var markers = []; 
    var infobox = new InfoBox({ 
     content: '', 
     disableAutoPan: false, 
     maxWidth: 150, 
     pixelOffset: new google.maps.Size(-212, -150), 
     zIndex: null, 
     boxStyle: { 
      width: "280px" 
     }, 
     closeBoxMargin: "0", 
     closeBoxURL: "img/gmaps/close.png", 
     infoBoxClearance: new google.maps.Size(1, 1) 
    }); 

    if (markers != undefined) { 
     for (var i = 0; i < markers.length; i++) { 
      markers[i].setMap(null); 
     } 
     markers.length = 0; 
    } 

    var json = [ 
     {"id": 8585885, "airport": "airport name", "lat": "1.3", "long": "1.33"}, 
     {"id": 8585886, "airport": "airport name 1", "lat": "-1.3", "long": "1.33"}, 
     {"id": 8585886, "airport": "airport name 2", "lat": "42.5000", "long": "1.5000"}, 
     {"id": 8585886, "airport": "airport name 3", "lat": "24.0000", "long": "54.0000"}, 
     {"id": 8585886, "airport": "airport name 4", "lat": "17.0500", "long": "-61.8000"}, 
     {"id": 8585886, "airport": "airport name 5", "lat": "18.2500", "long": "-63.1667"}, 
     {"id": 8585886, "airport": "airport name 6", "lat": "24.0000", "long": "54.0000"}, 
     {"id": 8585886, "airport": "airport name 7", "lat": "41.0000", "long": "20.0000"}, 
     {"id": 8585886, "airport": "airport name 8", "lat": "40.0000", "long": "45.0000"}, 
     {"id": 8585886, "airport": "airport name 9", "lat": "12.2500", "long": "-68.7500"}, 
     {"id": 8585886, "airport": "airport name 10", "lat": "-12.5000", "long": "18.5000"}, 
     {"id": 8585886, "airport": "airport name 11", "lat": "35.0000", "long": "105.0000"}, 
     {"id": 8585886, "airport": "airport name 12", "lat": "-90.0000", "long": "0.0000"}, 
     {"id": 8585886, "airport": "airport name 13", "lat": "34.0000", "long": "-64.0000"}, 
     {"id": 8585886, "airport": "airport name 14", "lat": "-14.3333", "long": "-170.0000"}, 
     {"id": 8585886, "airport": "airport name 15", "lat": "47.3333", "long": "13.3333"}, 
     {"id": 8585886, "airport": "airport name 16", "lat": "-27.0000", "long": "133.0000"}, 
     {"id": 8585886, "airport": "airport name 17", "lat": "12.5000", "long": "-69.9667"} 
    ]; 

    var airports = eval(json); 

    for (var i = 0; i < airports.length; i++) { 
     (function (airport) { 

      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng(airport.lat, airport.long), 
       map: map, 
       title: airport.airport, 
       icon: 'img/gmaps/marker.png', 
       visible: true 
      }); 

      google.maps.event.addListener(marker, 'click', function() { 
       infobox.setContent('<h3>' + airport.airport + '</h3><a class="info" href="">Información</a><a class="bags" href="">Equipajes</a>'); 
       infobox.open(map, this); 
      }); 

      markers.push(marker); 
     })(airports[i]); 
    } 
}