Maker With Label

maker.label.js

Maps.prototype.label = function(marker, index) {
  var label = new Label({ map: this.map });

  label.set('zIndex', index);
  label.set('text', '12');
  label.bindTo('position', marker, 'position');
};

Label.prototype = new google.maps.OverlayView;

function Label(options) {
  this.setValues(options);

  this.currency               = document.createElement('sup');
  this.currency.innerHTML     = 'R$';
  this.currency.style.cssText = 'font-size: .7em'

  this.price                  = document.createElement('span');
  this.price.style.cssText    = 'color: #333; font-size: 1.3em; font-weight: bold';

  this.priceWrap              = document.createElement('div');

  this.priceWrap.appendChild(this.currency);
  this.priceWrap.appendChild(this.price);
  this.priceWrap.style.cssText = 'position: absolute; display: none';
};

Label.prototype.onAdd = function() {
   var pane = this.getPanes().overlayImage;

   pane.appendChild(this.priceWrap);
};

Label.prototype.onRemove = function() {
  this.priceWrap.parentNode.removeChild(this.priceWrap);
};

Label.prototype.draw = function() {
  var projection = this.getProjection(),
      position   = projection.fromLatLngToDivPixel(this.get('position'));

  this.priceWrap.style.left    = position.x - 15 + 'px';
  this.priceWrap.style.top     = position.y - 37 + 'px';
  this.priceWrap.style.display = 'block';
  this.priceWrap.style.zIndex  = this.get('zIndex');
  this.price.innerHTML         = this.get('text');
};