How can I display a different icon for markers that fit wthin different categories?
google-maps-api-3, google-maps-markers
Solution
Make an object `var iconSrc = {}`
Then, match categories to icon images to it.
iconSrc['Dial-a-ride'] = 'http://labs.google.com/ridefinder/images/mm_20_red.png';
iconSrc['American Legion'] = 'http://labs.google.com/ridefinder/images/mm_20_green.png';
...
when adding a marker, replace the icon image source with the new variable:
icon: iconSrc[locations[i][2]]
Here's a jsfiddle, the navigation is tough in the small pane so I moved the checkboxes to the top. http://jsfiddle.net/DA92S/1/
Problem
I'm attempting to make a Google Map which allows the user to check off a category and have those specific locations display. I've got that part working: http://thedenvillehub.com/test-hs/adv/scripts/test.html What I want to do is have a different icon come up for each category, so that one is red, one is blue, etc. I found a couple of examples online but nothing seems to be working for me. Here's 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 ] //other locations and categories ]; 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)); } // shows all markers of a particular category, // and ensures the checkbox is checked function show(category) { for (var i=0; i<locations.length; i++) { if (locations[i][2] == category) { markers[i].setVisible(true); } } } // hides all markers of a particular category, // and ensures the checkbox is cleared function hide(category) { for (var i=0; i<locations.length; i++) { if (locations[i][2] == category) { markers[i].setVisible(false); } } } // == show or hide the categories initially == hide("Dial-a-Ride"); hide("American Legion"); hide("Veterans of Foreign Wars"); hide("Nutrition"); $(".checkbox").click(function(){ var cat = $(this).attr("value"); // If checked if ($(this).is(":checked")) { show(cat); } else { hide(cat); } }); ```