title: How can I display a different icon for markers that fit wthin different categories?
body: <p>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:</p>
  
  <p><a href="http://thedenvillehub.com/test-hs/adv/scripts/test.html" rel="nofollow">http://thedenvillehub.com/test-hs/adv/scripts/test.html</a></p>
  
  <p>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:</p>
  
  <pre><code>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 &lt; 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] +
                "&lt;br /&gt;"+locations[i][2]+"&lt;br /&gt;"+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&lt;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&lt;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);
      }
  });
  </code></pre>