Pubblicato il 03/07/17 - aggiornato il  | Nessun commento :

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.

percorso-google-maps

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

indicatore-google-maps

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

aggiungere-indicatore-linea

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.

aggiungere-indicatori

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

percorso-google-maps-linea

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.

percorso-a-piedi

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.

condivisione-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

incorporare-mappa-sito

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

mappa-google-maps

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.




Nessun commento :

Posta un commento

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.