How do a add a side-bar with links to markers?

[tako]

We are using the javascript below to show a google map on our website. For an example: http://www.weert.nl/parkeren.htmlThe markers are based on a xml-file. We would like to add a side-bar with hyperlinks to the markers in the map. But i can't get it done. Any suggestions? Please help!Thanks in advance, ArjanUSED SCRIPT:\[code\]var map;var currentMarker = "";var infowindow;var markers = [];function LoadGoogleMap() { var mapEl = document.getElementById("map_canvas") if (mapEl != undefined) { map = new google.maps.Map(mapEl, { center: new google.maps.LatLng(0, 0), zoom: 1, mapTypeId: google.maps.MapTypeId.ROADMAP }); var bounds = new google.maps.LatLngBounds(); downloadUrl("{request.query(xmlitem)}", function (data) { var xml = parseXml(data); var xmlMarkers = xml.documentElement.getElementsByTagName("marker"); for (var i = 0; i < xmlMarkers.length; i++) { var point = new google.maps.LatLng(parseFloat(xmlMarkers.getAttribute("lat")), parseFloat(xmlMarkers.getAttribute("lng"))); var icon; if (xmlMarkers.getAttribute("icon") != "") { icon = xmlMarkers.getAttribute("icon"); } var selectedIcon = icon; if (xmlMarkers.getAttribute("selectedicon") != "") { selectedIcon = xmlMarkers.getAttribute("selectedicon"); } var shadow; if (xmlMarkers.getAttribute("shadow") != "") { shadow = xmlMarkers.getAttribute("shadow"); } var html = ""; if (xmlMarkers.childNodes.length > 0) { for (j = 0; j < xmlMarkers.childNodes.length; j++) { var MarkerHTMLNode = xmlMarkers.childNodes[j]; html += MarkerHTMLNode.xml ? MarkerHTMLNode.xml : (new XMLSerializer()).serializeToString(MarkerHTMLNode); } } var marker = new google.maps.Marker({ map: map, //verplicht position: point, //verplicht icon: 'http://www.weert.nl/Afbeeldingen/Vormgeving/Marker1.png', initialIcon: 'http://www.weert.nl/Afbeeldingen/Vormgeving/Marker1.png', selectedIcon: 'http://www.weert.nl/Afbeeldingen/Vormgeving/Marker1.png', shadow: shadow, html: html, // uit te breiden met eigen velden category: xmlMarkers.getAttribute("category"), city: xmlMarkers.getAttribute("city"), fase: xmlMarkers.getAttribute("fase") }); AddToMarker(marker); markers.push(marker); if (xmlMarkers.length == 1) { map.setCenter(point); map.setZoom(17); } else { bounds.extend(point); map.fitBounds(bounds); } } setTimeout("SetZoom();", 50); }); }}function SetZoom() { var zoom = map.getZoom(); if (zoom > 17) { zoom = 17; } map.setZoom(zoom);}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.responseText, request.status); } }; request.open('GET', url, true); request.send(null);}function parseXml(str) { if (window.ActiveXObject) { var doc = new ActiveXObject('Microsoft.XMLDOM'); doc.loadXML(str); return doc; } else if (window.DOMParser) { return (new DOMParser).parseFromString(str, 'text/xml'); }}function doNothing() {}function ResetMarker() { if (currentMarker != "") { currentMarker.setIcon(currentMarker.initialIcon); } currentMarker = "";}function AddToMarker(marker) { google.maps.event.addListener(marker, 'click', function () { ResetMarker(); marker.setIcon(marker.selectedIcon); if (infowindow != undefined) { infowindow.close(); } infowindow = new google.maps.InfoWindow({ content: marker.html }); infowindow.open(map, marker); });}var $j = jQuery.noConflict();$j(document).ready(function () { LoadGoogleMap();});\[/code\]