問題の解決策を示すために、jQueryを使用します。また、すべてのマーカーを一度読んで描画します。フィルタを適用すると（チェックボックスをオフにすると）、マーカーの表示が変更されます。
まず、マーカーポイントと次のようなプロパティを使用して配列を作成します。
var markers = [];
markers[0] = {long:-25.363882,lat:131.044922,'type':'moutains',stars:1};
マップ上にマーカーを描画するときに、この配列を繰り返します。これを行うときは、マーカーへの参照と最初の配列と同じインデックスを持つ2番目の配列を作成します。
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
フィルタが変更されたら、最初の配列をもう一度繰り返します。フィルタを確認し、2番目の配列を使用してマーカーの表示を変更します。
フィルタごとに、次のようなものを使用できます：
$("input[name=stars]:checkbox").bind( "change", function() {
var typevalue = $(this).val();
var typechecked = $(this).is(':checked')
$.each(markers, function(index, m)
{
if(m.stars===parseInt(typevalue))
{
if(typechecked)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
}
});
});
ここでの問題は、他のフィルターがオン（チェックされていない）のときにマーカーを表示したくないことです。この変更を解決するには、if(typechecked) to if(typechecked && $("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')) 。たくさんのフィルターを持っていると、これは複雑になります。したがって、このコードを次のようにリファクタリングします。
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
$("input:checkbox[name='type'][value='"+m.type+"']").is(':checked')
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
これも修正されるかどうかは100％わかりません。「私の場合、劇場は単なる別のフィルターであり、ゴルフコースと重なる可能性があります」。この例では、1つのマーカーが山と砂漠である可能性があります。もしそうなら、あなたは次のようなあなたのポピュラーの配列を作ることができます：
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
この場合のチェックを次のように変更します：
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
例：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Markers example</title>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas {
width: 500px;
height: 300px;
}
</style>
</head>
<body>
<div id="map-canvas"></div>
<div style="float:left;">Type:<br />
<input type="checkbox" name="type" value="mountains" checked="checked"/>Mountains<br />
<input type="checkbox" name="type" value="desert" checked="checked"/>Desert<br />
</div>
<div style="float:left;">Stars:<br />
<input type="checkbox" name="stars" value="1" checked="checked"/>1<br />
<input type="checkbox" name="stars" value="2" checked="checked"/>2<br />
<input type="checkbox" name="stars" value="3" checked="checked"/>3<br />
</div>
<br />
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
var markersmap = [];
var markers = [];
function initialize() {
markers[0] = {long:-25.363882,lat:131.044922,'type':['mountains','desert'],stars:1};
markers[1] = {long:-26.363882,lat:132.044922,'type':['mountains'],stars:1};
markers[2] = {long:-27.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[3] = {long:-28.363882,lat:133.044922,'type':['mountains'],stars:2};
markers[4] = {long:-25.363882,lat:130.044922,'type':['desert'],stars:1};
markers[5] = {long:-26.363882,lat:130.044922,'type':['desert'],stars:2};
markers[6] = {long:-27.363882,lat:130.044922,'type':['desert'],stars:3};
markers[7] = {long:-28.363882,lat:130.044922,'type':['desert'],stars:3};
var mapOptions = {
zoom: 4,
center: new google.maps.LatLng(-25.363882,131.044922),
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
$.each(markers, function(index, m) {
markersmap[index] = new google.maps.Marker({
position: new google.maps.LatLng(m.long,m.lat),
map: map
});
});
}
google.maps.event.addDomListener(window, 'load', initialize);
$("input:checkbox").bind( "change", function()
{
$.each(markers, function(index, m)
{
if(
$("input:checkbox[name='stars'][value='"+m.stars+"']").is(':checked') &&
(
($.inArray('mountains',m.type)>-1 && $("input:checkbox[name='type'][value='mountains']").is(':checked')) ||
($.inArray('desert',m.type)>-1 && $("input:checkbox[name='type'][value='desert']").is(':checked'))
)
)
{
markersmap[index].setVisible(true);
}
else
{
markersmap[index].setVisible(false);
}
})
});
</script>
</body>
</html>