google-maps:toggle markers based on criteria
see: http://stackoverflow.com/questions/17798334/toggle-markers-on-a-google-map-using-multiple-criteria-on-jsfiddle
by Alex Azuero
HTML
<script src="http://maps.google.com/maps/api/js?sensor=false&.js"></script>
<div id="map" style="width: 800px; height: 500px;"></div>
<form action="#">
Filter by ConType
1: <input value="1" name="contype" type="checkbox" checked/>
2: <input value="2" name="contype" type="checkbox" checked/>
3: <input value="3" name="contype" type="checkbox" checked/>
</form>
<form action="#">
Filter by Operator
NER: <input value="NER" name="operator" type="checkbox" checked/>
SEW: <input value="SEW" name="operator" type="checkbox" checked/>
TAW: <input value="TAW" name="operator" type="checkbox" checked/>
</form>
JavaScript
var json = [{
"Name" : "NER 1",
"Latitude" : 51.50732,
"Longitude" : -0.128673,
"Connect" : "BS123",
"ChargeR" : "Standard",
"ConType" : 1,
"Operator" : "NER",
},{
"Name" : "NER 2",
"Latitude" : 51.506906,
"Longitude" : -0.126548,
"Connect" : "BS234",
"ChargeR" : "Standard",
"ConType" : 2,
"Operator" : "NER",
},{
"Name" : "SEW 3",
"Latitude" : 51.508382,
"Longitude" : -0.129724,
"Connect" : "BS345",
"ChargeR" : "Standard",
"ConType" : 3,
"Operator" : "SEW",
},{
"Name" : "SEW 1",
"Latitude" : 51.508322,
"Longitude" : -0.126902,
"Connect" : "BS123",
"ChargeR" : "Standard",
"ConType" : 1,
"Operator" : "SEW",
},{
"Name" : "TAW 2",
"Latitude" : 51.507841,
"Longitude" : -0.126066,
"Connect" : "BS234",
"ChargeR" : "Standard",
"ConType" : 2,
"Operator" : "TAW",
},{
"Name" : "TAW 3",
"Latitude" : 51.50746,
"Longitude" : -0.12759,
"Connect" : "BS345",
"ChargeR" : "Standard",
"ConType" : 3,
"Operator" : "TAW",
}
]
function initialize() {
var latlng = new google.maps.LatLng(51.50746, -0.127594);
var myOptions = {
zoom: 17,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
mapTypeControl: true,
};
map = new google.maps.Map(document.getElementById('map'),myOptions);
markers = [];
for (var i = 0; i < json.length; i++) {
var data = json[i],
latLng = new google.maps.LatLng(data.Latitude, data.Longitude);
var marker = new google.maps.Marker({
position: latLng,
map : map,
title : data.Name,
});
markers.push(marker);
// end Looping through the JSON data
<!-- Map traffic begin -->
// end Creating a closure
}
// var markerCluster = new MarkerClusterer(map, markers)
}
$('[name="contype"],[name="operator"],').click(function(){
var criteria={contype:[],operator:[]};
$.each(criteria,function(a,b){
...