さまざまなカテゴリにマーカーを配置し、チェックボックスを使用してマップに表示しようとしています。2年前に@Soniaがstackoverflowで見つけたアプローチに従いました。
私のサンプルjsは次のようなものです:
var map;
var marker;
var image = [];
image['must']='icons/star.png';
var markerMust = [];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(35.0086, 24.928),
zoom: 12,
mapTypeId: google.maps.MapTypeId.TERRAIN
};
map = new google.maps.Map(document.getElementById('map_canvas'),myOptions);
marker = new google.maps.Marker({
position: new google.maps.LatLng(34.957825, 25.041315),
map: map,
title: 'placename',
clickable: true,
category: 'must',
icon: 'icons/star.png'
});
markerMust.push(marker);
$('#mustB').click(function () {
boxclick(this, 'must');
});
} //map initialization ends here
var i;
function toggleMarkers(markerMust) {
for (i=0; i<markerMust.length i++) {
if (markerMust[i].category == category) {
markerMust[i].setVisible(true);
}
}
document.getElementById(category+"box").checked = true;
}
function boxclick(box, category){
if (box.checked){
toggleMarkers(markerMust);
}
}
*特定された問題:
- マップが起動しない
- カテゴリに対して正しいマーカー宣言です。その後、マーカーカテゴリが正しく呼び出されますか?
- コードへの追加が存在しないことを考えると、関数 toggleMarkers() 構文が正しいかどうかはわかりません
- これは 100 以上のマーカー マップのサンプルです。1 つのカテゴリのみが表示されています。残りのカテゴリについても同じアプローチが適用されています。
HTML:
<html>
<body onload="initialize()">
<div id="map_canvas" style="width:1200px; height:800px;"></div>
<form action="#">
Must Visit: <input type ="checkbox" id="mustB" onclick="boxclick(this,'must')">
</body>
</html>