gmap.js
http://jsfiddle.net/3Y8ZE/1/
<input type="checkbox" value="Show Group 1" onclick="displayMarkers(this,1);">
<input type="checkbox" value="Show Group 2" onclick="displayMarkers(this, 2);">
<script type="text/javascript">
var beaches = [
[\'Bondi Beach\', -33.890542, 151.274856, 1],
[\'Coogee Beach\', -33.923036, 151.259052, 1],
[\'Cronulla Beach\', -34.028249, 151.157507, 2],
[\'Manly Beach\', -33.800101, 151.287478, 2],
[\'Maroubra Beach\', -33.950198, 151.259302, 2]
];
var map = new google.maps.Map(document.getElementById(\'map\'), {
zoom: 10,
center: new google.maps.LatLng(-33.88, 151.28),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var markers = [];
var i, newMarker;
for (i = 0; i < beaches.length; i++) {
newMarker = new google.maps.Marker({
position: new google.maps.LatLng(beaches[i][1], beaches[i][2]),
map: map,
icon: \''.Front::get_instance()->path.'img/targetmap.png\',
title: beaches[i][0]
});
newMarker.category = beaches[i][3];
newMarker.setVisible(false);
markers.push(newMarker);
google.maps.event.addListener(newMarker, \'click\', function() {
alert(beaches[i][0]);
});
}
function displayMarkers(obj,category) {
var i;
for (i = 0; i < markers.length; i++)
{
if (markers[i].category === category) {
if ($(obj).is(":checked")) {
markers[i].setVisible(true);
} else {
markers[i].setVisible(false);
}
}
else
{
markers[i].setVisible(false);
}
}
}
</script>