markerCluster one marker for a group

Question

I am using markerCluster and it works great.

Here is the code how it works with 2 markers:

  window.onload = function() {
      // cluster marker
      var clusterMarker = [];

      var map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng( 50, 3),
        zoom: 6,
        mapTypeId: 'terrain'
      });


      // Some sample data
      var sampleData = [{lat:50, lng:3}, {lat:50, lng:3.02}];


      for (var i = 0; i < sampleData.length; i ++) {

        var point = sampleData[i];
        var location = new google.maps.LatLng(point.lat, point.lng);

        // create marker at location
        var marker = new google.maps.Marker({
          position: location,
          map: map
        });

        // needed to cluster marker
        clusterMarker.push(marker);
      }

      new MarkerClusterer(map, clusterMarker, {imagePath: 'images/m', maxZoom: 15});
    }

and the result on different zoom levels:

If I zoom out, markerCluster counts the number of markers in one area. I would like to change it such that some marker represents multiple persons. So if I have one big marker that represents 21 persons, and a second marker that represents 1 person, then if I zoom out I would like to see the number 22 on the blue marker, and the big marker should have 21 on it. Is something like that possible?

So for example, I would like to get the following result, even if I just use two markers:

Answer 1

Create a "calculator" function that does what you want (sums the property of the marker that indicates the "number of people".

Documentation for "calculator" function. Returns an Object with the properties:

• text (the text to appear on the cluster)
• index (the index into the styles array to access the style for that cluster.

/**
 *  The function for calculating the cluster icon image.
 *
 *  @param {Array.<google.maps.Marker>} markers The markers in the clusterer.
 *  @param {number} numStyles The number of styles available.
 *  @return {Object} A object properties: 'text' (string) and 'index' (number).
 *  @private
 */
MarkerClusterer.prototype.calculator_ = function(markers, numStyles) {
  var index = 0;
  var count = markers.length;
  var dv = count;
  while (dv !== 0) {
    dv = parseInt(dv / 10, 10);
    index++;
  }

  index = Math.min(index, numStyles);
  return {
    text: count,
    index: index
  };
};

If you add a property to your data, "number", you could do something like this:

code snippet:

window.onload = function() {
  // cluster marker
  var clusterMarker = [];

  var map = new google.maps.Map(document.getElementById('map'), {
    center: new google.maps.LatLng(50, 3),
    zoom: 6,
    mapTypeId: 'terrain'
  });


  // Some sample data
  var sampleData = [{
    lat: 50,
    lng: 3,
    number: 20

  }, {
    lat: 50,
    lng: 3.02,
    number: 1
  }];


  for (var i = 0; i < sampleData.length; i++) {

    var point = sampleData[i];
    var location = new google.maps.LatLng(point.lat, point.lng);

    // create marker at location
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      number: sampleData[i].number,
      title: "" + sampleData[i].number
    });

    // needed to cluster marker
    clusterMarker.push(marker);
  }

  var clusterer = new MarkerClusterer(map, clusterMarker, {
    imagePath: 'https://raw.githubusercontent.com/googlemaps/js-marker-clusterer/gh-pages/images/m',
    maxZoom: 15
  });

  clusterer.setCalculator(function(markers, numStyles) {
    var index = 0;
    var count = 0;
    for (var i = 0; i < markers.length; i++) {
      if (markers[i].number) {
        count += markers[i].number;
      } else {
        count++;
      }
    }
    var dv = markers.length;
    while (dv !== 0) {
      dv = parseInt(dv / 10, 10);
      index++;
    }

    index = Math.min(index, numStyles);
    return {
      text: count,
      index: index
    };
  });
}

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<script src="https://cdn.rawgit.com/googlemaps/js-marker-clusterer/gh-pages/src/markerclusterer.js"></script>

<div id="map"></div>