Hide/Show Google Maps markers based on category with checkbox's

Question

I've searched thoroughly and spent two full working days on this, so far I can't find a scenario that matches mine specifically. I'm learning on the fly here, ok here goes...

I'm using the google maps api v3. I have 12 pub locations (markers) on the map. Above the map I have checkbox's defining categories, 1 pub may fit under numerous categories. I want to show only the pub within the particular category on a checkbox click and hide the remaining.

I've tried numerous solutions to no avail, i've stripped it back to the bare minimum for new eyes. Thanks for your time.

Live link: http://xii.com.au/pubmap

Javascript:

var infowindow = null;
    $(document).ready(function () { initialize();  });
    function initialize() {
    var centerMap = new google.maps.LatLng(-37.854000, 144.900432);
        var myOptions = {
            zoom: 14,
            minZoom: 12,
            maxZoom: 20,
            center: centerMap,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            styles:[{
                featureType:"poi",
                elementType:"labels",
                stylers:[{
                visibility:"off" /* Hide POI */
                }]
            }]
        }
       var map = new google.maps.Map(document.getElementById("googlemap"), myOptions);
            setMarkers(map, sites);
            google.maps.event.addDomListener(window, "resize", function() {
       var center = map.getCenter();
           google.maps.event.trigger(map, "resize");
           map.setCenter(center); 
        });
        infowindow = new google.maps.InfoWindow({
                content: "loading..."
            });
    }

    var sites = [
          ['Customs House Hotel', -37.86314,144.904012, 9, '<a class="orange" href="#">Customs House Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
          ['Juntions Beer Hall & Wine Bar', -37.843199,144.883992, 1, '<a class="orange" href="#">Juntions Beer Hall & Wine Bar</a><p>Newport</p><p><img src="img/stars_45.png" /></p>'],
          ['Morning Star Hotel', -37.86426,144.899121, 11, '<a class="orange" href="#">Morning Star Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
          ['Pirates Tavern', -37.862818,144.907381, 8, '<a class="orange" href="#">Pirates Tavern</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
          ['Prince Albert Hotel', -37.853337,144.896165, 2, '<a class="orange" href="#">Prince Albert Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
          ['Rifle Club Hotel', -37.858244,144.888843, 4, '<a class="orange" href="#">Rifle Club Hotel</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
          ['Rose of Australia Hotel', -37.85892,144.899105, 6, '<a class="orange" href="#">Rose of Australia Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
          ['Stags Head Hotel', -37.8661,144.906562, 12, '<a class="orange" href="#">Stags Head Hotel</a><p>Williamstown</p><p><img src="img/stars_35.png" /></p>'],
          ['Steam Packet Hotel', -37.863519,144.90268, 10, '<a class="orange" href="#">Steam Packet Hotel</a><p>Williamstown</p><p><img src="img/stars_4.png" /></p>'],
          ['Victoria Inn', -37.85676,144.897547, 3, '<a class="orange" href="#">Victoria Inn</a><p>Williamstown</p><p><img src="img/stars_25.png" /></p>'],
          ['Williamstown RSL', -37.858342,144.894213, 5, '<a class="orange" href="#">Williamstown RSL</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>'],
          ['Yacht Club Hotel', -37.862191,144.902608, 7, '<a class="orange" href="#">Yacht Club Hotel</a><p>Williamstown</p><p><img src="img/stars_3.png" /></p>']
    ];

    function setMarkers(map, markers) {

      var image = {
            url: 'img/pin.png',
            size: new google.maps.Size(33, 41),
            origin: new google.maps.Point(0,0),
            anchor: new google.maps.Point(16, 41),      
          };

      for (var i = 0; i < markers.length; i++) {
            var sites = markers[i];
            var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
            var marker = new google.maps.Marker({
                position: siteLatLng,
                map: map,
                icon: image,
                title: sites[0],
                zIndex: sites[3],
                html: sites[4],
            });     

      var contentString = "";
      google.maps.event.addListener(marker, "click", function () {
                infowindow.setContent(this.html);
                infowindow.open(map, this);

            });
        }       
 }
 google.maps.event.addDomListener(window, 'load', initialize);

HTML

<h1>Pubs</h1>
        <div class="subhead">
        <div class="tags">
            <ul>
            <li class="current"><label><input type="checkbox" name="filter" id="all"> All &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="craft-beer"> Craft Beer &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="beer-garden"> Beer Garden &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="night-club"> Night Club &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="quiz-night"> Quiz Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="steak-night"> Steak Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="parma-night"> Parma Night &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="tab"> TAB &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="live-sport"> Live Sport &nbsp;</label></li>
            <li><label><input type="checkbox" name="filter" id="live-music"> Live Music</label></li>
        </ul>
         </div>
        </div>
    </header>
<div id="googlemap"></div>

Answer 1

I've put together a fiddle that demonstrates how to set this up, but overview: store references to your markers in an array, and then when the checkboxes are clicked, run through your list of pubs and show or hide the markers depending on whether they match.

The critical bit is in the for loop where you create your arrays. Here's a modified version that will set things up:

markerobj = [];
for (var i = 0; i < markers.length; i++) {
    var sites = markers[i];
    var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
    markerobj[i] = new google.maps.Marker({
        position: siteLatLng,
        map: map,
        icon: image,
        title: sites[0],
        zIndex: sites[3],
        html: sites[4],
    });

    var contentString = "";
    google.maps.event.addListener(markerobj[i], "click", function () {
        infowindow.setContent(this.html);
        infowindow.open(map, this);

    });
}

And then the handler to filter them when the checkboxes are changed:

$('.tags').on('change', 'input[type="checkbox"]', function () {
    filter = $(this).val();
    for (i = 0; i < sites.length; i++) {
        //Test to see if the entry matches, for now we'll just make it random to illustrate the concept
        //e.g. if(filter in sites[i].attrs)
        if(Math.random() < 0.5) {
            markerobj[i].setVisible(true);
        } else {
            markerobj[i].setVisible(false);
        }
    }
});

That code will just randomly pick about half of the markers to show, just to demonstrate that it is indeed hiding and showing things. You'll have to put some actual logic in there in place of the Math.random(), probably checking the filter against something in the entry for that marker. The important bit is that now you have a list of the Marker objects that are mapped to the same indexes as your sites, so you can alter the Markers on the map based on information in the sites array.

In order to filter things, somewhere (probably in the sites array) you're going to have to list which attributes the pub fulfills that you can check against. Supporting filtering by multiple attributes will require some additional checking (when any checkbox is changed, you'll need to pull the values of all the checkboxes and check each item against all of them), but this example should get you back on track.

Other notes: you'll have to declare markerobj as a global variable like the sites array, so you can get to it from the callback. I would recommend using the value of the checkbox to store what it's filtering for, rather than the id - my code above assumes that the value of the checkbox is the filter.