Toggle Map Markers
I wonder whether someone may be able to help me please.
I'm trying to put some code together where I can load markers from a mySQL database onto my map with the markers falling into one of four categories.
What I would like to do, if possible, is to toggle which markers are shown or hidden by way of check boxes which I've set up on my form.
I can get the code to work which pulls the marker data and plots them on my map but I'm struggling to get the section that allows the markers to be shown or hidden to work. I've used this as a starting point, but I've obviously not understood the example correctly.
I just wondered whether someone could possibly take a look at this please and let me know where I'm going wrong.
Many thanks and kind regards
Chris
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - Public Finds</title>
<link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
"Artefact": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Coin": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Jewellery": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Precious Metal": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("PHPFILE.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var findcategory = markers[i].getAttribute("findcategory");
var findname = markers[i].getAttribute("findname");
var finddescription = markers[i].getAttribute("finddescription");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("findosgb36lat")),
parseFloat(markers[i].getAttribute("findosgb36lon")));
var html = "<b>" + 'Find : ' + "</b>" + findname + "<p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
var icon = customIcons[findcategory] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bounds.extend(point);
map.fitBounds(bounds);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(category) {
for (var i=0; i<markers.length; i++) {
if (markers[i].mycategory == findcategory) {
markers[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<markers.length; i++) {
if (markers[i].mycategory == findcategory) {
markers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(findcategory+"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, findcategory) {
if (box.checked) {
show(findcategory);
} else {
hide(findcategory);
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
</script>
</head>
<body onLoad="load()">
<p> </p>
<form id="Public Finds" method="post" action="">
<p align="left">
<input name="artefact" type="checkbox" id="artefact" value="checkbox" />
Artefact </p>
<p align="left">
<input name="coin" type="checkbox" id="coin" value="checkbox" />
Coin</p>
<p align="left">
<input name="jewellery" type="checkbox" id="jewellery" value="checkbox" />
Jewellery</p>
<p align="left">
<input name="preciousmetal" type="checkbox" id="preciousmetal" value="checkbox" />
Precious Metal</p>
</form>
<p> </p>
<div id="map"></div>
</body>
</html>
UPDATED CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Map My Finds - Public Finds</title>
<link rel="stylesheet" href="css/publicfinds.css" type="text/css" media="all" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>
<script type="text/javascript">
var customIcons = {
"Artefact": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_red.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Coin": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Jewellery": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_yellow.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
},
"Precious Metal": {
icon: 'http://labs.google.com/ridefinder/images/mm_20_blue.png',
shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
}
};
var gmarkers = [];
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(54.312195845815246,-4.45948481875007),
zoom:6,
mapTypeId: 'terrain'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("PHPFILE.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
var findcategory = markers[i].getAttribute("findcategory");
var findname = markers[i].getAttribute("findname");
var finddescription = markers[i].getAttribute("finddescription");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("findosgb36lat")),
parseFloat(markers[i].getAttribute("findosgb36lon")));
var html = "<b>" + 'Find : ' + "</b>" + findname + "&开发者_JAVA百科lt;p>" + "<b>" + 'Description: ' + "</b>" + finddescription + "</p>"
var icon = customIcons[findcategory] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
marker.mycategory = findcategory;
bounds.extend(point);
map.fitBounds(bounds);
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
// == shows all markers of a particular category, and ensures the checkbox is checked ==
function show(findcategory) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(true);
}
}
// == check the checkbox ==
document.getElementById(findcategory+"box").checked = true;
}
// == hides all markers of a particular category, and ensures the checkbox is cleared ==
function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == findcategory) {
gmarkers[i].setVisible(false);
}
}
// == clear the checkbox ==
document.getElementById(findcategory+"box").checked = false;
}
// == a checkbox has been clicked ==
function boxclick(box,findcategory) {
if (box.checked) {
show(findcategory);
} else {
hide(findcategory);
}
function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}
// == show or hide the categories initially ==
hide("artefact");
hide("coin");
hide("jewellery");
hide("precious_metal");
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
}
</script>
</head>
<body onLoad="load()">
<p> </p>
<form action="#">
Artefact: <input type="checkbox" id="artefactbox" onclick="boxclick(this,'artefact')" />
Coin: <input type="checkbox" id="coinbox" onclick="boxclick(this,'coin')" />
Jewellery: <input type="checkbox" id="jewellerybox" onclick="boxclick(this,'jewellery')" />
Precious Metal: <input type="checkbox" id="preciousmetalbox" onclick="boxclick(this,'preciousmetal')" /><br />
</form>
<p> </p>
<div id="map"></div>
</body>
</html>
Looks like you need to have something that actually calls your boxclick function.
加载中,请稍侯......
精彩评论