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

Pagina diretta alla scheda e al download del codice

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.

Guida a Google Maps Javascript API V3