Google Maps InfoWindow on Clusters

Question

I have a map with lots of markers. All these markers have a InfoWindow. With the Markers Cluster Lib, (http://google-maps-utility-library-v3.googlecode.com/svn/trunk/marker

Answer 1

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() + '
');
    }
    if (gm_map.getZoom() <= markerCluster.getMaxZoom()) {
      infoWindow.setContent(markers.length + " markers
" + 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%;
}