Inserire una mappa di Google in Joomla! con localizzazione degli 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:

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 EstensioniInstalla/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.

menu-componente-gmap
Componente Googlemap dal menu di amministrazione

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

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.

configurazione google map
Configurazione Google Map

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":

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

tab-general
Tab general

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.

tab-Extra-parameters
Tab extra parameters

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.

google-dettagli
Dettagli compilazione utente

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.

google-by-address
Google by address

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 "Transfer 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.

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.

© www.extrowebsite.com - Grafica, layout, articoli e guide sono di esclusiva proprietà del webmaster - Tutti i diritti riservati