Google Maps – Personalizzare il tooltip e aggiungere uno o più marcatori (segnalini)

L’esempio che segue è un’aggiunta allo script che potete studiare e scaricare a questo indirizzo. Per ogni esigenza di base, fate riferimento a quell’articolo, dove ho spiegato nel dettaglio come creare e personalizzare una mappa di Google.

In questo articolo faremo un ulteriore passo avanti e vedremo come personalizzare l’aspetto del tooltip (il fumetto che appare sopra l’indicatore) e come aggiungere un secondo marker (segnalino). L’operazione è piuttosto semplice e non richiede grandi spiegazioni.

A ogni modo potete scaricarvi liberamente lo script, che è standalone e completamente funzionante. Lo script è la continuazione del precedente: i dati sono gli stessi con l’aggiunta della personalizzazione dell’aspetto del tooltip e di un nuovo marker.

Download script

Personalizzare il tooltip

Per modificare l’aspetto del tooltip, vi basta semplicemente agire sul css e modificare a piacere i parametri dell’identificare “tooltip”. Riporto un esempio minimale, che si limita soltanto ad allargare il tooltip a 300px; naturalmente potete agire come meglio credete sul div. Il codice può essere messo prima della chiusura del tag della pagina:

1
2
3
<style>
#tooltip{ width:300px;}
</style>

Inoltre, abbiamo già visto in altri articoli che il testo interno del balloon può essere formattato a piacere con i comuni tag html, per esempio:

1
<strong>Via Delle Muratte, 90</strong><br>

Aggiungere un secondo marker

Nella mappa potete aggiungere un numero illimitato di marker. L’unica cosa che dovete fare è replicare il sistema di creazione dell’indicatore e assegnargli le dovute coordinate. Inoltre, se lo volete dotare di un proprio tooltip, dovrete replicare anche il suo riferimento associandolo al marker. Per esempio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var latlng_newmarker = new google.maps.LatLng(41.903,12.483339);

[...]

/*questa parte aggiunge un secondo marker nella pagina*/
var marker2 = new google.maps.Marker(
	{
		position: latlng_newmarker,
		map: map,
		flat: true
	}
);

var tooltip2 = '<div id="tooltip">'+
	'<p><strong>Via Delle Muratte, 90</strong><br>'+
	'secondo tooltip</p>'+
	'</div>';

var infowindow2 = new google.maps.InfoWindow({
	content: tooltip2
});

infowindow2.open(map,marker2);

In pratica, ho creato la nuova variabile latlng_newmarker e gli ho associato delle coordinate leggermente spostate rispetto a quelle del marker originario. Dopodiché ho creato il nuovo segnalino (marker2) associandogli questa variabile, e il nuovo fumetto (tooltip2) che ho poi richiamato sulla mappa con l’ultima istruzione (assegnata a infowindow2).
Il risultato è la creazione di un nuovo segnalino sulla mappa un po’ più spostato rispetto all’originale, con il proprio tooltip.

Link esterni

Guida a Google Maps Javascript API V3

Ultimi Commenti
  1. Salvatore D'Agostino
  2. Salvatore D'Agostino
  3. Sandro
  4. Luigi
  5. Luigi
  6. Francesco
  7. Francesco
  8. Francesco

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *