ウェブサイトに埋め込まれたグーグルマップページに大量のマーカーを表示しようとしています。現在、マップとマーカーは機能していますが、コードに追加した4つのチェックボックスを使用してこれらのマーカーを並べ替えることもできます。
ただし、チェックボックスをオンにしても、チェックボックスは何もしません。私は数日間コードの問題を解明しようとしていますが、問題に指を置くことができません。
['Anchorage Air Route Traffic Control Center (ZAN)', 61.228391,-149.779551,1],
['Anchorage TRACON (A11)', 61.17736,-149.979644,2],
['Allentown Tower (ABE)', 40.658666,-75.440991,3],
['Anchorage ATCT (ANC)', 61.177515,-149.979644,4],
var markers = [];
var i, newMarker;
for (i = 0; i < facilities.length; i++)
{newMarker = new google.maps.Marker({
position: new google.maps.LatLng(facilities[i][1], facilities[i][2]),
map: map,
title: facilities[i][0],
clickable:true,
zindex: 10,
});
newMarker.category = facilities[i][3];
newMarker.setVisible(true);
markers.push(newMarker);
}
function displayMarkers(categ) {
var i, categ;
for (i = 0; i < markers.length; i++) {
if (markers[i].category === categ && markers[i].getVisible()== true)
{
markers[i].setVisible(false);
}
else if (markers[i].category === categ && markers[i].getVisible()== false)
{
markers[i].setVisible(true);
}
}
}
次に、ページの本文に次のように表示されます。id = "artccb" value = "ARTCC" onclick = "displayMarkers(1)">
ARTCC
<input type="checkbox" checked="checked"
id="traconb" value="TRACON" onclick="displayMarkers(2)">
<label>TRACON</label>
<input type="checkbox" checked="checked"
id="bothb" value="ATCT/TRACON" onclick="displayMarkers(3)">
<label>ATCT/TRACON</label>
<input type="checkbox" checked="checked"
id="atctb" value="ATCT" onclick="displayMarkers(4)">
<label>ATCT</label>
</div>
<body onload="initialize()">