Inserire una Mappa di Google nei contenuti di Joomla!

L'articolo odierno prende in esame una pagina web generata con il CMS Joomla! Ci sono molte estensioni messe a disposizione per questa piattaforma, che possono essere scaricate dal sito ufficiale. L' estensione della quale ci serviremo si chiama "plugin_googlemap" scaricabile dal repository.

Installare il Plugin

Una volta effettuato il download del plugin GoogleMap, lo si installa come qualsiasi altra estensione; portarsi nell'area di amministrazione di Joomla!; dal menu superiore orizzontale selezionare: EstensioniInstalla / Disinstalla. Individuare il pacchetto compresso e premere il pulsante "Carica file e Installa". Attendere pochissimi minuti per l' installazione e si riceverà il messaggio che il plugin è stato installato correttamente. Ricordarsi di attivare il plugin appena installato; basta portarsi in EstensioniGestione Plugin; individuare "Google Maps" e fare click nella colonna corrispondente "Attivato".

Ottenere la Google Map api key

Il plugin "Googlemap" appena installato, non funzionerà mai se prima non viene generata  una "chiave" alfanumerica univoca; tale chiave la possiamo chiedere, manco a dirlo, a Google. All' url per la Google Maps Api Key, portarsi in fondo alla pagina; mettere il segno di spunta che attesta l' accettazione dei termini da parte di Google, inserire l' indirizzo del sito nel quale inserire la mappa e fare click sul pulsante "Generate Api Key".

Primo step Google Map Api Key
Primo step Google Map Api Key

Il passaggio successivo mostra immediatamente la chiave alfanumerica; prendere nota di tale codice (è possibile fare Copia/Incolla) e conservarlo da qualche parte; tornerà utile a breve.

Google Api Key
Google Api Key

Come si può vedere la chiave generata si riferisce solo e soltanto al nome dl sito inserito precedentemente. Immettere quella chiave in un altro sito genererà un errore ed è impossibile visualizzare la mappa desiderata.

Visualizzare un indirizzo nella mappa

Per poter visualizzare un indirizzo esatto nella pagina in cui inserire la mappa di Google, portarsi nel sito maps.google.it/maps. Nella barra di ricerca, nella parte alta della pagina, immettere il nome della via ed eventualmente la città, separati da una virgola.

maps google
Maps Google

Come mostrato nell'esempio, supponiamo di voler trovare "Via Costantino, Roma". Cliccando sul pulsante "Cerca sulle mappe" appare il marker con la via immessa. Se volessimo importare tale indirizzo nel nostro sito, abbiamo bisogno delle coordinate "Latitudine e Longitudine" per identificare il punto esatto.

Attraverso un semplicissimo javascript, possiamo venire in possesso delle coordinate. Nella barra degli indirizzi del browser, non nel campo di ricerca delle mappe, scrivere:

javascript:void(prompt('',gApplication.getMap().getCenter()));

Dare invio da tastiera. Al centro della pagina apparirà una piccola wizard la quale conterrà le coordinate che ci interessano. Nel nostro caso sono: (41.8571, 12.48597). Prendere nota anche di queste coordinate.

Configurare il Plugin Googlemap

Arrivati a questo punto, possiamo entrare nell'area di amministrazione di Joomla!; portarsi in EstensioniGestione plugin; fare click su "Plugin Google Maps". Il tab Parametri plugin contiene tutte le configurazioni possibili ed immaginabili per poter visualizzare la mappa in diversi modi. La prima cosa da fare è accertarsi se il suddetto plugin è attivo. Il primo radio button, infatti, mostra l' etichetta "Published". Se non è stato ancora fatto, attivare il radiobutton corrispondente a "SI".

Quello successivo a cui porre attenzione è contrassegnato dalla label "Google API key". Nel campo di testo corrispondente deve essere inserito il codice alfanumerico, generato precedentemente, nel sito Google Maps Api Key.

