Googleマップのマーカーフィルタリング

Question

は、私は次のjsfiddleを持っている：

http://jsfiddle.net/inkedraskal/zeLon7cs/2/

すべてのポイントが表示されている、と自分自身でフィルタリングが正しく動作しているようだときのマップのロードあなたがわかります。 しかし、フィルタ（プロジェクトなど）をクリックするとプロジェクトのみが表示されますが、再度クリックするとマーカーはリセットされません。だけでなく、あなたがスタッフニュースをクリックし、言うならば、再びスタッフをクリックし、それから、それは文句を言わない（マーカーのみ再びニュースへの適用を示してまだ両方ニュースとスタッフに適用されるマーカーを示しの代わりに、ニュース）。

ヒントを頂ければ幸いです。

私はあなたが以下を参照してくださいよ、私のJS下部にクリック上のマーカー

<div class="filters"> 
    <ul> 
     <li> 
      <a href="#" data-filterby="type" data-filtervalue="project">Projects</a> 
     </li> 
     <li> 
      <a href="#" data-filterby="type" data-filtervalue="news">News</a> 
     </li> 
     <li> 
      <a href="#" data-filterby="type" data-filtervalue="stuff">stuff</a> 
     </li> 
    </ul> 
    <ul> 
     <li> 
      <a href="#" data-filterby="date" data-filtervalue="201401">Jan</a> 
     </li> 
     <li> 
      <a href="#" data-filterby="date" data-filtervalue="201402">Feb</a> 
     </li> 
     <li> 
      <a href="#" data-filterby="date" data-filtervalue="201403">Mar</a> 
     </li> 
    </ul> 
</div> 
<div class="clear"></div> 

リスト項目にフィルタを作成しています

で

$(document).on('click', '.filters a', function (event) { 
    event.preventDefault(); 
    var $target = $(event.target); 
    var type = $target.data('filterby'); 
    var value = $target.data('filtervalue'); 
    $(this).toggleClass('active'); 
    $.each(map.markers, function() { 
     if (this.filter[type] && this.filter[type].indexOf(value.toString()) >= 0) { 
      if (this.map == null) { 
        this.setMap(map); 
      } 
     } else { 
      this.setMap(null); 
     } 
    }); 
}); 

Answer 1

あなたのループを隠す/各マーカーを表示する、個々のマーカーの場合は、そのマーカーにクリックされたフィルター値があるかどうかだけを確認しています。すべてのアクティブなフィルターに対して各マーカーを確認する必要があります。

$(document).on('click', '.filters a', function(event) { 
    event.preventDefault(); 

    $(this).toggleClass('active'); 

    // create an array of active filters 
    var activeFilters = []; 
    $(".filters a.active").each(function() { 
    activeFilters.push({ 
     by: $(this).data("filterby"), 
     value: $(this).data("filtervalue").toString() 
    }); 
    }); 

    if (activeFilters.length === 0) { // if there are no active filters, show all markers 
    for (var i = 0; i < map.markers.length; i++) { 
     map.markers[i].setMap(map); 
    } 
    } else { 
    for (var i = 0; i < map.markers.length; i++) { // for each marker 
     var marker = map.markers[i]; // just to make the next code easier 

     var missingActiveFilter = false; 
     // check if marker has every active filter 
     for (var j = 0; j < activeFilters.length; j++) { 
     var filter = activeFilters[j]; 
     if (filter.by === "type" && marker.filter.type.indexOf(filter.value) === -1 || filter.by === "date" && marker.filter.date.indexOf(filter.value) === -1) { 
      missingActiveFilter = true; 
      break; 
     } 
     } 

     if (missingActiveFilter) { 
     marker.setMap(null); 
     } else { 
     marker.setMap(map); 
     } 

    } 
    } 
}); 

}）;

Updated JSFiddle