title: google maps apiv3 - multiple dropdown categories/filter marker results
body: <p>So I'm trying to filter the marker result with two dropdown menus: 1). Select/show category One or Two. and 2). select/show only active or nonactive.  I got the active or nonactive to work but the first dropdown menu is not working with the other one.    </p>
  
  <pre><code>&lt;script&gt;
  (function() {
            var geocoder;
  
          var clusterer;
  
              window.onload = function() {
  
                // Creating a new map
                // Create a variable to make the map hover over Manchester upon initialising
      var map = new google.maps.LatLng(53.466808, -2.233936);
              var mapOptions = {
               center: map,
                zoom: 3,
                mapTypeId: google.maps.MapTypeId.ROADMAP,
  
      // end of the JSON script. If this could be referenced as an external resource that might be useful...
         }; 
         // the MapOptions variable is finished now
      // the map is defined below...
              var map = new google.maps.Map(document.getElementById("map"),
                  mapOptions);
  
                //var selectDiv = $("#category_panel")[0];
                //map.controls[google.maps.ControlPosition.TOP_LEFT].push(selectDiv);
  
  
                var json = [
        {
          "title": "One",
          "lat": 58.9,
          "lng": 15.8,
          "description": "this is category Two and nonactive",
          "category" : [ "two" ],
          "status" : [ "nonactive" ]
        },
        {
          "title": "Two",
          "lat": 59.9,
          "lng": 10.8,
          "description": "This is in category One and is non-active",
          "category" : [ "one" ],
          "status" : [ "nonactive" ]
        },
        {
          "title": "Three",
          "lat": 55.7,
          "lng": 12.6,
          "description": "this is cateogory one and is active",
          "category" : [ "one" ],
          "status" : [ "active" ]
        },
        {
          "title": "Four",
          "lat": 59.9,
          "lng": 10.8,
          "description": "this is in category two is and active",
          "category" : [ "two" ],
          "status" : [ "active" ]
        }
      ];
  
  
  
  
                // Custom marker - Need one for each category
                var image = new google.maps.MarkerImage(
                  'http://i.imgur.com/3YJ8z.png',
                  new google.maps.Size(19, 25), // size of the image
                  new google.maps.Point(0, 0) // origin, in this case top-left corner
                );
  
                // Creating a global infoWindow object that will be reused by all markers
                var infoWindow = new google.maps.InfoWindow();
  
                // Marker Clusterer setup
                var mcOptions = {
                  gridSize : 50,
                  maxZoom : 15
                };
                clusterer = new MarkerClusterer(map, [], mcOptions);
  
                var markers = {};
                var categoryIcons = {
                  "one" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=1%7CFF0000%7C000000",
                  "two" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=2%7C00FFFF%7C000000",
                  "three" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=3%7CFF00FF%7C000000"
                }
  
                var statusIcons = {
                  "active" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=10%7C00FFFF%7C000000",
                  "nonactive" : "https://chart.googleapis.com/chart?chst=d_map_pin_letter&amp;chld=20%7C00FFFF%7C000000",
  
                }
  
                // Looping through the JSON data
                for (var i = 0, length = json.length; i &lt; length; i++) {
                  var data = json[i],
                      latLng = new google.maps.LatLng(data.lat, data.lng),
                      category = data.category;
                      status = data.status;
  
                  if (category in markers == false) {
                    markers[category] = [];
                  }
  
                  //adding Status the category
  
                   if (status in markers == false) {
                    markers[status] = [];
                  }
  
  
  
                  // Creating a marker and putting it on the map
                  var marker = new google.maps.Marker({
                    position : latLng,
                    title : data.title,
                    icon : categoryIcons[data.category],
                    icon: statusIcons[data.status]
  
                  });
                  markers[category].push(marker);
  
                   markers[status].push(marker);
  
                  // Creating a closure to retain the correct data, notice how I pass the current data in the loop into the closure (marker, data)
                  (function(marker, data) {
  
                    // Attaching a click event to the current marker
                    google.maps.event.addListener(marker, "click", function(e) {
                      infoWindow.setContent(data.description);
                      infoWindow.open(map, marker);
                    });
                  })(marker, data);
  
                }// END for loop
  
                $("#category").change(function(){
                  var selected = $(this).val();
                  clusterer.clearMarkers();
                  clusterer.addMarkers(markers[selected]);
                });
                $("#category").change();
  
  
  
               $("#categoryAlt").change(function(){
                  var selected = $(this).val();
                  clusterer.clearMarkers();
                  clusterer.addMarkers(markers[selected]);
                });
                $("#categoryAlt").change();
  
  
  
  
  
              }// END window.onload
  
  
            })();
  
  
            function initialize() {
          geocoder = new google.maps.Geocoder();
  
  
       }
  &lt;/script&gt;
  </code></pre>
  
  <p>Here's my Html</p>
  
  <pre><code>&lt;div id="category_panel"&gt;
      category:&lt;select id="category"&gt;
  
        &lt;option value="two"&gt;one&lt;/option&gt;
        &lt;option value="one"&gt;two&lt;/option&gt;
        &lt;!--&lt;option value="three"&gt;three&lt;/option&gt;--&gt;
  
      &lt;/select&gt;
  
  
      Status:&lt;select id="categoryAlt"&gt;
          &lt;option value=""&gt;Nothing&lt;/option&gt;
        &lt;option value="active"&gt;Active&lt;/option&gt;
        &lt;option value="nonactive"&gt;Non-active&lt;/option&gt;
  
  
      &lt;/select&gt;
  
    &lt;/div&gt;
  </code></pre>
  
  <p></p>