filterable jquery-ui-map google map

Question

Googleマップマーカーをフィルタリングする必要があります。今、私はjquery-ui-mapプラグインの助けを借りてマップを生成します。そうJS-コードの最後の部分は、私は多分それは良いではないか、ドキュメント、上の私はfoudnものです

if ($("#map_canvas").length){ 
    $('#map_canvas').gmap({'zoom':24,'scrollwheel':false,styles:[{stylers:[{lightness:7},{saturation:-100}]}],option:[{scrollwheel:false}]}).bind('init', function(ev, map) { 
     $("[data-gmapping]").each(function(i,el) { 
       var data = $(el).data('gmapping'); 
       $('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':data.tags, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) { 
        $(el).click(function() { 
         $(marker).triggerEvent('click'); 
        }); 
        }).click(function() { 
         $('#map_canvas').gmap('openInfoWindow', { 'content': $(el).find('.info-box').html() }, this); 
        }); 
       }); 
     }); 
    $('#map_canvas').gmap('find', 'markers', { 'tags': 'Salatfritz' }, function(marker, found) { 
      marker.setVisible(found); 
     }); 
} 

：これは私のマークアップです：

<div id="map_canvas" class="map" style="width:100%; height:600px"></div>  
<ul id="verkaufsstellen"> 
    <li data-gmapping='{"id":"2","latlng":{"lat":52.4885039,"lng":13.3530732},"tags":"Salatfritz"}'> 
    <div class="info-box"><div class="box-inner"><p><strong>ÄHRENSACHE</strong><br />Apostel-Paulus Str. 40 - 10823 Berlin</p><i>vertreibt: Salatfritz</i></div></div> 
    </li>      
    <li data-gmapping='{"id":"5","latlng":{"lat":52.524268,"lng":13.40629},"tags":"Bierbier"}'> 
    <div class="info-box"><div class="box-inner"><p><strong>Bier, Bier Test</strong><br />Ein wunderbarer Testeintrag</p><i>vertreibt: Bierbier</i></div></div> 
    </li>   
    </ul> 

と私のjsのthatsそれを理解するためにばかげている。

私の目的は「タグ」の後ろをフィルタリングすることです - この特別なタグを持つマーカだけが表示される、単純なリストが必要です。

多分、私はそれを完了するための良いアドバイスを持っていますか？

Answer 1

あなたは、文字列としてタグ（複数可）を渡すが、あなたはそれを動作させるために、配列にそれらを渡す必要があります。あなたがいずれかの方法でマーカーを見つけることができるはずです今

var tagArray = data.tags.split(","); 

$('#map_canvas').gmap('addMarker', {'id': data.id, 'tags':tagArray, 'position': new google.maps.LatLng(data.latlng.lat, data.latlng.lng), 'bounds':true }, function(map,marker) { 
/*DO STUFF*/ 
}); 

：その後、

<li data-gmapping='{"id":"2","latlng":{"lat":52.4885039,"lng":13.3530732},"tags":"Salatfritz,Bierbier"}'><!--MORE STUFF--></li> 

と：あなたは、あなたのような何かをしたいインスタンスで複数のタグをする必要がありますと仮定

$('#map_canvas').gmap('find', 'markers', { 'tags': 'Salatfritz' }, function(marker, found) { 
     marker.setVisible(found); 
    }); 

または

をやって

$('#map_canvas').gmap('find', 'markers', { 'tags': 'Bierbier' }, function(marker, found) { 
     marker.setVisible(found); 
    }); 

希望すること。

Answer 2

$('#map_canvas').gmap('find', 'markers', { 'property': 'tags', 'value': 'Salatfritz' }, function(marker, found) { 
      marker.setVisible(found); 
     }); 

jQuery UI Map Sample code