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 nella pagina web il codice dell'iframe che appare evidenziato di colore bleu.
Possiamo anche scegliere le dimensioni della mappa, tra quelle messe a disposizione da Google. Premere dove è scritto: "Medie". Appaiono 4 possibilità.
- Piccole
- Medie
- Grandi
- Dimensione personalizzata
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 possiamo inserire il codice della mappa in Joomla! Il codice sopra riportato deve essere incollato nel punto in cui vogliamo che la mappa appaia. Possiamo anche includerla in un modulo personalizzato. Il procedimento non cambia. Unica raccomandazione:
Per poter inserire il codice dell'iframe nella pagina, disabilitare l'editor di Joomla!
Dovremmo vedere il testo inserito da noi con tutti i tag html.
Il codice html della mappa
Il codice HTML per la mappa prevede, oltre all'iframe anche un elemento div che la contiene.
<div class="contentmap"> <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2473.7846109491607!2d16.435806633634087!3d41.2646057718727!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x1338041f8062ee99%3A0x24d7f6bd6bc42c46!2sCorso+Don+Luigi+Sturzo%2C+76125+Trani+BT!5e0!3m2!1sit!2sit!4v1479231697429" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe> </div>
Scritto così, il codice visualizza perfettamente la mappa in oggetto ma creerebbe dei problemi nel momento in cui la si volesse visualizzare da uno smartphone. La mappa "romperebbe" il layout del sito e supererebbe la larghezza del viewport, facendo apparire la barra di scroll orizzontale in basso.
Impostare la mappa anche per siti responsive
Con pochissimo codice CSS possiamo sistemare il tutto, senza nessun problema per alcun dispositivo.
.contentmap{
margin-top:1.5em;
position:relative;
padding-top:50px;
padding-bottom:56.25%;
height:0;
overflow:hidden;
}
.contentmap iframe{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
Il codice CSS riportato deve essere scritto nel file template.css di Joomla! Dopo aver portato il file sul server via FTP, possiamo richiamare la pagina con la mappa e fare tutte le prove del caso, richiamandola da smartphone, tablet e pc. Di seguito un esempio della mappa con il punto di nostro interesse mostrato nell'articolo.