Is it possible to write custom text on Google Maps API v3?

Question

Is it possible to write a custom text on Google Maps API v3 next to the marker, or I can use only the info window to do that?

Answer 1

The latest (v3) API recommends using async defer and a callback when the Maps API is loaded.

To make this work you need to define the overlay class from within (or after) the initialization when the google class has been defined. Otherwise you will get google not defined errors.

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: { lat: 40, lng: -30 },
        zoom: 3
    });

    TxtOverlay.prototype = new google.maps.OverlayView();
    var overlay = new TxtOverlay(new google.maps.LatLng(0, 0),
        "
Have a wonderful overlay day
", 
        "customCSSClass", 
        map);
}

...

//adapded from answer above
function TxtOverlay(pos, txt, cls, map) {
    // Now initialize all properties.
    this.pos = pos;
    this.txt_ = txt;
    this.cls_ = cls;
    this.map_ = map;

    // We define a property to hold the image's
    // div. We'll actually create this div
    // upon receipt of the add() method so we'll
    // leave it null for now.
    this.div_ = null;

    this.onAdd = function() {
        // Note: an overlay's receipt of onAdd() indicates that
        // the map's panes are now available for attaching
        // the overlay to the map via the DOM.

        // Create the DIV and set some basic attributes.
        var div = document.createElement('DIV');
        div.className = this.cls_;

        div.innerHTML = this.txt_;

        // Set the overlay's div_ property to this DIV
        this.div_ = div;
        var overlayProjection = this.getProjection();
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
        // We add an overlay to a map via one of the map's panes.

        var panes = this.getPanes();
        panes.floatPane.appendChild(div);
    }

    this.draw = function() {
        var overlayProjection = this.getProjection();

        // Retrieve the southwest and northeast coordinates of this overlay
        // in latlngs and convert them to pixels coordinates.
        // We'll use these coordinates to resize the DIV.
        var position = overlayProjection.fromLatLngToDivPixel(this.pos);

        var div = this.div_;
        div.style.left = position.x + 'px';
        div.style.top = position.y + 'px';
    }

    this.onRemove = function() {
        this.div_.parentNode.removeChild(this.div_);
        this.div_ = null;
    }

    this.hide = function() {
            if (this.div_) {
                this.div_.style.visibility = "hidden";
            }
        }

    this.show = function() {
        if (this.div_) {
            this.div_.style.visibility = "visible";
        }
    }

    this.toggle = function() {
        if (this.div_) {
            if (this.div_.style.visibility == "hidden") {
                this.show();
            } else {
                this.hide();
            }
        }
    }

    this.toggleDOM = function() {
        if (this.getMap()) {
            this.setMap(null);
        } else {
            this.setMap(this.map_);
        }
    }

    // Explicitly call setMap() on this overlay
    this.setMap(map);
}