Creare una mappa di un percorso, condividerla e incorporarla in un sito.

Come usare Google Maps per creare una mappa di un percorso personalizzato per poi condividerla e incorporarla su un sito di Blogger, di Wordpress, ecc

In un articolo precedente abbiamo visto come misurare la lunghezza di un percorso con Google Maps. Questa funzionalità può essere utile per conoscere la lunghezza del percorso che solitamente completiamo nelle nostre uscite per il jogging oppure la lunghezza di una corsa ciclistica o podistica.

Come promesso in questo post vediamo come creare praticamente questo percorso e come condividerlo con altre persone anche incorporandolo in una pagina web. Si tratta di una operazione che credo interesserà gli organizzatori di corse campestre o ciclistiche che almeno in Toscana sono molto comuni nel periodo estivo durante le feste patronali.

Per creare un percorso personalizzato basta avere un account Google con cui accedere al servizio gratuito Google Maps. Si va sul menù in alto a sinistra e, nella colonna che viene visualizzata si sceglie I tuoi luoghi.

Verrà aperta una nuova colonna con le schede Etichettati, Salvati, Visitati e Mappe. Per creare un percorso scegliamo la scheda Mappe. Verranno visualizzati tutti i titoli delle mappe che abbiamo già creato. Scorriamo la colonna verso il basso fino a trovare Crea Mappa.

Ho pubblicato sul mio Canale Youtube un video con tutto il procedimento per la creazione del percorso.

Dopo aver cliccato su Crea Mappa si aprirà una nuova scheda del browser in cui cercare tramite la casella di ricerca il luogo del percorso. Se si tratta di un percorso lungo dovremo digitare il nome della zona di partenza.

Come test ho deciso di creare un percorso di una corsa podistica nel Giardino di Boboli di Firenze.

Google Maps mostrerà un Indicatore che potremo aggiungere alla mappa cliccando su Aggiungi alla mappa. A questo punto l'indicatore diventerà di colore blu e lo potremo spostare con il cursore nel punto di inizio del percorso. Cliccando sull'indicatore potremo modificarne aspetto e stile

La prima icona serve per modificare il colore dell'indicatore e eventualmente per scegliere un'altra icona. L'icona della matita si clicca quando si vuole editare titolo e descrizione dell'indicatore. Ci sono poi le icone per le indicazioni stradali e quella per aggiungere delle foto correlate alla zona del percorso. Si va su Salva per salvare le modifiche.

AGGIUNGERE INDICATORI E TRACCIARE IL PERCORSO

Per aggiungere altri indicatori si va in alto su Aggiungi Indicatore

Dopo aver selezionato l'icona dell'Indicatore sopra si clicca sul punto in cui aggiungerlo. Potremo poi editarlo. Sarà possibile aggiungere per esempio un traguardo volante o un punto di rifornimento.

Per tracciare il percorso si va su Traccia una linea e si sceglie il tipo di percorso



Si può sceglier un percorso da fare a piedi, in bici o in auto. Google Maps selezionerà automaticamente il percorso quando si utilizza il cursore. Per un percorso generico si sceglie invece Aggiungi linea o forma.



Quando si è terminato di editare il percorso non resta che condividerlo.

CONDIVIDERE UN PERCORSO DI GOOGLE MAPS

Prima di condividere una mappa di Google occorre renderla pubblica. Si va quindi su Condividi nella colonna di sinistra della mappa. Si aprirà una finestra in cui digitare il nome della mappa.

Nella finestra successiva si imposta la privacy cliccando su Modifica e impostando Pubblico su web.

INCORPORARE LA MAPPA IN UN SITO

La mappa del percorso così creata potrà essere incorporata in un sito web tramite un codice di un iframe che potrà essere incollato in Modalità HTML. Si va nel menù dei tre puntini accanto al nome della mappa

quindi si clicca su Incorpora sul mio sito. Si aprirà un popup in cui copiare il codice che sarà simile a questo

<iframe src="https://www.google.com/maps/d/embed?mid=1cqw8XuEVX9N5ZkMtwx17ofJDmAM" width="640" height="480"></iframe>

Potremo editare la larghezza e la lunghezza della mappa. Per centrarla nel layout di un post la dovremo mettere tra i tag <div align="center"> e </div>. Il risultato sarà simile a questo

e la mappa potrà essere navigata spostandosi con il cursore, leggendo le informazioni degli indicatori, ecc. Su Blogger e su Wordpress il codice si incolla nell'Editor in Modalità HTML.