Marker Clusterer Problem

[pogue5]

Hello,

I am a novice programmer attempting to set up a map which allows a user to click on a particular cluster causing the display of an info window with information about the cluster elements(markers). My code allows individual, single element markers to be clicked on leading to an info window but not clusters. The information relating to a particular marker or cluster is stored in an xml file which includes groups of information. One group might include 4 data elements for example with a this type of format <group> <row> </row> <row> </row> <row> </row> <row> </row> </group> with data in each row and an identifying longitude and latitude per group. My idea is to set up a clusterclick event which responds to the clicking of a mouse on a cluster and displaying an info window. The problem is that I don't know how to associate the data taken from the xml file with a particular cluster. If i used this code for example after declaring the markercluster variable I would need the appropriate string to display in the info window.
//google.maps.event.addListener(markerCluster, 'clusterclick',
//function(cluster) {
//display info window with data related to particular cluster
})

Here is my main code to give you an idea of what I have done so far:

var markers = [];
var map;

/*
 * Main load function:
*/
load();

function load() {
 
var myOptions = {
center: new google.maps.LatLng(45.89000815866184, -63.017578125),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP};
map = new google.maps.Map(document.getElementById("map"),
myOptions);
var opt = { minZoom: 5, maxZoom: 8 };
map.setOptions(opt);
loadMap();
}



