Google Maps API Marker Clusterer Change Level Size

Question

I'm trying to change level size of Google Maps API Marker Clusterer. For default, the marker small size (blue icon/m1): 2-9 markers, medium level size (yellow icon/m2): 10-100 markers, big level (red icon/m3) size: 101-250 markers. (correct Me if I wrong).

I want to change the value of level size smaller than default. I have found another thread with same topic but I still didn't get clearly point.

This is the Google Maps API Marker Cluster icon I meant:

Google Maps API Marker Clusterer Icon

PS: I didn't mention about how to change clusterer icon, I meant how to change value of size. Ex: How I can change the level size of marker so it will be clustered to blue (m1), yellow (m2), and red(m3)? The default size like I mentioned before, for m1 it's contain of 2-9 markers, can I change the size value to 2-5 markers only?

Answer 1

You need to create a custom Calculator function. From the source (of the version referenced in Google's documentation, be sure to verify with the documentation of the version you are using, which you didn't provide). The default calculator function:

/**
 *  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
  };
};

The function to set it (which describes its return value, the index is the index into the array of icons, the text is the text to display on the cluster):

/**
 * Set the calculator function.
 *
 * @param {function(Array, number)} calculator The function to set as the
 *     calculator. The function should return a object properties:
 *     'text' (string) and 'index' (number).
 *
 */
MarkerClusterer.prototype.setCalculator = function(calculator) {
  this.calculator_ = calculator;
};