Draw text on Google Maps

Question

I know you can draw basic shapes on Google Maps but has anyone tried to draw text on the map? I've seen that this may have been available in the past...

I would like to use JavaScript to draw text on Google Maps at various lat/long coordinates. Ultimately, I would like to have a web page where I could type some text in a text box, then click a button and have javascript display some custom text on the map. This would be without the use of the balloons that Google Maps provides.

Any help is much appreciated. Thanks!

Solution

What you want are custom overlays.

You can read more about them here: https://developers.google.com/maps/documentation/javascript/overlays#CustomOverlays

You can edit in the playground here: https://code.google.com/apis/ajax/playground/#map_simple_v3

I quickly changed their custom overlay example to do what you asked. Insert the following code in the playground:

    var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
function initialize() {
  var myLatLng = new google.maps.LatLng(62.323907, -150.109291);
  var mapOptions = {
    zoom: 11,
    center: myLatLng,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var swBound = new google.maps.LatLng(62.281819, -150.287132);
  var neBound = new google.maps.LatLng(62.300471, -150.005608);
  var bounds = new google.maps.LatLngBounds(swBound, neBound);

  // Photograph courtesy of the U.S. Geological Survey
  overlay = new USGSOverlay(bounds, map);
}

/** @constructor */
function USGSOverlay(bounds, map) {

  // Now initialize all properties.
  this.bounds_ = bounds;
  this.map_ = map;

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

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

USGSOverlay.prototype.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.style.borderStyle = 'solid';
  div.style.borderWidth = '1px';
  div.style.borderColor = '#FFF';
  div.style.color = '#FFF';
  div.style.position = 'absolute';

  // Create an IMG element and attach it to the DIV.
  div.innerHTML= "HELLO WORLD";

  // Set the overlay's div_ property to this DIV
  this.div_ = div;

  // We add an overlay to a map via one of the map's panes.
  // We'll add this overlay to the overlayLayer pane.
  var panes = this.getPanes();
  panes.overlayLayer.appendChild(div);
}

USGSOverlay.prototype.draw = function() {

  // Size and position the overlay. We use a southwest and northeast
  // position of the overlay to peg it to the correct position and size.
  // We need to retrieve the projection from this overlay to do this.
  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 sw = overlayProjection.fromLatLngToDivPixel(this.bounds_.getSouthWest());
  var ne = overlayProjection.fromLatLngToDivPixel(this.bounds_.getNorthEast());

  // Resize the image's DIV to fit the indicated dimensions.
  var div = this.div_;
  div.style.left = sw.x + 'px';
  div.style.top = ne.y + 'px';
  div.style.width = (ne.x - sw.x) + 'px';
  div.style.height = (sw.y - ne.y) + 'px';
}

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

    google.maps.event.addDomListener(window, 'load', initialize);

​