Google maps 尝试在多个标记上显示来自JSON的InfoWindow数据

我有多个标记从JSON文件加载到GoogleMapsV3API。但是，它只是在最后一个标记上将最后一个JSON条目加载到MapInfoWindow中。其他标记在单击时不显示任何信息窗口

我已经找到了下面的相关帖子，但似乎仍然无法让它发挥作用

我猜这和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>

函数初始化（）{
var mylatng=newgoogle.maps.LatLng（39.632906，-106.524591）；
变量myOptions={
缩放：8，
中心：myLatlng，
mapTypeControl:true，
mapTypeControlOptions:{style:google.maps.MapTypeControlStyle.DROPDOWN_MENU}，
导航控制：对，
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，
函数（数据）{
$.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].地址；
var myhtml=data.markers[i].html；
var mycontent=“+mytitle++”
+myaddress+“”+myhtml+“”；
var mylatng=new google.maps.LatLng（parseFloat（mylati）、parseFloat（mylong））；
var标记=[]；
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({
位置：latLng，
可点击：正确，
标题：标题，
});
标记器。推（标记器）；
}
var markerClusterer=新的markerClusterer（地图、标记、{
最大缩放：15，
网格大小：30，
});
var infowindow=new google.maps.infowindow({
内容：mycontent
});
google.maps.event.addListener（标记'click'，函数（）{
信息窗口。打开（地图、标记）；
});
});
});
}

---

非常感谢您提供的任何帮助

请查看并尝试理解闭包

请查看并尝试理解闭包

通读闭包并解决此问题

        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
            });

var map=new google.maps.map（document.getElementById（“map_canvas”），选项）；
var标记=[]；
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({
位置：latLng，
标题：dataMarkers.title，
日期：dataMarkers.date，
时间：dataMarkers.time，
desc:dataMarkers.desc，
img:dataMarkers.img，
添加：dataMarkers.address，
cat:dataMarkers.cat，
地图：地图
});
var infowindow=new google.maps.infowindow({
内容：“”
});
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setContent（“”+
''+这个.标题+''
'日期：'+此日期+''+
'时间：'+此时间+''+
“”+this.desc+”
）；
打开（地图，这个）；
});
标记器。推（标记器）；
}
var markerClusterer=新的markerClusterer（地图、标记、{
最大缩放：15，
网格大小：50
});

---

}

通读闭包并找出答案

        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
            });

var map=new google.maps.map（document.getElementById（“map_canvas”），选项）；
var标记=[]；
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({
位置：latLng，
标题：dataMarkers.title，
日期：dataMarkers.date，
时间：dataMarkers.time，
desc:dataMarkers.desc，
img:dataMarkers.img，
添加：dataMarkers.address，
cat:dataMarkers.cat，
地图：地图
});
var infowindow=new google.maps.infowindow({
内容：“”
});
google.maps.event.addListener（标记'click'，函数（）{
infowindow.setContent（“”+
''+这个.标题+''
'日期：'+此日期+''+
'时间：'+此时间+''+
“”+this.desc+”
）；
打开（地图，这个）；
});
标记器。推（标记器）；
}
var markerClusterer=新的markerClusterer（地图、标记、{
最大缩放：15，