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.