¿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?¿Es posible escribir texto personalizado en Google Maps API v3?

Fuente

2010-10-17 user198003

parece que no es posible ... como que la única forma es crear una ventana transparente de InfoBox y escribir texto en él ... dime si estoy equivocado. – user198003

¿Puedo agregar texto personalizado (una palabra muy probablemente) en el marcador en la API del mapa estático de google map ..? – Jay

Para mostrar texto personalizado que necesita para crear una plantilla personalizada. A continuación se muestra un ejemplo adaptado de la documentación oficial de Google. También es posible usar this library para más "elegantes" ventanas de información

<html> 
 

 
<head> 
 
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> 
 
    </script> 
 
    <script> 
 
    //adapded from this example http://code.google.com/apis/maps/documentation/javascript/overlays.html#CustomOverlays 
 
    //text overlays 
 
    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; 
 

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

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

 

 

 
    TxtOverlay.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.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); 
 
    } 
 
    TxtOverlay.prototype.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'; 
 

 

 

 
     } 
 
     //Optional: helper methods for removing and toggling the text overlay. 
 
    TxtOverlay.prototype.onRemove = function() { 
 
     this.div_.parentNode.removeChild(this.div_); 
 
     this.div_ = null; 
 
    } 
 
    TxtOverlay.prototype.hide = function() { 
 
     if (this.div_) { 
 
     this.div_.style.visibility = "hidden"; 
 
     } 
 
    } 
 

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

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

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

 

 

 

 
    var map; 
 

 
    function init() { 
 
     var latlng = new google.maps.LatLng(37.9069, -122.0792); 
 
     var myOptions = { 
 
     zoom: 4, 
 
     center: latlng, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
     }; 
 
     map = new google.maps.Map(document.getElementById("map"), myOptions); 
 

 
     var marker = new google.maps.Marker({ 
 
     position: latlng, 
 
     map: map, 
 
     title: "Hello World!" 
 
     }); 
 

 
     customTxt = "<div>Blah blah sdfsddddddddddddddd ddddddddddddddddddddd<ul><li>Blah 1<li>blah 2 </ul></div>" 
 
     txt = new TxtOverlay(latlng, customTxt, "customBox", map) 
 

 
    } 
 
    </script> 
 
    <style> 
 
    .customBox { 
 
     background: yellow; 
 
     border: 1px solid black; 
 
     position: absolute; 
 
    } 
 
    </style> 
 
</head> 
 

 
<body onload="init()"> 
 
    <div id="map" style="width: 600px; height: 600px;"> 
 
    </div> 
 
</body> 
 

 
</html>

Fuente

2010-10-17 20:56:31 Michal

Esto es asombroso. Me rasco la cabeza, preguntándome por qué Google no incluyó esto por defecto. –

¿Hay alguna forma de cambiar el tamaño del texto de la etiqueta? Agregar 'font-size: 30px' al bloque de estilos no parece funcionar. –

¡Funciona como un encanto! Excelente respuesta! –

Con mucho, la forma más fácil de agregar una superposición de texto es utilizar la clase MapLabel de 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' 
});

Fuente

2012-11-18 04:19:44

Aparece un error "Uncaught ReferenceError: MapLabel no está definido", ¿cómo se agrega la biblioteca de utilidades? – muffin

' – Legionar

' Pero necesitará utilizar éste 'http: // google-maps-utility-library-v3.googlecode.com/svn/trunk/maplabel/src/maplabel.js' – Legionar

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

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

Fuente

2014-11-19 09:01:30 user4269131

De hecho, esto funciona. Muy bien ! – Zl3n

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

Respuesta

Cuestiones relacionadas