Jquery mobile - xml google map markers

Im trying to load markers to a google map from an xml file, I have managed to do this. However I would like to load only one marker each time which is related to the event clicked on. eg when the user clicks Glastonbury it should show only the marker in the Somerset location.

I have created a jsfiddle of my code, although i could not get the markers to load.Below you will see the loadMarkers function i am using.

function loadMarkers() {
    map.markers = map.markers || []
    downloadUrl(xmlUrl, function (data) {
        var xml = data.responseXML;
        markers = xml.documentElement.getElementsByTagName("marker");
        for (var i = 0; i < markers.length; i++) {
            var name = markers[i].getAttribute("name");
            var marker_image = markers[i].getAttribute('markerimage');
            
            var address = markers[i].getAttribute("address");
            var image = {
                url: marker_image, 
                origin: new google.maps.Point(0, 0)
            };
            var point = new google.maps.LatLng(
                                parseFloat(markers[i].getAttribute("lat")),
                                parseFloat(markers[i].getAttribute("lng")));
            var html = "<div class='infowindow'><b>" + name + "</b> <br/>" + address + '<br/></div>';
            var marker = new google.maps.Marker({
                map: map,
                position: point,
                icon: image,
                title: name
            });
            map.markers.push(marker);
            bindInfoWindow(marker, map, infoWindow, html);
        }
    });
}

jsfiddle - jquery mobile with google maps