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
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To view this discussion on the web visit
https://groups.google.com/d/msg/google-maps-js-api-v3/-/NXm2rfH6tUwJ.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
