Fusion Table を使用して Google マップを作成しようとしています。チェックボックスでマップをフィルタリングしたい。しかし、それは正しく機能していません。これは私のコードです
<form>
<input type="checkbox" checked="checked" name="store" value="male" onclick="filterData()">Male
<input type="checkbox" checked="checked" name="store" value="female" onclick="filterData()">Female
</form>
<div id="map_canvas"></div>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
var map;
var layer_0;
function initialize() {
map = new google.maps.Map(document.getElementById('map_canvas'), {
center: new google.maps.LatLng(9.35300524537724, -82.31857926757817),
zoom: 7,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
layer_0 = new google.maps.FusionTablesLayer({
query: {
select: 'sex',
from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y"
},
map: map
});
}
function filterData() {
var filter = [];
var stores = document.getElementsByName('store');
for (var i = 0, store; store = stores[i]; i++) {
if (store.checked) {
filter.push('\'' + store.value + '\'');
}
}
if (filter.length) {
if (!layer.getMap()) {
layer.setMap(map);
}
layer.setOptions({
query: {
select: 'sex',
from: "1Cr2ObveEaSINhSVx1D9rZQN06o5aRxxcf8lFE6Y",
where: '\'sex\' IN (' + filter.join(',') + ')'
}
});
} else {
layer.setMap(null);
}
}
</script>
マップは表示されていますが、チェックボックスが機能していません。問題はどこだ?解決策を教えてください。