Google Maps offre la possibilità di inserire mappe in un sito web per completare, ad esempio, la pagina "Dove Siamo". La mappa di Google contiene, oltre alla mappa fisica, politica o satellitare, anche indicazioni commerciali, stradali, o punti di interesse quali attività e servizi. Vediamo come fare.
Nella JED di Joomla! ci sono tantissime estensioni, per la maggior parte plugin, che assolvono a tale compito. E' possibile includere nei contenuti di Joomla! una mappa senza installare alcuna estensione. Possiamo avere la mappa o direttamente nei contenuti oppure includerla in un modulo personalizzato per poi richiamare tale modulo dove si vuole nella pagina.
Individuare la mappa da inserire
Portarsi all'url maps.google.it e digitare nel campo di testo, in alto a sinistra, la località o il luogo da trovare. Per l'esempio in oggetto ho scelto il Colosseo, Roma.
Subito dopo si apre la destinazione cercata, con indicazione del punto contraddistinto dal marker di Google.
Individuare il codice per inserire la mappa
Se si vuole inserire la zona del Colosseo, si necessita del codice da scrivere nella pagina web. Come fare? Sotto il campo di testo precedentemente visto, premere il link "Condividi".
Immediatamente si apre una pop-up al centro della pagina. Essa contiene due link:
- Condividi link
- Incorpora mappa
A noi interessa il secondo.
Copiare ed incollare in un foglio di testo il codice dell'iframe che appare evidenziato di colore bleu.
Nel nostro caso, il codice da copiare è quello immediatamente prima della mappa:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.123073813726!2d12.490036851285991!3d41.890210179119265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f61b6532013ad%3A0x28f1c82e908503c4!2sColosseo!5e0!3m2!1sit!2sit!4v1479312763737" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Inserire la mappa di Google in Joomla!
A questo punto su Joomla! creiamo un nuovo modulo di tipo WRAPPER ed inseriamo in URL il codice iframe appuntato precedentemente sul foglio di testo eliminando la parte iniziale e quella finale qui è spiegato nel dettaglio.
in questo caso il codice sarà: <iframe src="/https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2970.123073813726!2d12.490036851285991!3d41.890210179119265!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x132f61b6532013ad%3A0x28f1c82e908503c4!2sColosseo!5e0!3m2!1sit!2sit!4v1479312763737" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
Impostando la larghezza a 100% (di default) la mappa funzionerà anche per siti responsive!