嘗試在多個標記上顯示來自JSON的InfoWindow數據

Question

我有多個標記從JSON文件加載到Google地圖v3 api中。但是，它只將最後一個JSON條目加載到最後一個標記的地圖infoWindow中。其他標記點擊時不顯示任何信息窗口。

我已經找到了下面的相關文章，但似乎無法得到這個工作。

..3979486/infowindow-help-on-google-maps-api-3

..2357323/trying-to-bind-multiple-infowindows-to-multiple-markers-on-a-google-map-and-faili

我猜測它有事情做與的addListener的位置？

這裏是我的了：

<script src="http://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script> 
<script type="text/javascript" src="markerclusterer.js"></script> 
<script src="jquery-1.5.1.min.js" type="text/javascript"></script> 


<script type="text/javascript"> 
function initialize() { 
    var myLatlng = new google.maps.LatLng(39.632906,-106.524591); 
    var myOptions = { 
    zoom: 8, 
    center: myLatlng, 
    mapTypeControl: true, 
    mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU}, 
    navigationControl: true, 
    navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL}, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    var map = new google.maps.Map(document.getElementById("mapdiv"), myOptions); 

    var url = "eventdata.json"; 
     $.getJSON(url, 
     function(data){ 
       $.each(data.markers, function(i,markers){ 

        var mylati = data.markers[i].lati; 
        var mylong = data.markers[i].long; 
        var mytitle = data.markers[i].title; 
        var myaddress = data.markers[i].address; 
        var myhtml = data.markers[i].html; 

    var mycontent = "<div class='infowin'><h3>" + mytitle + "</h3>" + "<h4>" 
    + myaddress + "</h4>" + myhtml + "</div>"; 

    var myLatlng = new google.maps.LatLng(parseFloat(mylati),parseFloat(mylong)); 



       <!--Load Event Markers--> 
        var markers = []; 
        for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) { 
         var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng); 
         var theTitle = dataMarkers.title; 
         var marker = new google.maps.Marker({ 
         position: latLng, 
         clickable: true, 
         title: theTitle, 
         }); 
         markers.push(marker); 
        } 

         var markerClusterer = new MarkerClusterer(map, markers, { 
          maxZoom: 15, 
          gridSize: 30, 
         }); 

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

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




     }); 
    }); 

    } 

</script> 

任何幫助是極大的讚賞

Answer 1

請this看一看，並試圖瞭解閉包

Answer 2

通過關閉閱讀並想通了這一點.. 。

 var map = new google.maps.Map(document.getElementById("map_canvas"), options); 


       var markers = []; 
       for (var i = 0, dataMarkers; dataMarkers = data.markers[i]; i++) { 
        var latLng = new google.maps.LatLng(dataMarkers.lat, dataMarkers.lng); 
        var marker = new google.maps.Marker({ 
        position: latLng, 
        title: dataMarkers.title, 
        date: dataMarkers.date, 
        time: dataMarkers.time, 
        desc: dataMarkers.desc, 
        img: dataMarkers.img, 
        add: dataMarkers.address, 
        cat: dataMarkers.cat, 
        map: map 
        }); 


       var infowindow = new google.maps.InfoWindow({ 
         content: " " 
         }); 
         google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent('<div id="mapCont"><img class="mapImg" src="'+this.img+'"/>' + 
               '<div class="mapTitle">'+this.title+'</div>' + 
               '<div class="mapHead">Date: <div class="mapInfo">'+this.date+'</div>' + 
               '<div class="mapHead">Time: <div class="mapInfo">'+this.time+'</div>' + 
               '<p>'+this.desc+'</p></div>'); 
         infowindow.open(map, this); 
         }); 

        markers.push(marker); 
       } 


      var markerClusterer = new MarkerClusterer(map, markers, { 
       maxZoom: 15, 
       gridSize: 50 
      }); 

}