GoogleMaps Markerclusterer InfoWindow same location, Cluster get content from Markers - google-maps-api-3

Question

i have problem, MarkerCluster undefined content from Markers.
I used MarkerCluster in same address (location) gridSize: 1
If pressing Cluster zoomOnClick:false, Cluster must getMarkers content
and open infowindow. but I get undefined undefined .
I chink this problem on this
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var content = '';
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
content += marker.name;
content += ("<br>");
}
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(cluster.getCenter());
infowindow.close();
infowindow.setContent(content);
infowindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close();
});
});
Full code:
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: new google.maps.LatLng(55.7522200, 37.6155600),
zoom: 11
});
var infoWindow = new google.maps.InfoWindow;
var iconPurple = new google.maps.MarkerImage('mapimages/purple.svg', new google.maps.Size(33, 31));
var iconBlue = new google.maps.MarkerImage('mapimages/blue.svg', new google.maps.Size(33, 31));
var iconYellow = new google.maps.MarkerImage('mapimages/yellow.svg', new google.maps.Size(33, 31));
var iconGreen = new google.maps.MarkerImage('mapimages/green.svg', new google.maps.Size(33, 31));
var iconPink = new google.maps.MarkerImage('mapimages/pink.svg', new google.maps.Size(33, 31));
var iconBrown = new google.maps.MarkerImage('mapimages/brown.svg', new google.maps.Size(33, 31));
var customIcons = [];
customIcons["room1"] = iconPurple;
customIcons["room2"] = iconBlue;
customIcons["room3"] = iconYellow;
customIcons["room4"] = iconGreen;
customIcons["room5"] = iconPink;
customIcons["room6"] = iconBrown;
var options = {
gridSize: 1,
zoomOnClick:false,
imagePath: 'mapimages/m'
};
downloadUrl(markers.php', function(data) {
var xml = data.responseXML;
var markerArray = [];
var markers = xml.documentElement.getElementsByTagName('marker');
Array.prototype.forEach.call(markers, function(markerElem) {
var name = markerElem.getAttribute("name");
var address = markerElem.getAttribute("address");
var metro = markerElem.getAttribute("metro");
var type = markerElem.getAttribute("type");
var date = markerElem.getAttribute("date");
var status = markerElem.getAttribute("status");
var inrequest = markerElem.getAttribute("inrequest");
var phone = markerElem.getAttribute("phone");
var message = markerElem.getAttribute("message");
var area_room = markerElem.getAttribute("area_room");
var price = markerElem.getAttribute("price");
var floore = markerElem.getAttribute("floore");
var floors = markerElem.getAttribute("floors");
var rooms_furniture = markerElem.getAttribute("rooms_furniture");
var kitchen_furniture = markerElem.getAttribute("kitchen_furniture");
var repaint = markerElem.getAttribute("repaint");
var comment = markerElem.getAttribute("comment");
var distance = markerElem.getAttribute("distance");
var point = new google.maps.LatLng(
parseFloat(markerElem.getAttribute('lat')),
parseFloat(markerElem.getAttribute('lng')));
var html = "<h1>" + "м. " + metro + ", " + address + "</h1>"
+ "<h2>" + phone + " " + name + "</h2>"
+ "<h3>" + type + " " + area_room + "&nbspм " + price + " р. этаж " + floore + "/" + floors + "</h3>"
+ "<p>" + rooms_furniture + " " + kitchen_furniture + " " + repaint + "</p>"
+ "<h5>" + distance + " " + comment + " " + message + "</h5>" + "<h6>" + date + " " + inrequest + " " + status + "</h6>";
var marker = new google.maps.Marker({
map: map,
position: point,
icon: customIcons[type],
animation: google.maps.Animation.DROP
});
markerArray.push(marker);
marker.addListener('click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
});
var markerCluster = new MarkerClusterer(map, markerArray, options);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var content = '';
for (var i = 0; i < markers.length; i++) {
var marker = markers[i];
content += marker.name;
content += ("<br>");
}
var infowindow = new google.maps.InfoWindow();
infowindow.setPosition(cluster.getCenter());
infowindow.close();
infowindow.setContent(content);
infowindow.open(map);
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close();
});
});
});
}
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);//right here
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
enter image description here

Answer 1

The google.maps.Marker objects in the MarkerClusterer are not the same "marker" XML elements you are parsing to create the google.maps.Markers. The won't have a name property, unless you create one.
var marker = new google.maps.Marker({
map: map,
position: point,
icon: customIcons[type],
animation: google.maps.Animation.DROP,
name: name // <-- add this
});
proof of concept fiddle