showing marker info on clusterclick

[Dan]

Howdy all, I'm pretty new at the v3 api, and javascript in general,
and have been going batty trying to figure out how to display an info
window on clusterclick to show information from the markers it
contains. Ive been digging through the threads and managed to get an
alert to populate with the array (?) length/etc, but am having real
trouble moving forward with displaying any information from within
that array, I keep getting [object Object]. any help would be
appreciated.. test site link is here: http://smartersummerssite.org/map/index.php

Thank you to anyone and everyone who can help with this surely
beginner problem...

map javascript.js is:

window.onload=initialize;
var clickedMarkers = [];
var markers = [];

function initialize() {
var center = new google.maps.LatLng(37.7185, -97.3828);
var myOptions = {
zoom: 4,
center: center,
mapTypeId: 'roadmap',
mapTypeControl: false,
scrollwheel: true,
panControl: false,
streetViewControl: false,
zoomControl: true,
zoomControlOptions: {position:
google.maps.ControlPosition.LEFT_TOP}
};

var map = new google.maps.Map(document.getElementById("map"),
myOptions);

downloadUrl("phpsqlajax_genxml3.php", function(data) {


var infoBubble = new InfoBubble({
minWidth: 310, maxWidth: 310, minHeight: 150, maxHeight:
150,
});


var markers2 =
data.documentElement.getElementsByTagName("marker");

for (var i = 0; i < markers2.length; i++) {
var id = markers2[i].getAttribute("id");
var OrganizationName =
markers2[i].getAttribute("OrganizationName");
var OrganizationStreet =
markers2[i].getAttribute("OrganizationStreet");
var OrganizationCity =
markers2[i].getAttribute("OrganizationCity");
var OrganizationState =
markers2[i].getAttribute("OrganizationState");
var OrganizationPostalCode =
markers2[i].getAttribute("OrganizationPostalCode");
var ContactName = markers2[i].getAttribute("ContactName");
var ContactPhone = markers2[i].getAttribute("ContactPhone");
var ContactEmail = markers2[i].getAttribute("ContactEmail");
var Twitter = markers2[i].getAttribute("Twitter");
var Facebook = markers2[i].getAttribute("Facebook");
var Website = markers2[i].getAttribute("Website");
var EventName = markers2[i].getAttribute("EventName");
var EventLocationName =
markers2[i].getAttribute("EventLocationName");
var txtStreet = markers2[i].getAttribute("txtStreet");
var txtCity = markers2[i].getAttribute("txtCity");
var txtState = markers2[i].getAttribute("txtState");
var txtPostalCode = markers2[i].getAttribute("txtPostalCode");
var EventDate = markers2[i].getAttribute("EventDate");
var StartTime = markers2[i].getAttribute("StartTime");
var EndTime = markers2[i].getAttribute("EndTime");
var GradesServed = markers2[i].getAttribute("GradesServed");
var ExpectedAttendance =
markers2[i].getAttribute("ExpectedAttendance");
var HowYouCanHelp = markers2[i].getAttribute("HowYouCanHelp");
var EventDescription =
markers2[i].getAttribute("EventDescription");
var latLng = new google.maps.LatLng(
parseFloat(markers2[i].getAttribute("lat")),
parseFloat(markers2[i].getAttribute("lng")));


var html = "<h2><a href=detail.php?id=" + id + "&referer=map>" +
EventName + "</a></h2><p>" + EventLocationName + "<br /> " + txtStreet
+ "<br /> " + txtCity + ", " + txtState + " " + txtPostalCode + "</
p><p><strong>Event Date:</strong> " + EventDate + "<br /><strong>Start
Time:</strong> " + StartTime + "<br /><strong>End Time:</strong> " +
EndTime + "<br /><strong>Grades Served:</strong> " + GradesServed + "</
p><p>" + EventDescription + "</p><a href=detail.php?id=" + id +
"&referer=map>View More Details</a>";


var marker = new google.maps.Marker({
map: map,
position: latLng,
title: EventName
});
markers.push(marker), bindInfoBubble(marker, map, infoBubble,
html);
}

// Adding the InfoWindow
function bindInfoBubble(marker, map, infoBubble, html) {
google.maps.event.addListener(marker, 'click', function() {
infoBubble.setContent(html);
infoBubble.open(map, marker);
});
}



// Define the marker clusterer
var clusterOptions = {
zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers,
clusterOptions);

// Listen for a cluster to be clicked
google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {
var center = cluster.getCenter();
var size = cluster.getSize();
var clickedMarkers = cluster.getMarkers();

alert (size + center + clickedMarkers);


});
}

)
}

