谷歌地图多个下拉过滤器一起工作

Question

我想过滤谷歌地图上的两个或多个下拉菜单上的标记。问题是下拉式过滤器不会相互过滤。当我更改一个下拉列表的值并过滤出标记时，第二个过滤器不会过滤掉第一个过滤器显示的标记，但不会过滤掉所有标记。任何帮助，将不胜感激！

JS：

//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 < 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 < 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 < 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(); 

HTML：

<div class="container-fluid"> 
    <div class="row">  
     <div class="sidebar col-xs-3"> 
         <h2>Filter Shipwrecks</h2> 
         <div class="filter-options"> 
          <div class="filter-set" style="margin-top:0;"> 
           <button id="load-btn" class="load-btn button is-success">Reload data</button> 
          </div> 
          <div class="filter-set"> 
           <label for="ship-select">Ship Type:</label> 
           <select id="type" onchange="filterMarkers(this.value);"> 
           <option value="">Any</option> 
           <option value="Barge">Barge</option> 
           <option value="Freighter">Freighter</option> 
           <option value="Propeller">Propeller</option> 
           <option value="Schooner">Schooner</option> 
           <option value="Steamer">Steamer</option>  
          </select> 
          </div> 
          <div class="filter-set"> 
           <label for="ship-select">Type of Loss:</label> 
           <select id="type" onchange="filterMarkers2(this.value);"> 
           <option value="">Any</option> 
           <option value="Collision">Collision</option> 
           <option value="Fire">Fire</option> 
           <option value="Intentional">Intentional</option> 
           <option value="Storm">Storm</option>         
          </select> 
          </div>