Google maps api v3: Text position on MarkerClusterer Icon

Question

I am assuming that you are using the code which I think you are using, googles markercluster.. in this case you need to for example, take the markerclusterer.js code and modify it directly.

Inside that code there is a method called ClusterIcon.prototype.createCss() ... which basically sets the styles for each cluster element (they are only divs really).. if you wan't to change number text to display close to the top, you could for example modify line-height attribute.

Here is the example:

/**
 * Create the css text based on the position of the icon.
 *
 * @param {google.maps.Point} pos The position.
 * @return {string} The css style text.
 */
ClusterIcon.prototype.createCss = function(pos) {

  var style = [];
  style.push('background-image:url(' + this.url_ + ');');
  var backgroundPosition = this.backgroundPosition_ ? this.backgroundPosition_ : '0 0';
  style.push('background-position:' + backgroundPosition + ';');

  if (typeof this.anchor_ === 'object') {
    if (typeof this.anchor_[0] === 'number' && this.anchor_[0] > 0 &&
        this.anchor_[0] < this.height_) {
      style.push('height:' + (this.height_ - this.anchor_[0]) +
          'px; padding-top:' + this.anchor_[0] + 'px;');
    } else {

      //
      // See the (this.height_ - 10) for line-height
      //

      style.push('height:' + this.height_ + 'px; line-height:' + (this.height_ - 10) +
          'px;');
    }
    if (typeof this.anchor_[1] === 'number' && this.anchor_[1] > 0 &&
        this.anchor_[1] < this.width_) {
      style.push('width:' + (this.width_ - this.anchor_[1]) +
          'px; padding-left:' + this.anchor_[1] + 'px;');
    } else {
      style.push('width:' + this.width_ + 'px; text-align:center;');
    }
  } else {

    //
    // See the (this.height_ - 10) for line-height
    //

    style.push('height:' + this.height_ + 'px; line-height:' +
        (this.height_ - 10) + 'px; width:' + this.width_ + 'px; text-align:center;');
  }

  var txtColor = this.textColor_ ? this.textColor_ : 'black';
  var txtSize = this.textSize_ ? this.textSize_ : 11;

  style.push('cursor:pointer; top:' + pos.y + 'px; left:' +
      pos.x + 'px; color:' + txtColor + '; position:absolute; font-size:' +
      txtSize + 'px; font-family:Arial,sans-serif; font-weight:bold');

  return style.join('');
};

Now if I view what happens to div element HTML, it looks like this:

<div style="background-image: url(http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png); height: 53px; line-height: 43px; width: 53px; text-align: center; cursor: pointer; top: 173.68359152317203px; left: 273.60742400000004px; color: black; position: absolute; font-size: 11px; font-family: Arial, sans-serif; font-weight: bold; background-position: 0px 0px;">2</div>

..the interesting part above is ofc. the line-height: 43px;

As you can see, its only div with some inline css styles. You also might notice that number 2 of the cluster is not inside paragraph its just number 2 in a div. Therefore, if you wan't to style it further you could look into method called:

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

    // For debugging purposes so you know what you are doing
    // console.log(this.div_);

    // The interesting part here is the this.div_.innerHTML    
    // You could for example add more elements inside this.div_, 
    // now it just adds the number

    this.div_.innerHTML = this.sums_.text;
  }

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

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

... and modify it to place more HTML to the actual div element, then you have variety of options tune it as you like.

Here is the working example of all this: see jsfiddle