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/markerclusterer/src/markerclusterer.js) I get clusters that zoom in when clicked.
Some Markers have the exact same coordinates, so they turn into a cluster even when I reach the maximum zoom. This is all fine so far, except that I want to also open a InfoWindow when clicking in the cluster that never splits into markers when zoomed. In this InfoWindow I want to display information based on the markers it includes.

This is my code so far. It works fine with InfoWindow on Markers, except it does not display InfoWindow when clicking on on Clusters.

function initialize(lat, lng) {
   var myLatlng = new google.maps.LatLng(lat,lng);
   var mapOptions = {
      mapTypeControl: false,
      center: myLatlng,
      zoom: 14,
      maxZonn:15
   };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    google.maps.event.addListener(map, 'idle', function() {
        getMarkers(map.getBounds());  

    });

};

function getMarkers(bounds){
    var filter = build_filter();
    var bounds  = {
        'swlat':bounds.getSouthWest().lat(),
        'swlng':bounds.getSouthWest().lng(),
        'nelat':bounds.getNorthEast().lat(),
        'nelng':bounds.getNorthEast().lng()
    };

    data = {
        'bounds': bounds
    }


 $.ajax({
    type: "POST",
    dataType: 'json',
    async: false,
    url: "<?=$x_url;?>",
    data: data,
    cache: true,
    success: function (json) {
        addMarkers2Map(json);

    }
    });
}    


function addMarkers2Map(data){

    $('#properties_counter').html(data.length);
    var markers = []; 
    for (var i = 0; i < data.length; ++i) {
        // set the marker position
        var latLng = new google.maps.LatLng(data[i].lat, data[i].lng);
        console.log(data[i].lat);


        // drop the marker
        var marker = new MarkerWithLabel({
            position: latLng,
            map: map,
            labelContent: data[i].price,
            labelAnchor: new google.maps.Point(27, 35),
            title: data[i].title,
            labelClass: "map-markers",
            zIndex: i
            // icon: ' '

        });

        markers.push(marker);

        var infowindow = null;
        buildInfoWindow(marker,map,data[i], i);

    }

    var markerCluster = new MarkerClusterer(map, markers);

    google.maps.event.addListener(markerCluster, 'click', function() {

            infowindow.open(map,markerCluster);

    });
}

function buildInfoWindow(marker, map, data, index){
    var strVar="";
    strVar += "<img src=\""+data.main_photo+"\"><br>";
    strVar += data.name+"<\/i>&nbsp;|&nbsp;"+data.age+"&nbsp;<i class=\"fa fa-prp\"><\/i>&nbsp;|&nbsp;"+data.gender+"&nbsp;<i class=\"fa fa-check\"><\/i>";
    strVar += "<div class=\"avatar-list\">";
    strVar += "<a href=\""+data.link+"\"><img class=\"avatar-photo-list\" src=\""+data.picture+"\"><\/a>";
    strVar += "<\/div>";
    strVar += "<div class=\"adress2\">"+data.city+"<\/div>";
    strVar += "<\/a>";

    var infowindow = new google.maps.InfoWindow({
        content: strVar
         });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.open(map,marker);
    });
}

How can I achieve this?

Solution 1

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()
    });
    } 
});

Solution 2

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>