[Andrew Leach]

On 26 April 2011 19:42, Dan <drog...@gmail.com> wrote:
> Howdy all, I'm pretty new at the v3 api, and javascript in general,
> and have been going batty trying to figure out how to display an info
> window on clusterclick to show information from the markers it
> contains. Ive been digging through the threads and managed to get an
> alert to populate with the array (?) length/etc, but am having real
> trouble moving forward with displaying any information from within
> that array, I keep getting [object Object]. any help would be
> appreciated.. test site link is here: http://smartersummerssite.org/map/index.php

This line

  alert (size + center + clickedMarkers);

outputs size (3), center (coordinates) and clickedMarkers, which is an
array of Marker objects. When you output an array like that,
Javascript does its best to enumerate the array, so you get three
Objects.

However, each marker within that array is accessible: eg.
clickedMarkers[0].title is "test". So you need to do something with
the array of markers. You could construct and display an infoBubble
with the titles, for example.

There may be a problem here:
markers.push(marker), bindInfoBubble(marker, map, infoBubble,html);
Did you mean to put a comma between two statements? Should that be a
semicolon? In this instance it may not make much difference, but when
a comma is used as an operator like this it has a particular meaning.

[Mike Ryan]

Subscribing.

[Filmo]

Also subscribing to this thread

On Apr 27, 7:04 am, Mike Ryan <m...@mry4n.net> wrote:
> Subscribing.

[Dan]

Andrew, thanks for the help! I set the infoBubble to show up on click, and got it working, but am having difficulty displaying info (an id) from the array, I can only manage to get it to display the first item from the cluster array.. I've been working most of the day trying different things to get the id for each item in the cluster array to show up with a <br /> tag after it, but no joy yet. Any help would be appreciated! working example here: http://www.smartersummerssite.org/map/index.php sample code below:

google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {
var center = cluster.getCenter();
var size = cluster.getSize();

var clickedMarkers = cluster.getMarkers();
  

for (var i = 0; i < clickedMarkers.length; i++) {  
var clusterid = clickedMarkers[i].id;
}

infoBubble.setContent(clusterid + "<br />");
infoBubble.setPosition(center);
infoBubble.open(map);
 
    });
}

[Chris Broadfoot]

You're only showing the id of the final marker in the "clickedMarkers" array.

Instead, you probably want to buffer up all the ids in an array and then separate them with <br>s. Something like this:

google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {

  var center = cluster.getCenter();

  var size = cluster.getSize();

  var content = [];

  var clickedMarkers = cluster.getMarkers();

  for (var i = 0; i < clickedMarkers.length; i++) {

    content.push(clickedMarkers[i].id);

  }

  infoBubble.setContent(content.join('<br>'));

  infoBubble.setPosition(center);

  infoBubble.open(map); 

});

--
http://twitter.com/broady

[Dan]

Got it working! thanks everyone for all the help! rough-final snippet
is below if it will help anyone in the future.. displays list of
markers in cluster by id and title upon cluster click...

// Define the marker clusterer
var clusterOptions = {
zoomOnClick: false }
var markerCluster = new MarkerClusterer(map, markers,
clusterOptions);

// Listen for a cluster to be clicked

google.maps.event.addListener(markerCluster, 'clusterclick',
function(cluster) {
var center = cluster.getCenter();
var size = cluster.getSize();

var id = [];
var title = [];

var content = [];


var clickedMarkers = cluster.getMarkers();

for (var i = 0; i < clickedMarkers.length; i++) {

var id = clickedMarkers[i].id;
var title = clickedMarkers[i].title;
content.push("<li><a href=detail.php?id=" + id + "&referer=map>" +
title + "</a></li>");
}

infoBubble.setContent("<h2>Select an Event</h2><ul>" +
content.join("<br>") + "</ul>");
infoBubble.setPosition(center);
infoBubble.open(map);

});

[Chris Broadfoot]

You probably just want content.join(''), since you're pushing <li>s to the array.

Chris

--
You received this message because you are subscribed to the Google Groups "Google Maps JavaScript API v3" group.
To post to this group, send email to google-map...@googlegroups.com.
To unsubscribe from this group, send email to google-maps-js-a...@googlegroups.com.
For more options, visit this group at http://groups.google.com/group/google-maps-js-api-v3?hl=en.

--
http://twitter.com/broady