Javascript 使用复选框筛选google地图标记

我正试图从复选框中筛选我的谷歌地图标记，基于。我的html复选框是：

<form action="#">
  Attractions: <input type="checkbox" id="attractionbox" onclick="boxclick(this,'attraction')" /> &nbsp;&nbsp;
  Food and Drink: <input type="checkbox" id="foodbox" onclick="boxclick(this,'food')" /> &nbsp;&nbsp;
  Hotels: <input type="checkbox" id="hotelbox" onclick="boxclick(this,'hotel')" /> &nbsp;&nbsp;
  Towns/Cities: <input type="checkbox" id="citybox" onclick="boxclick(this,'city')" /><br />
</form>

吸引：
食物和饮料：
酒店：
城镇：

下面是我的javascript。我似乎无法让过滤器工作-目前所有的标记都出现在地图上，不管复选框的状态如何。我猜我只是把一些变量放错了地方，但到目前为止我还没能解决这个问题！任何帮助都将不胜感激

var map;
var infowindow;
var image = [];
var gmarkers = [];

  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 centerCoord = new google.maps.LatLng(18.23, -66.39); 
    var mapOptions = {
        zoom: 1,
        center: centerCoord,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

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

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

    jQuery.getJSON("/places", function(json) {
      if (json.length > 0) {
        for (i=0; i<json.length; i++) {
          var place = json[i];
          var category = json[i].tag;
          addLocation(place,category);
        }
      }
    });

    function addLocation(place,category) {
      var marker = new google.maps.Marker({
        position: new google.maps.LatLng(place.lat, place.lng),
        map: map,
        title: place.name,
        icon: image[place.tag]
      });

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

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

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

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

var映射；
var信息窗口；
var图像=[]；
var gmarkers=[]；
图像['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 centerCoord=newgoogle.maps.LatLng（18.23，-66.39）；
变量映射选项={
缩放：1，
中心：中心合作社，
mapTypeId:google.maps.mapTypeId.ROADMAP
};
map=new google.maps.map（document.getElementById（“map”）、mapOptions）；
google.maps.event.addListener（映射，'click'，函数（）{
infowindow.close（）；
});
jQuery.getJSON（“/places”），函数（json）{
如果（json.length>0）{
对于（i=0；i您的问题是
boxclick（）
函数包含在
mapInit（）
函数的范围内，因此
boxclick（）
无法从外部访问
mapInit（）
。您应该从HTML输入字段中删除
onclick
事件，然后在
mapInit（）
函数中定义事件处理程序，如下所示：

function mapInit() {

  // ...

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

太棒了，谢谢-删除内联js将是我的下一个挑战，所以这两个问题都解决了！但是我对全局变量有点困惑-我想在mapInit（）之前声明这些变量（就像我对map、infoWindow、image和gmarkers所做的那样）他们不会再被暗示了？@Sonia:对不起，我真的没有注意到他们在上面被宣布：）从我的回答中删除了那部分。