I am trying to create a Google map that allows the user to check the category and display these specific locations. I have this job:
http://thedenvillehub.com/test-hs/adv/scripts/test.html
What I want to do is add another icon for each category, so that it is red, one blue, etc. I found a couple of examples on the Internet, but nothing works for me. Here is my code for reference:
var markers = new Array();
var locations = [
['Boonton Town', '402-9410', 'Dial-a-Ride', 40.902, -74.407, 1 ],
['Boonton Township', '331-3336', 'Dial-a-Ride', 40.933, -74.425, 2 ],
['Butler Borough', '835-8885', 'Dial-a-Ride', 40.999497, -74.346326, 3 ]
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 10,
center: new google.maps.LatLng(40.7967667, -74.4815438),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow();
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][3], locations[i][4]),
map: map,
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png'
});
markers.push(marker);
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][0] +
"<br />"+locations[i][2]+"<br />"+locations[i][1]);
infowindow.open(map, marker);
}
})(marker, i));
}
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(true);
}
}
}
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i][2] == category) {
markers[i].setVisible(false);
}
}
}
hide("Dial-a-Ride");
hide("American Legion");
hide("Veterans of Foreign Wars");
hide("Nutrition");
$(".checkbox").click(function(){
var cat = $(this).attr("value");
if ($(this).is(":checked")) {
show(cat);
}
else {
hide(cat);
}
});