Javascript 动态填充的谷歌地图边栏

我一直在使用中的代码来设置一个链接栏，当选择不同的类别过滤器时，链接栏会动态填充，但目前存在两个问题。首先，我将初始的

makeSidebar

函数放在地图的空闲事件中，但侧边栏仅在地图移动时创建，而不是在加载页面时创建。其次，在侧边栏中单击相应的链接时，我似乎无法打开marker infowindow。我的代码如下：

var map;
var infowindow;
var image = [];
var gmarkers = [];
var place;
var side_bar_html = "";

  image['attraction'] = 'http://google-maps-icons.googlecode.com/files/beach.png'; 
  image['food'] = 'http://google-maps-icons.googlecode.com/files/restaurant.png';
  image['hotel'] = 'http://google-maps-icons.googlecode.com/files/hotel.png';
  image['city'] = 'http://google-maps-icons.googlecode.com/files/smallcity.png';

function mapInit(){

    var placeLat = jQuery("#placelat").val();
    var placeLng = jQuery("#placelng").val();
    var centerCoord = new google.maps.LatLng(placeLat, placeLng); 

    var mapOptions = {
        zoom: 15,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById("map"), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
      var bounds = map.getBounds();
      var ne = bounds.getNorthEast();
      var sw = bounds.getSouthWest();
      var yMaxLat = ne.lat();
      var xMaxLng = ne.lng();
      var yMinLat = sw.lat();
      var xMinLng = sw.lng();
      //alert("bounds changed");
      updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng);
      show("attraction");
      show("food");
      show("hotel");
      show("city");
      makeSidebar();
    });

    function updateMap(yMaxLat, xMaxLng, yMinLat, xMinLng) {
    jQuery.getJSON("/places", { "yMaxLat": yMaxLat, "xMaxLng": xMaxLng, "yMinLat": yMinLat, "xMinLng": xMinLng }, function(json) {
      if (json.length > 0) {
        for (i=0; i<json.length; i++) {
          var place = json[i];
          var category = json[i].tag;
          var name = json[i].name;
          addLocation(place,category,name);
          //makeSidebar();
        }
      }
    });
   }

    function addLocation(place,category,name) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place.geom.y, place.geom.x),
        map: map,
        title: place.name,
        icon: image[place.tag]
      });
      //var iwNode = document.getElementById("infowindow");

      marker.mycategory = category;
      marker.myname = name;
      gmarkers.push(marker);

      google.maps.event.addListener(marker, 'click', function() {
        if (infowindow) infowindow.close();
        infowindow = new google.maps.InfoWindow({
          content: "<div id='infowindow'><div id='infowindow_name'><p>"+ place.name +"</p></div><div id='infowindow_contents'><p>" + place.tag +"</p><a href='/places/"+place.id+"' id='place_link'>Show more!</a></div></div>"
        });
        infowindow.open(map, marker);
        google.maps.event.addListener(map, 'click', function() {
          infowindow.close();
        });
      });
    }

    function show(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(true);
        }
      }
      document.getElementById(category+"box").checked = true;
    }

    function hide(category) {
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].mycategory == category) {
          gmarkers[i].setVisible(false);
        }
      }
      document.getElementById(category+"box").checked = false;
      infowindow.close();
    }

    function boxclick(box,category) {
      if (box.checked) {
        show(category);
      } else {
        hide(category);
      }
      makeSidebar();
    }

    jQuery('#attractionbox').click(function() {
      boxclick(this, 'attraction');
    });

    jQuery('#foodbox').click(function() {
      boxclick(this, 'food');
    });

    jQuery('#hotelbox').click(function() {
      boxclick(this, 'hotel');
    });

    jQuery('#citybox').click(function() {
      boxclick(this, 'city');
    });

    function myclick(i) {
      google.maps.event.trigger(gmarkers[i],"click");
    }

    function makeSidebar() {
      //var html = "";
      for (var i=0; i<gmarkers.length; i++) {
        if (gmarkers[i].getVisible()) {
          side_bar_html += '<a href="javascript:myclick(' + i + ')">' + gmarkers[i].myname + '<\/a><br>';
         }
       }
       document.getElementById("side_bar").innerHTML = side_bar_html;
    }
}

jQuery(document).ready(function(){
  mapInit();
  //makeSidebar();
});

var映射；
var信息窗口；
var图像=[]；
var gmarkers=[]；
var place；
var side_bar_html=“”；
图像['attraction']='http://google-maps-icons.googlecode.com/files/beach.png'; 
图像['food']='http://google-maps-icons.googlecode.com/files/restaurant.png';
图像['hotel']='http://google-maps-icons.googlecode.com/files/hotel.png';
图像['city']='http://google-maps-icons.googlecode.com/files/smallcity.png';
函数mapInit（）{
var placeLat=jQuery（“#placeLat”）.val（）；
var placeLng=jQuery（“#placeLng”）.val（）；
var centerCoord=new google.maps.LatLng（placeLat，placeLng）；
变量映射选项={
缩放：15，
中心：中心合作社，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
google.maps.event.addListener（映射'idle'，函数（）{
var bounds=map.getBounds（）；
var ne=bounds.getNorthEast（）；
var sw=bounds.getSouthWest（）；
var yMaxLat=ne.lat（）；
var xMaxLng=ne.lng（）；
var yMinLat=sw.lat（）；
var xminling=sw.lng（）；
//警报（“边界更改”）；
更新映射（yMaxLat、xMaxLng、yMinLat、Xminling）；
显示（“吸引力”）；
展示（“食物”）；
展览（“酒店”）；
展览（“城市”）；
makeSidebar（）；
});
函数更新映射（yMaxLat、xMaxLng、yMinLat、xminling）{
getJSON（“/places”，{“yMaxLat”：yMaxLat，“xMaxLng”：xMaxLng，“yMinLat”：yMinLat，“xMinLng”：xMinLng}，函数（json）{
如果（json.length>0）{
对于（i=0；i您的链接不起作用的原因是您正在
mapInit
函数中定义
my_click
和
makeSidebar
函数，因此它们不在
mapInit
范围之外。只需将它们移到
mapInit
之外，一切都应该正常工作

至于加载事件…您要查找的是的
adddomstener
方法。只需使用

google.maps.event.addDomListener(window, 'load', name_of_your_inital_function);
// e. g. google.maps.event.addDomListener(window, 'load', mapInit);

最后，不要这样做：

var image = [];
image['attraction'] = 'data'; 
image['food'] = 'more data';

数组在Javascript中不能用作散列。请改用对象作为字典/散列——这是您实际正在做的事情（数组“子类”对象），它将使其他人更容易使用您的代码（并使您避免以后的麻烦）

让我知道我是否可以做任何其他的帮助。干杯，这正接近我想要的行为！顺便说一句：谢谢你对阵列的提醒：）
var image = {};
image['attraction'] = 'data'; 
image['food'] = 'more data';