google maps api infowindow multiple markers, same location - php

Question

I have plotted over a thousand markers on a map from a mysql database. This page map.php takes an xml and grabs the information. Within this array, several points have multiple entries in the database, but google maps only shows the infowindow for the most recent marker plotted.
I'd like the infowindow to list all for that locations, similar to how a loop would work in php. So everything that shares a lat and a long would be within the one info window
The code i use:
downloadUrl("map/map_data_source.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var date = markers[i].getAttribute("date");
var artist = markers[i].getAttribute("artist");
var venue = markers[i].getAttribute("venue");
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var idgigs = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var count = markers[i].getAttribute("count");
var swith = markers[i].getAttribute("swith");
var stage = markers[i].getAttribute("stage");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html =
'<div id="infoWindow" width="600px"><img src="projects/components/' + artist + '">' +
'<br><br>' + date +
'<br><b>' + venue + '</b> / ' + city + '<br>' + swith + stage +
'<br><b><a class="second_sub_menu" href="../projects/bands.php?sub=Setlist&info=' + artist + '&id=' + idgigs + '">SHOW INFORMATION</a></b>';
var marker = new google.maps.Marker({
map: map,
position: point,
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + count + '|' + type + '|000000',
zIndex: i
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
if (map.getZoom() < 4) map.setCenter(marker.getPosition());
if (map.getZoom() < 4) map.setZoom(4);
});
google.maps.event.addListener(map, "click", function() {infoWindow.close();});
}
So this question has appeared a million and one times, but there still appears to be no real answer.. (There are mentions to markclusters and spiderers as another way of showing these results, but I want the markers how they are)..
Thank you mucho in advance, I have progressed well, but without this bit working, the project may as well be binned..! :(

Answer 1

Using #Dr.Molle link i got it working, in case anyone is after this feature, this is my new code
var markerContents={};
var infoWindow = new google.maps.InfoWindow;
downloadUrl("map/map_data_source.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var date = markers[i].getAttribute("date");
var artist = markers[i].getAttribute("artist");
var venue = markers[i].getAttribute("venue");
var address = markers[i].getAttribute("address");
var city = markers[i].getAttribute("city");
var idgigs = markers[i].getAttribute("id");
var country = markers[i].getAttribute("country");
var count = markers[i].getAttribute("count");
var swith = markers[i].getAttribute("swith");
var stage = markers[i].getAttribute("stage");
var type = markers[i].getAttribute("type");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var customIcons = {
FFFFFF: {
icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=' + count + '|' + type + '|000000'
},
upcoming: {
icon: '../map/marker/orange.png'
}
};
var markerId = point.toString();
if(!markerContents[markerId]){
markerContents[markerId] = [];
}
var html =
'<div id="infoWindow" width="600px"><img src="projects/components/' + artist + '">' +
'<br><br>' + date +
'<br><b>' + venue + '</b> / ' + city + '<br>' + swith + stage +
'<br><b><a class="second_sub_menu" href="../projects/bands.php?sub=Setlist&info=' + artist + '&id=' + idgigs + '">SHOW INFORMATION</a></b>';
var icon = customIcons[type] || {};
markerContents[markerId].push(html);
var marker = new google.maps.Marker({
map: map,
position: point,
zIndex: i,
icon: icon.icon
});
bindInfoWindow(marker, map, infoWindow, markerContents[markerId]);
}
});
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html.join('<hr/>'));
infoWindow.open(map, marker);
if (map.getZoom() < 4) map.setCenter(marker.getPosition());
if (map.getZoom() < 4) map.setZoom(4);
});
google.maps.event.addListener(map, "click", function() {infoWindow.close();});
}
Because i wanted custom icons and I wanted a select group of markers to always be at the top, i had to modify the icons code too, but it works. So thank you to those that helped