jquery複数選択表示と非表示Googleマップマーカー

Question

Googleマップマーカーのフィルタ機能は最初は完全に機能していましたが、複数の選択ボックスが必要でしたが、出力が配列であるため。ここで

は実施例である：FIDDLE

これはfilterMarker機能である：

filterMarkers = function (category) { 
    var selectedValue = $(".select-multiple").val(); 
    console.log($(".select-multiple").val(), category); 

    for (i = 0; i < markers1.length; i++) { 
    marker = gmarkers1[i]; 
    // If is same category or category not picked 
    if (marker.category == selectedValue || category.length === 0) { 
    // console.log('mcat', marker.category, 'cat', category); 
      marker.setVisible(true); 
    } 
    // Categories don't match 
    else { 
     marker.setVisible(false); 
    } 
} 
} 

これにより、私はforEachループトラフ選択された値を行うには、このを試してみましたが、彼らはのカテゴリと一致するかどうかを確認よりマーカー：

var foo = []; 
$('.select-multiple :selected').each(function(i, selected){ 
    foo[i] = $(selected).val(); 
    var result = JSON.stringify(foo[i]); 

    console.log(result); 

    for (i = 0; i < markers1.length; i++) { 
    marker = gmarkers1[i]; 
    // If is same category or category not picked 
    if (marker.category == result || result.length === 0) { 
    // console.log('mcat', marker.category, 'cat', category); 
    marker.setVisible(true); 
    } 
    } 
}); 

私は私のfilterMarkersに間違っfunction何をやっているが、いくつかの可能性1つは私にこの1つを助けますか？

Answer 1

あなたは非常に近くでした。フィルタが選択されているかどうかを検出し、すべてのピンをクリアまたは表示してから、選択したピンをループに表示する必要があります。

filterMarkers = function(category) { 

    // New - clear all markers or show all. If needed the selected markers will be made visible in following step. 
    if ($('.select-multiple :selected').length > 0) { 
    for (i = 0; i < markers1.length; i++) { 
     gmarkers1[i].setVisible(false); 
    } 
    } 
    else { 
    for (i = 0; i < markers1.length; i++) { 
     gmarkers1[i].setVisible(true); 
    } 
    } 

    $('.select-multiple :selected').each(function(i, selected) { 

    for (i = 0; i < markers1.length; i++) { 
     marker = gmarkers1[i]; 
     // If is same category or category not picked 
     if (marker.category == $(selected).val()) { 
     // console.log('mcat', marker.category, 'cat', category); 
     marker.setVisible(true); 
     } 
    } 
    }); 

} 

注 - 動作するようにGoogleマップのリンクを取得できなかったため、ここで実行中のスニペットを取得できませんでした。しかし、OPのフィドルが機能し、同じ名前の彼の関数に上記の関数を貼り付けると、うまく動作します。私を信じてください。スニペットで頑張ったけど、遊ぶことができませんでした。