Google Map Javascript API - Adding InfoWindow to Marker Cluster
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

Hello, I am working on a Directory/Map that will show the location of people. Because there are so many people in a close location, I'm using Marker Clustering to group them together. When you click on a "cluster", it zooms in until the point where you can see individual markers.

When you click on a marker, an InfoWindow appears with the name. That works fine.

However, I have some people that are all at the exact same location. Because of that, I cannot zoom to the point where I can see the individual markers for each person.

In this scenario (where the marker cluster cannot be separated), I'd like the InfoWindow to appear when the cluster is clicked. Is that possible?

Example URL is: https://sistersofthepresentation.connollytech.com/mission-ministry/interactive-map/

In my code, I have an array of locations named "sisterlocations" and am using the following code to build the map/markers/etc...

  function initMap() {

    var map = new google.maps.Map(document.getElementById('sister_interactive_map'), {
      zoom: 2,
      center: {lat: 32.101190, lng: -34.367203}
    });

    // Create an array of alphabetical characters used to label the markers.
    var labels = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';

    // Add some markers to the map.
    // Note: The code uses the JavaScript Array.prototype.map() method to
    // create an array of markers based on a given "locations" array.
    // The map() method here has nothing to do with the Google Maps API.
    var image = '/wp-content/themes/sisters_of_the_presentation/images/maptarget.png';
    var infoWin = new google.maps.InfoWindow();
    var markers = sisterlocations.map(function(location, i) {
      var marker = new google.maps.Marker({
        position: location,
        icon: image
      });
      google.maps.event.addListener(marker, 'click', function(evt) {
        infoWin.setContent(location.sistername);
        infoWin.open(map, marker);
      });
      return marker;
    });

    // Add a marker clusterer to manage the markers.
    var markerCluster = new MarkerClusterer(map, markers,
        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'});
  }
awarded to Chlegou

Crowdsource coding tasks.

1 Solution

Winning solution

Hi there,

it was challenging, but i made it by the end. :)

i have made two examples,

Example 1:

upon cluster click, it will show a popup with sister's names. Upen double click, it will zoom in.

link: https://codepen.io/chlegou/pen/ZEYdPgb

Example 2:

upon cluster click, it will zoom in. when maxZoom (18 in the example) is reached, it will start showing popup with sister's names.

link: https://codepen.io/chlegou/pen/OJPeqKa

I believe #2 is what you asked for, but you could try both to find what fits best.

Thanks.

Number 2 was pretty close to what I needed. Instead of waiting until we reach the max zoom before showing the infowindow, I wanted to show it as soon as we reach the point where all of the markers in the cluster are for the same location. I was able to change the example you provided to loop through the markers and check the location of each, so I will be able to do what I need. Thanks!
Matt Connolly 17 days ago
Glad you liked that. But you must be aware of listeners & calculations, if there's too many sisters in a single place. Test it in mobile to see the performance. Thanks for rewarding it to me.
Chlegou 16 days ago