Creare una mappa di Google in Joomla! 1.5 con visualizzazione della posizione utenti

Come anticipato nella intro dell'articolo, il Componente GoogleMap Light è liberamente scaricabile dal sito del produttore. Tra l'altro è anche a disposizione, ma a pagamento, anche una evoluzione dello stesso Componente che ci chiama GoogleMap Pro con caratteristiche avanzate rispetto al Light. Vedendo il suddetto Componente in azione, posso asserire che tanto "Light" non è in quanto, attraverso la sua configurazione, intuitiva e molto semplice, il risultato è molto soddisfacente. Alcune peculiarità di GoogleMap sono:

• Possibilità di avere infinite localizzazioni sulla mappa;
• Inserire varie informazioni collegate al marker (indirizzo, immagine, descrizione ecc..);
• Usare marker personalizzati;
• Possibilità di mostrare, nella pagina di frontend, il routeplanning ecc...

Download ed installazione di GoogleMap Light

Portarsi nel sito del produttore e procedere con il Download del Componente. Dopo aver premuto sul pulsante "Download", appare la pagina nella quale ci sono, in ordine, prima i 2 Componenti "Pro"; il terzo è quello che fa al nostro caso. Sul nostro desktop avremo la cartella "com_googlelight.zip".

Loggarsi nell'area di amministrazione di Joomla! con le credenziali di Super Administrator e, nel menu in alto, da Estensioni → Installa/disinstalla, procedere con l'installazione del Componente, come si è soliti fare per qualsiasi altra estensione di Joomla! Dopo aver atteso qualche secondo, leggeremo a video il messaggio di buon fine della installazione. A conferma di quanto appena scritto, nel menu superiore orizzontale di Joomla!, passare con il mouse sulla voce "Componenti" ed apparirà una sottovoce: Googlemap.

Come è possibile vedere dall'immagine qui accanto, sono presenti 5 sottovoci:

• Manage Destinations
• Manage Categories
• CSS
• Configuration
• Information

L'ultima voce "Information" non fa parte della configurazione della mappa ma contiene alcuni link al sito dello sviluppatore.

Configurazione del Componente GoogleMap Light

Cominciamo con il settaggio dei parametri del Componente e precisamente dalla configurazione. Dalla voce di menu di amministrazione "Componenti" Googlemap, selezionare "Configuration". Possiamo notare che adesso le voci ci vengono presentate sotto forma di tabs. Cliccare su Configuration ed abbiamo 2 textarea da compilare:

1. Homepage
2. Google API

Nella prima va inserito il nome del sito nel quale dovrà apparire la mappa. Nella seconda il codice delle API di Google. Sul lato destro della seconda textarea è presente il link che porta direttamente al sito da cui poter prendere la chiave alfanumerica.

Salvare quanto appena fatto, dal pulsante posto in alto a destra.

Creare e configurare le Categorie

Il Componente GoogleMap Light prevede la creazione di Categorie alle quali far appartenere determinate informazioni (leggi gli utenti che saranno presenti sulla mappa). Per fare questo, fare clic sul tab Manage Categories. Sicuramente ne troveremo una di default già compilata. Possiamo selezionarla dal checkbox posto alla sua sinistra e premere il pulsante "Elimina" in alto a destra, sulla barra degli strumenti di Joomla! 

Poniamo il caso che ci stiamo occupando della creazione di un sito per una organizzazione di volontari e si vorrebbero visualizzare i loro contatti (email e numero di telefono) sulla mappa. Il primo nome che ci verrebbe in mente, senza pensarci troppo, potrebbe essere quello di assegnare "Volontari" alla nuova categoria. Dal pulsante grafico in alto a destra, premere "Nuovo". Vediamo apparire una pagina composta da due tab:

1. General
2. Extra parameters

Ognuno dei due tab prevede la compilazione di alcuni campi; operazione molto semplice. Vediamo nell'ordine prima il campo "General":

• Nome: il nome da assegnare alla categoria;
• SetCenter: definisce il punto in cui la mappa verrà visualizzata nel frontend. Questi dati sono da inserire ed il campo non può essere lasciato vuoto. Se, per esempio, vogliamo la mappa che mostri il centro Italia, potremmo inserire le coordinate di Roma. Approssimativamente esse sono: 41.8,12.4. Vanno scritte in questo modo, separate da una virgola e senza spazi;
• Width: largezza della mappa. Possibili valori accettati: px o percentuale;
• Height: altezza della mappa. Anche in questo caso px oppure percentuale;
• Zoomlevel: visualizzazione della mappa. Possibili valori da scegliere tra 1 e 15;
• Pre Description: un testo da scrivere prima della mappa da frontend;
• After Description: un testo che apparirebbe al termine della mappa;
• Published: Si / No. Ovviamente si.

Salvare dal pulsante in alto a destra. Di seguito l'immagine che riporta una parte della compilazione del tab appena analizzato:

Configurare il tab Extra parameters

Anche in questo caso sono da settare alcune impostazioni per quanto riguarda la visualizzazione finale della mappa nel sito. Vediamole nel dettaglio.

