Google Maps – Come integrare e personalizzare una mappa nel nostro sito – parte 2

Ecco come ci apparirà la nostra mappa dopo le dovute personalizzazioni al codice

Nell’articolo precedente, abbiamo visto un esempio di base su come creare una mappa nel nostro sito in stile Google Maps.
Ora vediamo di passare in rassegna le opzioni e di personalizzarle caso per caso. L’esempio precedente ci tornerà utile, quindi vi consiglio di scaricarvi i sorgenti o di tenere aperta la pagina.

Download script

Pagina diretta alla scheda e al download del codice

Gestire la mappa

1
2
3
4
5

var options = {
	zoom: 15,
	center: latlng2,
	mapTypeId: google.maps.MapTypeId.ROADMAP
};

Questa parte di codice ci indicherà come sarà mostrata la mappa vera e propria.
Il parametro zoom è intuibile: serve per stabilire il livello di avvicinamento al punto indicato dalle coordinate settate nella variabile latlng. Più alto è lo zoom, più vi avvicinerete al suolo. Il valore deve essere intero.

Il parametro center stabilisce dove la mappa sarà centrata. Nel caso in cui le dimensioni del div che contengono la mappa siano ridotte, far passare le coordinate di base (latlng) potrebbe causare qualche errore di visualizzazione – per esempio nascondere una parte del balloon, se questo è impostato come già aperto al caricamento della mappa.
Per ovviare al problema, possiamo creare una seconda variabile, che conterrà coordinate leggermente diverse da quelle di base:

1
2

var latlng = new google.maps.LatLng(41.900856,12.483339);
var latlng2 = new google.maps.LatLng(41.9053, 12.4823);

e modificheremo di conseguenza il parametro center in questo modo:

1

center: latlng2,

I valori della seconda variabile non li ho stabiliti modificando casualmente i valori fino a ottenere il risultato voluto. La cosa migliore da fare è entrare in Google Maps e trovare le coordinate di un punto nella mappa poco più in alto del nostro indirizzo (usate lo stesso sistema che ho descritto nel primo articolo per tracciare le coordinate dell’indirizzo).
Se avete inserito correttamente i valori, il marcatore sarà spostato verso il basso rispetto a quello originale e il balloon sarà pienamente visibile.

L’ultimo parametro utile è mapTypeId, che stabilisce il sistema di visualizzazione di default della mappa. I valori inseribili sono quattro: HYBRID, ROADMAP, SATELLITE e TERRAIN. Se volete visualizzare la mappa come immagini di satellite, dovrete modificare la voce in questo modo:

1

mapTypeId: google.maps.MapTypeId.SATELLITE

Un’altra opzione che ci potrebbe tornare utile è disableDefaultUI: impostandola a false, si nasconderanno all’utente tutti i controlli della mappa.

Il marcatore e il balloon

1
2
3
4
5
6
7
8

var marker = new google.maps.Marker(
	{
		position: latlng,
		map: map,
		icon: 'http://google-maps-icons.googlecode.com/files/country.png',
		flat: true
	}
);

Il Marker è facilmente personalizzabile. La sua posizione è stabilita dalla proprietà position, nello stesso modo che abbiamo visto in precedenza per la mappa.
Nel mio esempio, ho settato un’icona personalizzata, mettendo l’indirizzo dell’immagine alla proprietà icon. Con una rapida ricerca, sulla rete potete trovare un’infinità di icone già pronte per il Marker.

Il tooltip (balloon) è gestibile dal codice subito sotto:

1
2
3
4
5
6
7
8
9
10
11
12

var tooltip = '<div id="tooltip">'+
	'<p><strong>Via Delle Muratte, 90</strong><br>'+
	'cap: 00187<br>'+
	'provincia: Roma<br>'+
	'nazione: Italia</p>'+
	'</div>';
var infowindow = new google.maps.InfoWindow({
	content: tooltip
});
google.maps.event.addListener(marker, 'click', function() {
	infowindow.open(map,marker);
});

Il testo visualizzato sarà quello inserito all’interno del div con id="tooltip". Accetta qualsiasi codice html, comprese eventuali immagini; ricordatevi soltanto di formattarlo nel modo che vedete qui sopra, cioè tra virgolette e con un + a fine riga che leghi la riga immediatamente successiva (come nel normale codice javascript).

L’apparizione del tooltip è gestita dall’oggetto infowindow. Nell’esempio non è visibile subito, ma viene lanciato dall’evento addListener: al click sul marker, il balloon apparirà nella mappa.
Se volete che il fumetto sia visibile immediatamente al caricamento della mappa, dovete commentare il codice in questo modo:

1
2
3

/*google.maps.event.addListener(marker, 'click', function() {*/
	infowindow.open(map,marker);
/*});*/

Guida agli eventi di Google Maps Javascript API V3 (in inglese)

Documentazione ufficiale di Google Maps