Filtro marcatori google maps con una casella di controllo

Question

Sto provando a filtrare i miei marcatori di google maps da una casella di controllo, in base a this V3 example. La mia casella di controllo 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> 

Il mio javascript è di seguito. Non riesco a far funzionare i filtri: attualmente tutti i marcatori appaiono sulla mappa indipendentemente dallo stato delle caselle di controllo. Immagino di avere alcune delle mie variabili nel posto sbagliato, ma finora non sono riuscito a risolvere il problema! Qualsiasi aiuto sarebbe molto apprezzato.

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

tuo problema è che la funzione boxclick() è racchiuso nell'ambito della funzione mapInit(), e quindi boxclick() non è accessibile dall'esterno mapInit(). È necessario rimuovere i onclick eventi dai campi di input HTML, e quindi definire i gestori di eventi all'interno della funzione mapInit() come segue:

function mapInit() { 

    // ... 

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