Googleマップ複数のドロップダウンフィルタが一緒に動作する

Question

複数のドロップダウンメニューを使用してGoogleマップでマーカーをフィルタリングしようとしています。問題は、ドロップダウンフィルタが互いにフィルタリングされないことです。 1つのドロップダウンの値を変更してマーカをフィルタリングすると、2番目のフィルタは最初のフィルタから表示されたマーカをフィルタリングしませんが、すべてのマーカはフィルタしません。どんな助けもありがとう！

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>