Google Maps API v3 - チェックボックス（マーカーごとに複数のタグ）を使用してマーカーをフィルタリングする

Question

Googleマップ（v3 API）用のフィルタをいくつか作成しましたが、これは以下のコードで動作しますが、いくつかのマーカーには複数の「タグ」が割り当てられています（1つではありません）。チェックボックスの1つがオフになっていて、そのマーカーの1つがマーカーにある場合、タグがすべてオフになっていない限り、

マーカーのフィルタタイプの例は、いずれも以下の

filter: {type: "1036|1102"} 

または

filter: {type: "1033"} 

可能性のフィルタが見えるとJS方法の例です。

<div class="filters"> 
    <ul class="tags"> 
     <li><label><input type="checkbox" value="1036" checked="checked" />Film</label></li> 
     <li><label><input type="checkbox" value="1102" checked="checked" />Heritage</label></li> 
     <li><label><input type="checkbox" value="1038" checked="checked" />Music</label></li> 
     <li><label><input type="checkbox" value="1075" checked="checked" />Shops</label></li> 
    </ul> 
</div> 

var $filters = $('.map__container .filters ul.tags li input[type=checkbox]').on('change', function() { 

    var $this = $(this), 
     tag = $this.data('tag'), 
     bounds = new google.maps.LatLngBounds(), 
     values = []; 

    $filters.each(function(i, elem) { 
     var value; 
     value = elem.checked && elem.value; 
     if (value) { 
      values.push(value); 
     } 
    }); 

    var filterValue = values.join('|'); 

    //console.log(filterValue); 

    $.each(map.markers, function (i, marker) { 
     if (marker.filter.type.indexOf(filterValue) > -1) { 
      marker.setVisible(true); 
      //console.log('true:' + marker.filter.type); 
     } else { 
      marker.setVisible(false); 
      //console.log('false:' + marker.filter.type); 
     } 
    }); 

}); 

Answer 1

var $filters = $('.map__container .filters ul.tags li input[type=checkbox]').on('change', function() { 

     var $this = $(this), 
      bounds = new google.maps.LatLngBounds(), 
      values = []; 

     $filters.each(function(i, elem) { 
      var value; 
      value = elem.checked && elem.value; 
      if (value) { 
       values.push(value); 
      } 
     }); 

     var filterValue = values; 

     console.log(filterValue); 

     $.each(map.markers, function (i, marker) { 

      var tags = marker.filter.type.split("|"); 

      $.each(tags, function(i, tag) { 

       if (filterValue.includes(tag)) { 
        marker.setVisible(true); 
        console.log('true:' + tag); 
        return false; 
       } else { 
        marker.setVisible(false); 
        console.log('false:' + tag); 
       } 

      }); 


     }); 

    });