Google Maps InfoWindow on Clusters

Question

I have a map with a lot of markers. All of these markers have InfoWindow. With Markers Cluster Lib ( http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js ) I get clusters that zoom in on click.
Some markers have exact coordinates, so they turn into a cluster, even when I reach maximum magnification. So far so good, except that I also want to open InfoWindow when clicked in a cluster that never breaks into tokens when zoomed. In this InfoWindow, I want to display information based on the markers that it includes.

This is my code. It works great with InfoWindow on markers, except that it does not display InfoWindow when clicking 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?

Answer 1

I decided to solve this problem this way by 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()
    });
    } 
});

Answer 2

Add a cluster listener to MarkerClusterer, open the info window when this event is fired.

proof of conceptual scripts

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"></script>
<script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script>

<div class="photo-map" id="google-maps"></div>

Run codeHide result