Filtrado de marcadores de google maps con una casilla de verificación

Question

Estoy tratando de filtrar mis marcadores de google maps de una casilla de verificación, basada en this V3 example. Mi casilla de verificación html es:

<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> 

Mi javascript está abajo. Parece que no puedo hacer que los filtros funcionen; en este momento, todos los marcadores aparecen en el mapa independientemente del estado de las casillas de verificación. ¡Supongo que acabo de encontrar algunas de mis variables en el lugar equivocado, pero hasta ahora no he podido descifrar el problema! Cualquier ayuda sería muy apreciada.

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

Su problema es que la función boxclick() está encerrado dentro del ámbito de la función mapInit(), y por lo tanto boxclick() no es accesible desde fuera mapInit(). Es preciso retirar las onclick eventos de sus campos de entrada HTML, y luego definir los controladores de eventos dentro de la función mapInit() de la siguiente manera:

function mapInit() { 

    // ... 

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