Labeled Google Maps Marker

labeled-marker.js

var LabeledMarkerOverlay = function(marker) {
    this.marker = marker;

    this.el = document.createElement('div');
    this.el.className = 'marker-label';
};

LabeledMarkerOverlay.prototype = new google.maps.OverlayView();

LabeledMarkerOverlay.prototype.onAdd = function() {
    this.getPanes().overlayImage.appendChild(this.el);

    google.maps.event.addListener(this.marker, 'position_changed', this.updatePosition);
    google.maps.event.addListener(this.marker, 'zindex_changed', this.updateZIndex);
    google.maps.event.addListener(this.marker, 'visible_changed', this.updateVisible);
};

LabeledMarkerOverlay.prototype.onRemove = function () {
    this.el.parentNode.removeChild(this.el);

    google.maps.event.clearListeners(this.marker, 'position_changed');
    google.maps.event.clearListeners(this.marker, 'zindex_changed');
    google.maps.event.clearListeners(this.marker, 'visible_changed');
};

LabeledMarkerOverlay.prototype.draw = function() {
    this.updateContent();
    this.updatePosition();
};

LabeledMarkerOverlay.prototype.setMarker = function(marker) {
    this.marker = marker;
};

LabeledMarkerOverlay.prototype.updateContent = function() {
    var label = this.marker.get('label');

    if (label) {
        this.el.innerHTML = label;
    }
};

LabeledMarkerOverlay.prototype.updatePosition = function() {
    var position = this.getProjection().fromLatLngToDivPixel(this.marker.getPosition());

    this.el.style.left = Math.round(position.x) + 'px';
    this.el.style.top = Math.round(position.y) + 'px';

    this.updateZIndex();
};

LabeledMarkerOverlay.prototype.updateVisible = function() {
    this.el.style.display = this.marker.getVisible() ? 'block' : 'none';
};

LabeledMarkerOverlay.prototype.updateZIndex = function() {
    var zIndex = (this.marker.getZIndex() || parseInt(this.el.style.top, 10));

    this.el.style.zIndex = zIndex;
};

google.maps.LabeledMarker = function(options) {
    options = options || {};
    options.label = options.label || '';
    options.optimized = false;

    this.overlay = new LabeledMarkerOverlay(this);

    google.maps.Marker.call(this, options);
};

google.maps.LabeledMarker.prototype = new google.maps.Marker();

google.maps.LabeledMarker.prototype.setLabel = function(label) {
    this.set('label', label);
};

google.maps.LabeledMarker.prototype.setMap = function(map) {
    google.maps.Marker.prototype.setMap.apply(this, arguments);

    this.overlay.setMap(map);
};