Come visualizzare un'etichetta accanto a un indicatore per Google Maps?

Question

Vorrei visualizzare un'etichetta di testo accanto ai marcatori su google maps. Ho già utilizzato Virtual Earth e sto appena iniziando a utilizzare Google Maps. Ho provato a impostare la proprietà Title ma questo cambia solo il roll over del testo.

C'è un modo per visualizzare una piccola riga di testo sotto un marcatore che rimarrà lì mentre l'utente zooma, apre e usa la mappa?

Grazie in anticipo!

Answer 1

C'è una buona classe di etichetta here, anche se dovrai aggiungerla accanto ai marcatori.

Answer 2

Per l'API JavaScript v3 di Google Maps, vedere the examples here.

Source code available in normal and minimised forms.

Answer 3

Anche a questa domanda è stata data risposta Ho trovato this resource, che ritengo sia una buona soluzione per questo problema e potrebbe essere utile. Inoltre, una soluzione simile potrebbe essere trovata here.

Answer 4

Ecco alcuni esempi di codice che risolverebbe il problema: https://github.com/printercu/google-maps-utility-library-v3-read-only/tree/master/markerwithlabel/examples

Questa è una classe personalizzata denominata finestra informazioni. Si può vedere l'arbitro API sul link qui sopra

Il file js possono essere inclusi da qui: https://github.com/printercu/google-maps-utility-library-v3-read-only/blob/master/infobox/src/infobox.js

Cheers!

Answer 5

Un'alternativa all'utilizzo della libreria js consiste semplicemente nel creare un'icona .png che includa il testo. Sembra sciocco, ma puoi usare qualche servizio esterno per questo (come this one).

Si carica l'icona e si ottiene un collegamento in cambio. Se aggiungi del testo ai collegamenti url, restituirà l'icona con il testo visualizzato.

Answer 6

Se si desidera solo per mostrare l'etichetta sotto il marcatore, quindi è possibile estendere Google Maps Marker per aggiungere un metodo setter per l'etichetta e si può definire l'oggetto etichetta estendendo Google Maps OverlayView come questo ..

demo: 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> 

Questo funzionerà.