¿Es posible escribir texto personalizado en Google Maps API v3?

¿Es posible escribir texto personalizado en Google Maps API v3, al lado del marcador? o solo puedo usar la ventana de información para hacer eso?

Para mostrar texto personalizado, debe crear una superposición personalizada. A continuación se muestra un ejemplo adaptado de la documentación oficial de Google. También puede usar esta biblioteca para obtener ventanas de información más “elegantes”

       

Con mucho, la manera más fácil de agregar una Superposición de texto es utilizar la clase MapLabel desde https://github.com/googlemaps/js-map-label

 var mapLabel = new MapLabel({ text: 'Test', position: new google.maps.LatLng(50,50), map: map, fontSize: 20, align: 'right' }); 

Si el texto es estático, puede usar un marcador y una imagen:

 var label = new google.maps.Marker({ position: new google.maps.LatLng(50,50), map: map, icon: "/images/mytextasanimage.png" }); 

La API más reciente (v3) recomienda utilizar el async defer y una callback cuando se carga la API de Maps.

  

Para que esto funcione, debe definir la clase de superposición desde dentro (o después) de la inicialización cuando se haya definido la clase de google . De lo contrario, obtendrás errores google not defined .

 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); }