Hey

I'm quite new at javascript and am currently in the process of creating a site that embeds google maps using an xml document.

What I'm trying to do is categories the markers on my map.

I am trying to make it so there are check boxes at the bottom and when i check the boxes, i.e. theatres, the markers will appear for the theatres and disappear when unchecked.

Using some example code i have modified, i have so far got the maps to pickup the markers from the xml with the check boxes at the bottom but the markers are all just on the page and the check boxes dont do anything and I am stuck as to of why.

heres my code:

<!DOCTYPE HTML>
<html>
<head>
<title>Google Maps</title>
<script src="http://maps.google.com/maps?file=api&amp;amp;v=2&amp;sensor=false&amp;key=ABQIAAAAPDUET0Qt7p2VcSk6JNU1sBSM5jMcmVqUpI7aqV44c W1cEECiThQYkcZUPRJn9vy_TWxWvuLoOfSFBw" type="text/javascript"></script>
</head>
<body style="margin:0px; padding:0px;" onload="initialize()">


<table border=1>
<tr>
<td>
<div id="map" style="width: 550px; height: 450px"></div>
</td>
<td valign="top" style="width:150px; text-decoration: underline; color: #4444ff;">
<div id="side_bar"></div>

</td>
</tr>
</table>
<form action="#">
Theatres: <input type="checkbox" id="theatrebox" onclick="boxclick(this,'theatre')" /> &nbsp;&nbsp;
Golf Courses: <input type="checkbox" id="golfbox" onclick="boxclick(this,'golf')" /> &nbsp;&nbsp;
Tourist Information: <input type="checkbox" id="infobox" onclick="boxclick(this,'info')" /><br />

</form>




<noscript><b>JavaScript must be enabled in order for you to use Google Maps.</b>
However, it seems JavaScript is either disabled or not supported by your browser.
To view Google Maps, enable JavaScript by changing your browser options, and then
try again.
</noscript>

<script type="text/javascript">
_uacct = "UA-162157-1";
urchinTracker();
</script>
</body>


<script type="text/javascript">


if (GBrowserIsCompatible()) {

var side_bar_html = "";


var gmarkers = [];
var map = null;


function createMarker(point,name,html,category) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});

marker.mycategory = category;
marker.myname = name;
gmarkers.push(marker);

side_bar_html += '<a href="javascript:myclick(' + (gmarkers.length-1) + ')">' + name + '<\/a><br>';
return marker;
}


function show(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(true);
}
}

document.getElementById(category+"box").checked = true;
}


function hide(category) {
for (var i=0; i<gmarkers.length; i++) {
if (gmarkers[i].mycategory == category) {
gmarkers[i].setVisible(false);
}
}

document.getElementById(category+"box").checked = false;

infowindow.close();
}

function boxclick(box,category) {
if (box.checked) {
show(category);
} else {
hide(category);
}

makeSidebar();
}

function myclick(i) {
google.maps.event.trigger(gmarkers[i],"click");
}


var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng( 53.8363,-3.03771), 11);


GDownloadUrl("categories.xml", function(doc) {
var xmlDoc = GXml.parse(doc);
var markers = xmlDoc.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers.length; i++) {
// obtain the attribues of each marker
var lat = parseFloat(markers[i].getAttribute("lat"));
var lng = parseFloat(markers[i].getAttribute("lng"));
var point = new google.maps.LatLng(lat,lng);
var address = markers[i].getAttribute("address");
var name = markers[i].getAttribute("name");
var html = "<b>"+name+"<\/b><p>"+address;
var category = markers[i].getAttribute("category");

var marker = createMarker(point,name,html,category);
map.addOverlay(marker);
}

document.getElementById("side_bar").innerHTML = side_bar_html;
// == show or hide the categories initially ==
show("theatre");
hide("golf");
hide("info");
});
}

else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}

</script>
</body>

</html>






If anybody help with this and tell me where I am going wrong, it would be much appreciated.
:chomp:

thanks

I can copy and paste the xml file if needed.