Filtrowanie znaczników map Google za pomocą pola wyboru

Question

Próbuję filtrować moje znaczniki map Google z pola wyboru, na podstawie this V3 example. Moje pole wyboru to 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> 

Mój javascript znajduje się poniżej. Nie wydaje mi się, żeby filtry działały - obecnie wszystkie znaczniki pojawiają się na mapie, niezależnie od stanu pól wyboru. Zgaduję, że właśnie niektóre z moich zmiennych znalazłem w niewłaściwym miejscu, ale jak dotąd nie udało mi się rozwiązać problemu! Każda pomoc byłaby bardzo cenna.

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

Answer 1

Twoim problemem jest to, że funkcja boxclick() jest ujęty w ramach funkcji mapInit() i dlatego boxclick() nie jest dostępny z zewnątrz mapInit(). Należy usunąć wydarzenia onclick ze swoich pól wejściowych HTML, a następnie zdefiniować obsługi zdarzeń wewnątrz funkcji mapInit() następująco:

function mapInit() { 

    // ... 

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