Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Effetti e controlli Javascript

Pagine:

RSS

Mappe personalizzate di Google sul proprio sito

di: Giampaolo Petrosemolo 28 Maggio 2007

Il risultato finale

Avete appena creato la vostra mappa personalizzata su Google Maps, ora non rimane che sovrapporla a quella che avete creato precedentemente per il vostro sito.

Modificate la parte iniziale della funzione load() aggiungendo la variabile geoXml al vostro codice JavaScript subito dopo il controllo di compatibilità del browser:

var geoXml = new GGeoXml("http://maps.google.com/maps/ms?ie=UTF8&hl=it&msa=0&output=nl&msid=111720583234758229633.000001128a817b57e339b&output=nl");

Utilizzate all'interno della funzione GGeoXml il link KML appena copiato, quindi subito dopo la creazione della mappa aggiungete il comando per sovrapporre lo strato di informazioni personalizzate:

map.addOverlay(geoXml);

Sarà facile ottenere un risultato simile a questo:

Figuea 3 - Risultato finale

Con qualche semplice modifica al codice (in primis riguardo l'ambito delle variabili) potreste aggiungere un controllo che permetta di visualizzare/nascondere il livello personalizzato. Avete appena visto il metodo per visualizzarlo, quello per rimuoverlo è:

map.removeOverlay(geoXml);

Se siete pigri e volete che il lavoro pesante lo faccia qualcun altro potete utilizzare alcuni servizi online che, partendo dal link del file KML messo a disposizione dal Le mie mappe di Google, vi creano il codice HTML da includere nella vostra pagina web. Facile come un copia e incolla! Ecco un paio di link utili: http://www.mymapsplus.com, http://www.dr2ooo.com/tools/maps.

L'esempio completo e funzionante di questo articolo lo trovate invece online su questa pagina. Buon divertimento!