トグルマーカーを使用してマップを設定しようとしています。ユーザーがマップの下にある一連のチェックボックスをオン/オフにすると、チェックされているチェックボックスのいずれかが表示されるマーカーのカテゴリになります。したがって、4つのチェックボックスのうち3つがチェックされている場合は次のようになります。バー、学校、レストラン、これらは表示されるカテゴリ別のマーカーであり、誰かがその4番目のマーカーまたはそれらの任意の数のチェックを外すと、「ある意味で」見えなくなります。これは機能せず、全体を見渡して、何も見つかりませんでした。役立つ参照。私はjavascriptに不慣れで、PHPに精通しています。私はlocations[]配列を4列アウトで無限ダウンになるように設定しました。だから私が「場所の種類」を取得するためにその場所[i][4]...私はこれに何日もいました、そして私はこれ以上良くなることができません。iveは私が考えることができるすべての可能な組み合わせを試しました。私が言ったように。PHPスクリプターをimします。
<script type="text/javascript">
//PHP - Lat,Lng ARRAY
var locations = [
<?php
$x = 0; $i = 0; $j = 0; $y = 0; $z = 0; $a = 0; $b = 0; $c = 0;
for($aa = 0; $aa < $count; $aa++) {
$content = '<div class="coupon"><div class="ribbon"><div class="ribbon-stitches-top"></div><strong class="ribbon-content"><h1>'.$deal[$y].'</h1></strong><div class="ribbon-stitches-bottom"></div></div><div class="picture_coupon"><img src="'.$deal_photo[$b].'" width="150" height="100" /></div><div class="deal"><center><h1>'.$deal[$y].'</h1>'.$deal_info[$a].'<b>Expires: '.$deal_expiration[$c].'</b></center></div></div>';
echo "['" . $business_name[$x] . "'," . $lat[$i] . "," . $lng[$j] . "," . "'$content'" . ",".$type[$id]. "],";
$x++; $i++; $j++; $id++; $y++; $z++; $a++; $b++; $c++;
}
?>
['' , , ,'' , '']
];
//PHP - Lat,Lng ARRAY
var map;
function initialize() {
var myOptions = {
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
// Try HTML5 geolocation
if(navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
//逆コードPHPダイナミック
var infowindow = new google.maps.InfoWindow();
var marker, i;
//Marker Icon Generation.. Will be changed WHEN make new colors
var blue = '../images/map-icons/blue.png';
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map,
icon: blue // iconType[$num]
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
infowindow.setContent(locations[i][3]);
infowindow.open(map, marker);
}
})(marker, i));
}
//逆コードPHPダイナミック//ジオロケーションセットセンターとエラー処理
map.setCenter(pos);
}, function() {
handleNoGeolocation(true);
});
} else {
// Browser doesn't support Geolocation
handleNoGeolocation(false);
}
}
function handleNoGeolocation(errorFlag) {
if (errorFlag) {
var content = 'Error: The Geolocation service failed.';
} else {
var content = 'Error: Your browser doesn\'t support geolocation.';
}
//ジオロケーションセットセンターとエラー処理
}
google.maps.event.addDomListener(window, 'load', initialize);
//=================ATTEMPTATトグルマーカーチェックボックス
// ==特定のカテゴリのすべてのマーカーを表示し、チェックボックスがオンになっていることを確認します==
function show(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i].mycategory == category) {
locations[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(category+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<locations.length; i++) {
if (locations[i].mycategory == category) {
locations[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(category+"box").checked = false;
// == close the info window, in case its open on a marker that we just hid
infowindow.close();
}
// == a checkbox has been clicked ==
function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}
// == rebuild the side bar
makeSidebar();
}
/*HTML*/<input type ="checkbox" name="resturauntbox" onclick="boxclick(this,'resturaunt')"><label></label>
<input type ="checkbox" name="barbox" onclick="boxclick(this,'bar')"><label></label>
//============================================チェックボックス//HTML