function loadMap() {
downloadUrl("http://www******/sample.xml", function(data) {         
var xml = xmlParse(data);
var xmlMarkers = xml.documentElement.getElementsByTagName("Group");
var eventData = {};
var PositionData = {};
var GroupDetails = "";

for (var i = 0; i < xmlMarkers.length; i++) {
// Initialize data array
PositionData = { "latitude" : "" , "longitude" : "" };
var xmlSubMarkers = xmlMarkers[i].getElementsByTagName("Row");

for (var l = 0; l < xmlSubMarkers.length; l++) {
eventData = {   "Proponent" : "",
                            "City" : "",
                            "Province" : "",
                            "Homepage" : "",
                            "Logo" : "",
                            "Latitude" : "",
                            "Longitude" : "",   
                            "Project" : "",
                            "Funding" : "",
                            "Total project value" : "",
                            "Desc" : "",
                            "Alt" : ""
                        };
            // Make sure XML node exists before placing data in to array element           
            try {eventData["Proponent"] = xmlMarkers[i].getElementsByTagName("PROPONENT")[l].firstChild.data;} catch(err) {}
            try {eventData["City"] = xmlMarkers[i].getElementsByTagName("CITY")[l].firstChild.data;} catch(err) {}
            try {eventData["Province"] = xmlMarkers[i].getElementsByTagName("PROV_CODE")[l].firstChild.data;} catch(err) {}
            try {eventData["Homepage"] = xmlMarkers[i].getElementsByTagName("HOMEPAGE")[l].firstChild.data;} catch(err) {}
            try {eventData["Logo"] = xmlMarkers[i].getElementsByTagName("LOGO")[l].firstChild.data;} catch(err) {}
            try {eventData["Latitude"] = xmlMarkers[i].getElementsByTagName("LATITUDE")[l].firstChild.data;} catch(err) {}
            try {eventData["Longitude"] = xmlMarkers[i].getElementsByTagName("LONGITUDE")[l].firstChild.data;} catch(err) {}   
            try {eventData["Project"] = xmlMarkers[i].getElementsByTagName("PROJECT")[l].firstChild.data;} catch(err) {}
            try {eventData["funding"] = xmlMarkers[i].getElementsByTagName("FUNDING")[l].firstChild.data;} catch(err) {}
            try {eventData["five"] = xmlMarkers[i].getElementsByTagName("FIVE")[l].firstChild.data;} catch(err) {}
            try {eventData["Total project value"] = xmlMarkers[i].getElementsByTagName("TOTALVALUE")[l].firstChild.data;} catch(err) {}
            try {eventData["Alt"] = xmlMarkers[i].getElementsByTagName("ALT")[l].firstChild.data;} catch(err) {}
            try {eventData["Desc"] = xmlMarkers[i].getElementsByTagName("DESC")[l].firstChild.data;} catch(err) {}           

         if (eventData["logo"] != "")
         {
                 var eventDetails = //"<div>"+
                "</br>"+
                "<h5> " + eventData["Project"] + "</h5>" +
                "<img src=\"" + eventData["Logo"] + "\" alt=\"" + eventData["Alt"] + "\"/></br>" +
                "<h5>" + eventData["Proponent"] + "</h5>" +
                "<b>Location:</b> " + " " + eventData["City"] + ", " + eventData["Province"] + "<br/>" +
                "<b>Funding:</b> " + eventData["Funding"] + "<br/>" +
                "<b>Total project value:</b> " + eventData["Total project value"] + "<br/>" +
                "<b>Description:</b> " + eventData["Desc"] + "<br/>";
                }
           
         else
         {
                var eventDetails = //"<div>"+
                "<h5> " + eventData["Project"] + "</h5>" +
                "<b><h5>" + eventData["Proponent"] + "</h5></b>" +
                "<b>Location:</b> " + " " + eventData["City"] + ", " + eventData["Province"] + "<br/>" +
                "<b Funding:</b> " + eventData["Funding"] + "<br/>" +
                "<b>Total project value:</b> " + eventData["Total project value"] + "<br/>" +
                "<b>Description:</b> " + eventData["Desc"] + "<br/>";
         }
         eventDetails = eventDetails +
            "<a href=\"" + eventData["Homepage"] + "\"><strong>[More Details]</strong></a>";
            if (xmlSubMarkers.length > 1) {eventDetails = eventDetails +"</br></br>" + "<hr style='height:2px;border-width:0;color:gray;background-color:gray' />"};                       
         
GroupDetails = GroupDetails+eventDetails;
  
  }//nested for loop
         
 try {PositionData["latitude"] = xmlMarkers[i].getElementsByTagName("LATITUDE")[0].firstChild.data;} catch(err) {}
 try {PositionData["longitude"] = xmlMarkers[i].getElementsByTagName("LONGITUDE")[0].firstChild.data;} catch(err) {}
   
for (var l = 0; l < xmlSubMarkers.length; l++) {
    // For each event found, show the marker on the map
      if (PositionData["latitude"] != "" && PositionData["longitude"] != "") {
 
      showMarker(PositionData,GroupDetails);

//showMarker method is futher down the page   

      }//another nested for loop
    }
    GroupDetails = "";   
  }//initial for loop
  var styles = [[{
        url: 'http://www.acoa-apeca.gc.ca/Config/blue-trans.png',
        height: 25,
        width: 25,
        //opt_anchor: [12, 0],
        opt_textColor: '#000000'
      }]];
var markerCluster = new MarkerClusterer(map, markers,{gridSize: 20, maxZoom:8,  styles: styles[0]});

//This is where I want to add the clusterclick event but I don't have the GroupDetails String and I'm not sure how to know what String is associated with a Cluster. In this code what is the cluster variable? Is it an
//arrray of markers and if so how do I know which is which?
//google.maps.event.addListener(markerCluster, 'clusterclick',
//function(cluster) {
//display info window with data related to particular cluster
})
     
 });
}

   
function showMarker(PositionData,GroupDetails) {
// Create point
var point = new google.maps.LatLng(PositionData["latitude"], PositionData["longitude"]);
var displaystring = '<div style="width: 420px; height: 370px; overflow:auto;">'+ GroupDetails + '</div>';
       
var infowindow = new google.maps.InfoWindow({
content: displaystring});

var Marker = new google.maps.Marker({
position: point,
map: map,
icon: image});
   
markers.push(Marker);
   
google.maps.event.addListener(Marker, 'click', function() {
var maxContentDiv = document.createElement('div');
maxContentDiv.innerHTML = 'Loading...';
infowindow.open(map,Marker);
});   
};

I hope this code made some sense. Any input you could give would be helpful.
Thank you for your time,

G