Geek Answers Handbook

How to align a number in a MarkerClusterer icon?

I have a google map api v3 and I want to display the user contact of the cluster with the alignment of the number as follows:

enter image description here

I 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 looks like this:

enter image description here

how can i align the cluster icon number in the blue box.

thanks in advance...

+4
source share
2 answers

I tried this code works 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] - ( ) , . [yoffset, xoffset], yoffset , , xoffset . [0, 0].

+5

markerclustererplus, .

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

css ,

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

More articles:


All Articles