Un po più in basso abbiamo i campi: "Larghezza, Height, Latitude, Longitude". I primi due, molto semplici, stanno ad indicare le dimensioni desiderate per la mappa; gli altri due, invece, richiedono le coordinate che sono state reperite attraverso il semplice codice javascript. C'è da dire che se lasciamo invariati i valori di default di questi 4 campi, essi possono essere "sovrascritti" nel modo in cui vedremo tra poco. Il consiglio è sempre quello di fare tutte le prove con le diverse impostazioni messe a disposizione e vedere cosa succede nel frontend del sito.

Scrivere manualmente il codice della Google Map

Si crei un documento nuovo in Joomla!; prima di pubblicarlo scrivere il codice che dà la possibilità di vedere la mappa. Un semplice esempio di mappa potrebbe essere il seguente:

{mosmap width='400'|height='250'|lat='41.8571'|lon='12.48597'|zoom='16'|zoomType='Large'|zoomNew='0'|mapType='normal'|showMaptype='0'|overview='0'|text='Via Costantino - Roma'|tooltip='Via Costantino - Roma'|marker='0'|align='left'}

Il tutto va scritto su un unico rigo, senza premere la barra spaziatrice, pena il mancato funzionamento della mappa.

Come si può vedere, il plugin si avvale di una sorta di "codice proprietario" (apertura con la parentesi graffa e la parola "mosmap"). In questo caso "width" ed "height" sono stati cambiati rispetto a quelli impostati di default nella gestione plugin, vista poco fa. Stessa cosa per le coordinate: sono state anch' esse modificate.

Zoom='16' è la distanza tra chi guarda la mappa ed il punto da visualizzare; più è alto il nukero, più ingrandito si vedrà. mapType='normal' è la visualizzazione classica della mappa. Ci sono altre modalità quali: satellite, ibrida, hearth, terreno.

Text='testo da visualizzare nel tooltip': è la frase che vogliamo far apparire quando si preme sul marker. showMaptype='0': scelta se vedere o meno le altre modalità della mappa (satellite ecc...). Con tutto il codice appena visto, la mappa relativa è uguale alla seguente immagine, dopo aver fatto click sul marker:

Esempio di una mappa di google
Mappa Google di esempio

Se al posto del classico "cursore" per ingrandire o meno la mappa, posto sul lato sinistro, volessimo un tipo molto meno "invasivo", possiamo aggiungere lo "zoomType"; il codice precedente diventa:

{
mosmap width='400'|height='250'|lat='41.8571'|lon='12.48597'|zoom='16'|zoomType='Large'|zoomNew='0'|mapType='normal'|showMaptype='0'|overview='0'|text='Via Costantino - Roma'|tooltip='Via Costantino - Roma'|marker='0'|align='left'|zoomtype='3D-small'
}

E' bastato aggiungere "zoomtype='3D-small' affinchè la mappa precedente diventa come l' immagine di seguito:

mappa con zoomType 3D-small
Mappa Google con zoomType 3D-small

Per visualizzare una "scala di riferimento", nella parte bassa della mappa, è sufficente aggiungere:

showScale='1'
visualizzare la scala di riferimento sulla mappa
Visualizzare la scala di riferimento sulla mappa

Per spostarsi attraverso un piccolo quadrato, nella parte destra della mappa, per muoversi contemporaneamente sulla mappa intera,  non si deve fare altro che impostare a '1' un parametro visto precedentemente:

overview='1'
Overview sulla mappa di google
Overview sulla mappa di google

Per inserire un link, invece, all'interno del testo del tooltip, non si deve fare altro che scrivere il normale codice html per i link, senza apici singoli o doppi:

text='Via Costantino - Roma - <a href=LinkdiDestinazione title=testoTitle>Parola da linkare</a>'

Conclusioni

Adattare una pagina alle proprie esigenze credo sia diventato, con questa utile ed efficace estensione, ancora molto più divertente. Provare le diverse soluzioni messe a disposizione ed inserire nel proprio sito quella che più aggrada.