CODEWITHSUNDEEP
cssgoogle-mapsgoogle-maps-api-3
chimbu
chimbu

Reputation: 806

how to align the number in MarkerClusterer icon?

I have using google map api v3 and i want to display custom cluster pin with number alignment like this:

enter image description here

I have tried this code:

var clusterOptions = {
        zoomOnClick: false,
        styles: [{height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

But it's showing like this:

enter image description here

how can i align the Cluster icon number into the blue box.

thanks in advance...

Upvotes: 8

Views: 10336

Answers (3)

Devin Fields
Devin Fields

Reputation: 2544

Adding this answer because while chimbu's answer started me off, it didn't completely *explain the issue. Each object in the styles array is associates with one of the five cluster icons you can provide, and it seems that providing styles objects will override your imagePath property (since, in my case, providing only one styles object with no url, expecting the imagePath to still work, broke everything). Here's the code I use now:

new MarkerClusterer(map, [], {
    maxZoom: 16,
    ignoreHidden: true,
    styles: [
      ..._.map([1, 2, 3, 4, 5], () => ({
        textColor: 'black',
        url: './img/cluster/m1.png',
        height: 52,
        width: 53,
        anchorText: [2, 2]
      }))
    ]
  });

If you had 5 different images, you could tap into the first argument to the callback and adjust the numbers (1, 2, etc...) to do some math to make the height, width, and anchortext larger/smaller. You can also, of course, only provide one object to the styles array that will be applied to every cluster icon if you wish, but this example provides a bit of flexible and customization if you need it.

Upvotes: 2

JdAkram
JdAkram

Reputation: 76

If u are using markerclustererplus library, then u can override that library code. 

/**
 * Adding the cluster icon to the dom.
 * @ignore
 */

ClusterIcon.prototype.onAdd = function() {
  this.div_ = document.createElement('DIV');
  if (this.visible_) {
    var pos = this.getPosFromLatLng_(this.center_);
    this.div_.style.cssText = this.createCss(pos);

    var innerHtml;

    if (this.cluster_.markers_.length > 0) {
        innerHtml = "<div><p id='clusterIconText'>" + this.sums_.text + "</p></div>";
    }

    this.div_.innerHTML = innerHtml;
  }

  var panes = this.getPanes();
  panes.overlayMouseTarget.appendChild(this.div_);

  var that = this;
  google.maps.event.addDomListener(this.div_, 'click', function() {
    that.triggerClusterClick();
  });
};

By css you can change style according to requirement like this

 #clusterIconText
        {
            margin-top:-70px;
            margin-left:-70px; 
            color:#f2f2f2;
        }

Upvotes: 2

chimbu
chimbu

Reputation: 806

I have tried this code is working well:

var clusterOptions = {
        zoomOnClick: false,        
        styles: [{ anchor:[2,22],textColor: "white",height: 36, width: 36, url: location.href.substring(0, location.href.lastIndexOf("/")+1)+'images/pushpin_cluster.png' }]}
    var markerCluster = new MarkerClusterer(map, markers, clusterOptions);

anchor:[2,22] -The position (in pixels) from the center of the cluster icon to where the text label is to be centered and drawn. The format is [yoffset, xoffset] where yoffset increases as you go down from center and xoffset increases to the right of center. The default is [0, 0].

Upvotes: 10

Related Questions