助けが必要です: ユーザーが入力チェックボックスをクリックしたときにマーカーを表示するマップを作成する必要があります。
例: 「ホテル」をクリックすると、ホテルのみが表示されます。ホテルをクリックしなくなり、地図上のマーカーが消えます
コード：
<script type="text/javascript">
(function() {
window.onload = function(){
var latlng = new google.maps.LatLng(37.8530665, 15.287916300000006);
var options = {
zoom: 14,
center: latlng,
backgroundColor: '#fff',
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('map_canvas'), options);
var markers = new Array();
$(".chek").click(function() {
if($(this).is(':checked')) {
var id_checkbox = $(this).val();
$.post("ajax.php?page=mapHome",{ id_checkbox:id_checkbox }, function(data) {
for (i=0; i < data.marker.length; i++) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(data.marker[i].latitude, data.marker[i].longitude),
animation: google.maps.Animation.DROP,
map: map,
title: data.marker[i].nome,
icon: data.marker[i].marker
});
markers[i] = marker;
markers[i].id_cat = data.marker[i].id_cat;
}// for
},"json");//json
} else {
//hide markers on the map
for (i = 0; i < markers.length; i++) {
if(id_checkbox == markers[i].id_cat) {
markers[i].setMap(null);
}
}
}
});
}
})();
</script>
json を使用してクエリを実行し、結果を表示します。