¿Cómo mostrar una etiqueta al lado de un marcador para Google Maps?

Question

Me gustaría mostrar una etiqueta de texto al lado de los marcadores en los mapas de Google. He usado Virtual Earth antes y estoy empezando a usar Google Maps. Intenté configurar la propiedad del Título, pero eso solo cambia el texto del giro.

¿Hay alguna manera de mostrar una pequeña línea de texto debajo de un marcador que permanecerá allí mientras el usuario amplía, desplaza y usa el mapa?

¡Gracias de antemano!

Answer 1

Hay una buena clase de etiqueta here, aunque deberá agregarla junto con los marcadores.

Answer 2

Para Google Maps JavaScript API v3, echa un vistazo a the examples here.

Source code available in normal and minimised forms.

Answer 3

Incluso esta pregunta ha sido respondida He encontrado this resource, que creo que es una buena solución para este problema y podría ser útil. Además, se puede encontrar una solución similar here.

Answer 4

Aquí algunos ejemplos de código que resolvería el problema: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

Ésta es una clase personalizada denominada Caja de información. Se puede ver que el árbitro API en el enlace anterior

El archivo js se pueden incluir desde aquí: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

Salud!

Answer 5

Una alternativa al uso de la biblioteca js es simplemente crear un icono .png que incluirá su texto. Suena tonto, pero puede usar algún servicio externo para esto (como this one).

Cargue su icono y obtenga un enlace a cambio. Si agrega un poco de texto a la URL de los enlaces, devolverá su ícono con ese texto procesado en él.

Answer 6

Si lo que desea es mostrar la etiqueta debajo del marcador, a continuación, puede ampliar los mapas de Google Marcador para agregar un método de selección para la etiqueta y se puede definir el objeto de etiqueta mediante la extensión de los mapas de Google OverlayView como esto ..

demostración: jsFiddle

<script type="text/javascript"> 
    var point = { lat: 22.5667, lng: 88.3667 }; 
    var markerSize = { x: 22, y: 40 }; 


    google.maps.Marker.prototype.setLabel = function(label){ 
     this.label = new MarkerLabel({ 
      map: this.map, 
      marker: this, 
      text: label 
     }); 
     this.label.bindTo('position', this, 'position'); 
    }; 

    var MarkerLabel = function(options) { 
     this.setValues(options); 
     this.span = document.createElement('span'); 
     this.span.className = 'map-marker-label'; 
    }; 

    MarkerLabel.prototype = $.extend(new google.maps.OverlayView(), { 
     onAdd: function() { 
      this.getPanes().overlayImage.appendChild(this.span); 
      var self = this; 
      this.listeners = [ 
      google.maps.event.addListener(this, 'position_changed', function() { self.draw(); })]; 
     }, 
     draw: function() { 
      var text = String(this.get('text')); 
      var position = this.getProjection().fromLatLngToDivPixel(this.get('position')); 
      this.span.innerHTML = text; 
      this.span.style.left = (position.x - (markerSize.x/2)) - (text.length * 3) + 10 + 'px'; 
      this.span.style.top = (position.y - markerSize.y + 40) + 'px'; 
     } 
    }); 
    function initialize(){ 
     var myLatLng = new google.maps.LatLng(point.lat, point.lng); 
     var gmap = new google.maps.Map(document.getElementById('map_canvas'), { 
      zoom: 5, 
      center: myLatLng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 
     var myMarker = new google.maps.Marker({ 
      map: gmap, 
      position: myLatLng, 
      label: 'Hello World!', 
      draggable: true 
     }); 
    } 
</script> 
<style> 
    .map-marker-label{ 
     position: absolute; 
    color: blue; 
    font-size: 16px; 
    font-weight: bold; 
    } 
</style> 

Esto funcionará.