Display InfoWindow for marker clusterers with the same position - google-maps-api-3

Question

I am using MarkerClusterer script to display pins on map. When the user clicks on a pin, it displays an info window. This works fine for single pins.
There are also multiple pins with the exact same location and according to MarkerClusterer documentation it should be possible to display the info window with summarized description for all pins under this cluster. This is done using the infoOnClick: true option and infoOnClickZoom settings.
This however does not seem to work properly. It displays the info window, but always on the same location on the map. Even when I click on a different cluster, the info window is displayed on the last spot.
I think I'm missing something in my code.
I made a demo to demonstrate the issue:
https://jsfiddle.net/JospoDev/htj42kvz/
(for some reason in this JSFiddle the info window for grouped cluster is not displayed at all, but it works with live code)
Here is the code I'm using:
var map = null;
var infowindow = new google.maps.InfoWindow({
size: new google.maps.Size(150, 150)
});
// Draw map and make clusterers
function drawMap() {
var rows = [
[
"Marker 01",
"Address 01",
"Description 01",
"1.746491908970114, 16.92597806453705"
],
[
"Marker 02",
"Address 02",
"Description 02",
"1.7468350744069, 16.917788091659546"
],
[
"Marker 03",
"Address 03",
"Description 03",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 04",
"Address 04",
"Description 04",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 05",
"Address 05",
"Description 05",
"1.74514002150984, 16.935933225260244"
],
[
"Marker 06",
"Address 06",
"Description 06",
"1.74514002150984, 16.945933225260244"
],
[
"Marker 07",
"Address 07",
"Description 07",
"1.74514002150984, 16.945933225260244"
],
[
"Marker 08",
"Address 08",
"Description 08",
"1.74514002150984, 16.945933225260244"
]
];
map.markers = [];
for (var i in rows) {
var latlng = rows[i][3];
var htmlDescription = '';
var commaPos = latlng.indexOf(',');
var coordinatesLat = parseFloat(latlng.substring(0, commaPos));
var coordinatesLong = parseFloat(latlng.substring(commaPos + 1, latlng.length));
// Postition
var markerpos = new google.maps.LatLng(coordinatesLat, coordinatesLong);
// Description
htmlDescription = '<strong>' + rows[i][0] + '</strong> — ' + rows[i][1];
// Create marker
map.markers.push(createMarker(markerpos, rows[i][0], htmlDescription));
}
mc.addMarkers(map.markers);
}
// A function to create the marker and set up the event window function
function createMarker(latlng, name, html) {
var marker = new google.maps.Marker({
position: latlng,
map: map,
title: name,
content: html
});
marker.info = new google.maps.InfoWindow({
content: html
});
// Event listener for click function
google.maps.event.addListener(marker, 'click', function(evt) {
infowindow.setContent(html);
infowindow.open(map, marker);
});
return marker;
}
// Initialize google map and run query
function initialize() {
map = new google.maps.Map(document.getElementById('map-canvas'), {
center: new google.maps.LatLng(1.74514002150984, 16.925833225250244),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Cluster options
var mcOptions = {
infoOnClick: true, // Display info window on click
zoomOnClick: false, // Don't zoom on click
infoOnClickZoom: 14, // Threshold for displaying info window
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
// Mark Clusterer
mc = new MarkerClusterer(map, map.markers, mcOptions);
// Close the info window when clicking on the map
google.maps.event.addListener(map, 'click', function() {
infowindow.close();
});
// Draw map
drawMap();
}
// Callback to initialize
google.maps.event.addDomListener(window, 'load', initialize);
Thank you for your help.

Answer 1

I've had a similar issue to the one you're having. I was creating markers, however it would also display on the last marker I created. I found that the issue was because I was creating a new marker in the for loop. For whatever reason that kept overwriting the previous markers.
I fixed this by creating a function that creates markers, and calling that with whatever data I needed and returned the marker.