Google Maps InfoWindow on Clusters
Add a "clusterclick" listener to the MarkerClusterer, open the infowindow when that event is triggered.
proof of concept fiddle
code snippet:
var gm_map;
var markerArray = [];
var infoWindow = new google.maps.InfoWindow();
function initialize() {
var marker, i;
var options_googlemaps = {
minZoom: 4,
zoom: 18,
center: new google.maps.LatLng(59.328631, 13.485688),
maxZoom: 18,
mapTypeId: google.maps.MapTypeId.ROADMAP,
streetViewControl: false
}
gm_map = new google.maps.Map(document.getElementById('google-maps'), options_googlemaps);
var options_markerclusterer = {
gridSize: 20,
maxZoom: 18,
zoomOnClick: false,
imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'
};
var markerCluster = new MarkerClusterer(gm_map, clusterMarkers, options_markerclusterer);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
var markers = cluster.getMarkers();
var array = [];
var num = 0;
for (i = 0; i < markers.length; i++) {
num++;
array.push(markers[i].getTitle() + '<br>');
}
if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
infoWindow.setContent(markers.length + " markers<br>" + array);
infoWindow.setPosition(cluster.getCenter());
infoWindow.open(gm_map);
}
});
for (i = 0; i < clusterMarkers.length; i++) {
var marker = clusterMarkers[i];
google.maps.event.addListener(marker, 'click', (function(marker) {
return function() {
infoWindow.setContent(this.getTitle());
infoWindow.open(gm_map, this);
}
})(marker));
}
}
google.maps.event.addDomListener(window, 'load', initialize);
var clusterMarkers = [
new google.maps.Marker({
position: new google.maps.LatLng(59.381059, 13.504026),
map: gm_map,
title: "P1220214 1.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.338683, 13.492057),
map: gm_map,
title: "P1220214 2.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.340715, 13.49631),
map: gm_map,
title: "P1220214 3.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.327232, 13.487384),
map: gm_map,
title: "P1220214 4.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.379034, 13.516566),
map: gm_map,
title: "P1220214 5.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328631, 13.485688),
map: gm_map,
title: "P1220214 6.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328657, 13.485591),
map: gm_map,
title: "P1220214 7.JPG"
}),
new google.maps.Marker({
position: new google.maps.LatLng(59.328501, 13.485782),
map: gm_map,
title: "P1220214 8.JPG"
})
].photo-map {
background-color: #222222;
height: 500px;
width: 100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>
<div class="photo-map" id="google-maps"></div>I ended up solving this problem this way, adding the following code:
var clusterOptions = {
zoomOnClick: false
}
markerCluster = new MarkerClusterer(map, markers, clusterOptions);
google.maps.event.addListener(markerCluster, 'clusterclick', function(cluster) {
if (map.getZoom() < map.maxZoom ){
map.setCenter(cluster.center_);
map.setZoom(map.getZoom() + 2);
} else {
var content = '';
// Convert the coordinates to an MVCObject
var info = new google.maps.MVCObject;
info.set('position', cluster.center_);
//Get markers
var marks_in_cluster = cluster.getMarkers();
console.log(marks_in_cluster);
for (var z = 0; z < marks_in_cluster.length; z++) {
content = makeClusterInfo(marks_in_cluster,z);
}
infowindow.close(); // closes previous open ifowindows
infowindow.setContent(content);
infowindow.open(map, info);
google.maps.event.addListener(map, 'zoom_changed', function() {
infowindow.close()
});
}
});