Filtering google maps markers with a checkbox

Question

Hi,

I'm trying to filter my google maps markers from a checkbox, based on this V3 example. My checkbox html is:

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

My javascript is below. I can't seem to get the filters to work - at present all the markers appear on the map regardless of the state of the checkboxes. I'm guessing I've just got some of my variables in the wrong place, but I haven't been able to crack the problem so far! Any help would be much appreciated.

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

Your problem is that the boxclick() function is enclosed within the scope of the mapInit() function, and therefore boxclick() is not accessible from outside mapInit(). You should remove the onclick events from your HTML input fields, and then define the event handlers within the mapInit() function as follows:

function mapInit() {

  // ...

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