Javascript 谷歌地图中的边栏链接未从动态生成的标记加载

我有一个谷歌地图加载，它通过JSON和一个循环绘制标记——到目前为止，这一切都很好

但是，我还尝试使用函数“buildSidebar（）”从标记生成侧栏链接，该函数有自己的循环，但该函数正在破坏映射。我把它剥了回去，两个版本都在脚本中，注释掉了

有人能告诉我边栏建筑元素哪里错了吗？任何帮助都将不胜感激

这里有一把小提琴——嗯哼——也不会加载（我想我已经按照所有的步骤让g地图加载到小提琴中了……）：

提前谢谢

以下是脚本：

(function () {

  window.onload = function() {

    // Create new map
    var map = new google.maps.Map(document.getElementById("map-02"), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

    var markerBounds = new google.maps.LatLngBounds();

    // Create the JSON data
    var json = [
      {
          "title": "Dalston Kingsland",
          "lat": 51.548148,
          "lng": -0.075674,
          "description": "<strong>Dalston Kingsland</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>AAA dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Hackney Central",
          "lat": 51.547105,
          "lng": -0.056031,
          "description": "<strong>Hackney Central</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>BBB dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Bethnal Green Station",
          "lat": 51.523917,
          "lng": -0.059541,
          "description": "<strong>Bethnal Green Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Old Street Station",
          "lat": 51.525528,
          "lng": -0.088185,
          "description": "<strong>Old Street Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      }
    ]

    // Create global infoWindow object for all markers
    //var infoWindow = new google.maps.InfoWindow();
    var infoWindow = new google.maps.InfoWindow({
      //content: contentString,
      maxWidth: 250
    });

    // Loop through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });

      //function buildSidebar() {
        //for (var i=0; i<marker.length; i++) {
          //if (marker[i].getVisible()) {
            //sidebarHtml += '<a href="javascript:myclick(' + i + ')">' + marker[i].myname + '<\/a><br>';
            //}
          //}
        //for (var i=0; i<marker.length; i++) {
          /*if (marker[i].getVisible()) {
            sidebarHtml += '<a href="javascript:myclick(' + i + ')">' + marker[i].myname + '<\/a><br>';
            }
          //}
        document.getElementById("tabs").innerHTML = sidebarHtml;
      }*/

      markerBounds.extend(latLng);

      // Create a closure to retain correct data.
      (function(marker, data) {
        google.maps.event.addListener(marker, "click", function(e) {
          infoWindow.setContent(data.description);
          infoWindow.open(map, marker);
        });
      })(marker, data);
    }

  map.fitBounds(markerBounds);

  }

})();

（函数（）{
window.onload=函数（）{
//创建新地图
var map=new google.maps.map（document.getElementById（“map-02”）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var markerBounds=new google.maps.LatLngBounds（）；
//创建JSON数据
var json=[
{
“头衔”：“道尔斯顿金斯兰”，
“lat”：51.548148，
“液化天然气”：-0.075674，
“描述”：“Dalston Kingslandlorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“AAA dolore magna aliquam erat Pat”
},
{
“标题”：“哈克尼中心”，
“lat”：51.547105，
“液化天然气”：-0.056031，
“描述”：“哈克尼中心”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“BBB dolore magna aliquam erat Pat。”
},
{
“标题”：“贝纳尔格林车站”，
“lat”：51.523917，
“液化天然气”：-0.059541，
“描述”：“Bethnal Green车站”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“CCC dolore magna aliquam erat Pat。”
},
{
“标题”：“老街站”，
“lat”：51.525528，
“液化天然气”：-0.088185，
“描述”：“老街车站”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“CCC dolore magna aliquam erat Pat。”
}
]
//为所有标记创建全局信息窗口对象
//var infoWindow=new google.maps.infoWindow（）；
var infoWindow=new google.maps.infoWindow({
//content:contentString，
最大宽度：250
});
//循环浏览JSON数据
for（var i=0，length=json.length；i代码中没有“marker”数组；要在HTML单击事件中使用google.maps.marker对象数组，该数组需要在全局范围内可用
您的代码中没有“myclick”函数，可以用google.maps.event.trigger（标记“click”）替换
任何地方都没有.myname属性，您可能希望使用.title

var-gmarkers=[]；
（功能（）{
window.onload=函数（）{
//创建新地图
var map=new google.maps.map（document.getElementById（“map-02”）{
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var markerBounds=new google.maps.LatLngBounds（）；
//创建JSON数据
var json=[
{
“头衔”：“道尔斯顿金斯兰”，
“lat”：51.548148，
“液化天然气”：-0.075674，
“描述”：“Dalston Kingslandlorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“AAA dolore magna aliquam erat Pat”
},
{
“标题”：“哈克尼中心”，
“lat”：51.547105，
“液化天然气”：-0.056031，
“描述”：“哈克尼中心”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“BBB dolore magna aliquam erat Pat。”
},
{
“标题”：“贝纳尔格林车站”，
“lat”：51.523917，
“液化天然气”：-0.059541，
“描述”：“Bethnal Green车站”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“CCC dolore magna aliquam erat Pat。”
},
{
“标题”：“老街站”，
“lat”：51.525528，
“液化天然气”：-0.088185，
“描述”：“老街车站”lorem ipsum dolor sit amet，”
“一位杰出的领袖，他是一位伟大的领袖”+
“CCC dolore magna aliquam erat Pat。”
}
]
//为所有标记创建全局信息窗口对象
//var infoWindow=new google.maps.infoWindow（）；
var infoWindow=new google.maps.infoWindow({
//content:contentString，
最大宽度：250
});
//循环浏览JSON数据
for（var i=0，length=json.length；ivar gmarkers = [];
(function () {

  window.onload = function() {

    // Create new map
    var map = new google.maps.Map(document.getElementById("map-02"), {
          mapTypeId: google.maps.MapTypeId.ROADMAP
        });

    var markerBounds = new google.maps.LatLngBounds();

    // Create the JSON data
    var json = [
      {
          "title": "Dalston Kingsland",
          "lat": 51.548148,
          "lng": -0.075674,
          "description": "<strong>Dalston Kingsland</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>AAA dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Hackney Central",
          "lat": 51.547105,
          "lng": -0.056031,
          "description": "<strong>Hackney Central</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>BBB dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Bethnal Green Station",
          "lat": 51.523917,
          "lng": -0.059541,
          "description": "<strong>Bethnal Green Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      },
      {
          "title": "Old Street Station",
          "lat": 51.525528,
          "lng": -0.088185,
          "description": "<strong>Old Street Station</strong> lorem ipsum dolor sit amet," + 
          "consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet" + 
          " <em>CCC dolore magna aliquam erat volutpat.</em>"
      }
    ]

    // Create global infoWindow object for all markers
    //var infoWindow = new google.maps.InfoWindow();
    var infoWindow = new google.maps.InfoWindow({
      //content: contentString,
      maxWidth: 250
    });

    // Loop through the JSON data
    for (var i = 0, length = json.length; i < length; i++) {
      var data = json[i],
      latLng = new google.maps.LatLng(data.lat, data.lng);

      // Creating a marker and putting it on the map
      var marker = new google.maps.Marker({
        position: latLng,
        map: map,
        title: data.title
      });
      gmarkers.push(marker);
      markerBounds.extend(latLng);

      // Create a closure to retain correct data.
      (function(marker, data) {
        google.maps.event.addListener(marker, "click", function(e) {
          infoWindow.setContent(data.description);
          infoWindow.open(map, marker);
        });
      })(marker, data);
    }

  map.fitBounds(markerBounds);
  buildSidebar();
  }
      function buildSidebar() {
        var sidebarHtml = "";                         
        for (var i=0; i<gmarkers.length; i++) {
          if (gmarkers[i].getVisible()) {
            sidebarHtml += '<a href="javascript:google.maps.event.trigger(gmarkers[' + i + '],\'click\')">' + gmarkers[i].title + '<\/a><br>';
            }
          }
        document.getElementById("tabs").innerHTML = sidebarHtml;
      }


})();