title: Google Maps multiple dropdown filters that work together
body: <p>I am trying to filter markers on google maps with two or more dropdown menus. The problem is the dropdown filters do not filter off of each other. When I change the value of one drop down and it filters out the markers, the second filter doesn't filter off of the markers shown from the first filter but all of the markers. any help would be appreciated! </p>
  
  <p>JS:</p>
  
  <pre><code>//global variables
  var gmarkers1 = [];
  var markers1 = [];
  var infowindow = new google.maps.InfoWindow({
      content: ''
  });
  
  //add the shipwreck data
  markers1 = [
    ["Name","Latitude","Longitude","Year","Type","Type_of_Loss"  ],
    ["Bermuda","46.46483333","-86.64683333","1870","Schooner","Storm"  ],
    ["George","46.516","-86.52083333","1893","Schooner","Storm"  ],
    ["Herman H. Hettler","46.48383333","-86.59966667","1926","Propeller","Storm"  ],
    ["Kiowa","46.64516667","-86.22016667","1929","Propeller","Storm"  ],
  
  ];
  
  
  //initiate the map
  function initMap() {
      // Our markers
  
  
      var center = new google.maps.LatLng(52.4357808, 4.991315699999973);
      var mapOptions = {
          zoom: 12,
          center: center,
          mapTypeId: google.maps.MapTypeId.TERRAIN
      };
  
  
  
      map = new google.maps.Map(document.getElementById('map'), mapOptions);
      for (i = 0; i &lt; markers1.length; i++) {
          addMarker(markers1[i]);
      }
  
  }
  
  
  //add markers to the map
  function addMarker(marker) {    
      var category_type = marker[4];
      var category_loss = marker[5];
      var category_year = marker[0];
      var title = marker[0];
      var pos = new google.maps.LatLng(marker[1], marker[2]);
      var content = marker[0];
  
      marker1 = new google.maps.Marker({
          title: title,
          position: pos,
          //setup the categories for the different mark types
          category_type: category_type,
          category_loss: category_loss,
          category_year: category_year,
          map: map
      });
  
      gmarkers1.push(marker1);
  
      // Marker click listener
      google.maps.event.addListener(marker1, 'click', (function (marker1, content) {
          return function () {
              console.log('Gmarker 1 gets pushed');
              infowindow.setContent(content);
              infowindow.open(map, marker1);
              map.panTo(this.getPosition());
              map.setZoom(15);
          }
      })(marker1, content));
  }
  
  
  //filter the markers by type of ship
  filterMarkers = function (category_type) {
      for (i = 0; i &lt; markers1.length; i++) {
          marker = gmarkers1[i];
          // If is same category or category not picked
          if (marker.category_type == category_type || category_type.length === 0) {
              marker.setVisible(true);
          }
          // Categories don't match 
          else {
              marker.setVisible(false);
          }
      }
  }
  
  //filter the markers by type of loss
  filterMarkers2 = function (category_loss) {
      for (i = 0; i &lt; markers1.length; i++) {
          marker = gmarkers1[i];
          // If is same category or category not picked
          if (marker.category_loss == category_loss || category_loss.length === 0) {
              marker.setVisible(true);
          }
          // Categories don't match 
          else {
              marker.setVisible(false);
          }
  
      }
  }
  
  // Init map
  initMap();
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
      &lt;div class="row"&gt;    
          &lt;div class="sidebar col-xs-3"&gt;
                          &lt;h2&gt;Filter Shipwrecks&lt;/h2&gt;
                          &lt;div class="filter-options"&gt;
                              &lt;div class="filter-set" style="margin-top:0;"&gt;
                                  &lt;button id="load-btn" class="load-btn button is-success"&gt;Reload data&lt;/button&gt;
                              &lt;/div&gt;
                              &lt;div class="filter-set"&gt;
                                  &lt;label for="ship-select"&gt;Ship Type:&lt;/label&gt;
                                  &lt;select id="type" onchange="filterMarkers(this.value);"&gt;
                                  &lt;option value=""&gt;Any&lt;/option&gt;
                                  &lt;option value="Barge"&gt;Barge&lt;/option&gt;
                                  &lt;option value="Freighter"&gt;Freighter&lt;/option&gt;
                                  &lt;option value="Propeller"&gt;Propeller&lt;/option&gt;
                                  &lt;option value="Schooner"&gt;Schooner&lt;/option&gt;
                                  &lt;option value="Steamer"&gt;Steamer&lt;/option&gt;    
                              &lt;/select&gt;
                              &lt;/div&gt;
                              &lt;div class="filter-set"&gt;
                                  &lt;label for="ship-select"&gt;Type of Loss:&lt;/label&gt;
                                  &lt;select id="type" onchange="filterMarkers2(this.value);"&gt;
                                  &lt;option value=""&gt;Any&lt;/option&gt;
                                  &lt;option value="Collision"&gt;Collision&lt;/option&gt;
                                  &lt;option value="Fire"&gt;Fire&lt;/option&gt;
                                  &lt;option value="Intentional"&gt;Intentional&lt;/option&gt;
                                  &lt;option value="Storm"&gt;Storm&lt;/option&gt;                                   
                              &lt;/select&gt;
                              &lt;/div&gt;
  </code></pre>