• Marker picture: visualizzare o meno l'immagine associata ad un utente;
• Marker address: visualizzare o meno il testo dell'indirizzo sulla mappa;
• Marker text: visualizzare o no il testo quando si fa clic sul marker;
• Marker popup onload: impostare o meno la visualizzazione della popup del marker al caricamento della pagina;
• Routeplanning: se impostato su si è possibile cercare, al di sotto della mappa, una determinata destinazione attraverso indicazioni stradali;
• Routeplanning Print: l'utente avrà la possibilità di stampare le indicazioni stradali se l'opzione immediatamente sopra è attivata;
• Map Controls: permette di scegliere tra una visualizzazione rimpicciolita o ingrandita della mappa;
• Map Scale Control: aggiunge una scala nella parte inferiore della mappa. Potrebbe essere utile per valutare la distanza tra due punti;
• Map Scroll Zoom: abilita l'utente ad utilizzare lo zoom mediante il mouse;
• Enable Continuous Zoom: aumenta e diminuisce la visualizzazione in maniera gradevole grazie a questa impostazione;
• Street view: consente di vedere esattamente le strade come una immagine reale. Lo street view è possibile ottenerlo mediante lo spostamento del marker. NOTA BENE: tale impostazione è possibile averla solo sulle zone blu della mappa e ricordarsi di ingrandirla quando si attiva questa impostazione;
• Map Type Control: possibilità di aprire la pagina con la visualizzazione normale, satellite o ibrida;
• Adsense: se abilitato, l'utente può effettuare una ricerca attraverso un form che appare in basso a sinistra. Da attivare solo se dispone di un account Adsense di Google;
• Adsafe: funzionalità in Google Map. Integrazione di AdSense per guadagnare anche con Google Map. Se impostato su "Alto" non verranno visualizzati annunci a differenza della impostazione "Off";
• Adsense Client: l'ID dell'utente che è stato creato da Google quando si effettua la ricerca;
• Adsense Channel: il canale Adsense che è stato impostato per la ricerca.

Impostare i CSS

Dal tab "CSS" è possibile apportare modifiche direttamente nell'area di amministrazione di Joomla!, invece di fare il download del file interessato e riportarlo nella cartella in remoto. Poter scrivere direttamente via browser le modifiche CSS consente di avere un controllo più immediato e veloce. Infatti, subito dopo aver salvato, è sufficente aggiornare la pagina di frontend per rendersi conto di quanto fatto. Se non dovessero soddisfare, ripetere lo stesso passaggio.

Creare gli utenti sulla mappa

Giunti a questo punto è possibile creare gli utenti o, come indicato nel primo tab, creare le Destinazioni. L'operazione da compiere è molto semplice in quanto si tratta di creare tutti i "markers" corrispondenti ad una data localizzazione. Fare clic sul tab "Manage Destinations" e poi sul pulsante grafico in alto a destra "Nuovo". Anche in questo caso si devono compilare dei campi che, a differenza dei precedenti (Extra parameters), sono più specifici. Vediamoli.

• Name: il nome che si leggerà nel tooltip quando si cliccherà sul marker;
• Latitude: inserire la latitudine;
• Longitude: inserire la longitudine;
• Text of destination: il testo che apparirà nel tooltip;
• Picture: permette di visualizzare una immagine;
• Category: a quale categoria deve appartenere il nostro utente;
• Icon: quale marker visualizzare sulla mappa; di default ce ne sono 2;
• Route Accepted: Si / No. Scegliere se questa destinazione deve essere visualizzata nella lista delle indicazioni stradali;
• Published: Pubblicato sulla mappa. Si / No.

Immediatamente a destra del form appena visto, sono presenti due pannelli a tab scorrevoli:

1. Google by address
2. Google by map

Se si volesse visualizzare l'indirizzo di un utente, sulla mappa, non si deve fare altro che compilare i 3 campi presenti. Premendo il pulsante "Tranfer Coordinates" vengono popolati immediatamente i due dei Dettagli in base all'indirizzo immesso.

Se, invece, si volesse fare la stessa cosa ma in maniera "visuale", allora si deve espandere il tab sottostante: Google by map. Spostare con il mouse il marker sulla mappa; nella zona gialla soprastante si aggiornano contestualmente anche le coordinate. Una volta scelta la posizione, premere il pulsante "Tranfer Coordinates" per popolare sempre i due campi dedicati alla Longitudine e Latitudine dei Dettagli. Molto semplice.

Creare una voce di menu da associare a GoogleMap Light

Una volta fatte tutte le impostazioni e create Categorie ed Utenti, non resta che visualizzare la pagina con la mappa. Visualizzarla nel frontend è molto semplice in quanto basta creare una voce di menu, come avviene per gli articoli.

• Individuare il menu nel quale far apparire il link;
• scegliere "Nuovo" dal pulsante in alto a destra;
• in "Seleziona tipo voce di menu" fare clic su "Googlemap";
• selezionare l'unica sotto-voce: Standard Google Layout;
• scrivere Titolo ed Alias e nella parte destra, nel tab "Parametri - Standard" accertarsi di selezionare la corretta Categoria, nel caso ce ne fosse più di una.

Salvare il tutto ed aggiornare il frontend. Dovrebbe apparire la mappa centrata in base alle nostre coordinate iniziali (Set Center) e tutti i markers creati.

Conclusioni

A seconda dell'esigenza che se ne ha, come si è potuto vedere, il Componente GoogleMap Light è molto flessibile e personalizzabile in maniera molto semplice. Ovviamente questo ampio articolo potrebbe essere solo l'inizio per conoscere meglio, e più a fondo, l'estensione in oggetto.