1. Ottieni una chiave API di Google Maps

Ogni volta che utilizzi le API di Google Maps, se il tuo dominio è stato creato dopo il 22 giugno 2016, devi includere una chiave per convalidare la tua richiesta.
Ottieni una chiave e abilita l'API: https://developers.google.com/maps/documentation/javascript/get-api-key

Ulteriori informazioni: https://developers.google.com/maps/documentation/javascript/usage?hl=it

Il primo passo è creare un progetto e poi digitarne il nome.

Se voglio consentire tutte le richieste da mydomain, allora il modello da seguire è *.joomunited.com/*
Se vuoi consentire solo un singolo dominio, ad esempio mydomain.com, allora il modello sarà joomunited.com/*

In un ambiente localhost, puoi inserire qualsiasi chiave valida e funzionerà senza alcun riferimento al dominio.

Viene quindi generata la chiave API, che è la chiave che devi copiare per aggiungere My Maps location.

Aggiungi la chiave alla My Maps Location.

Dalla Componenti > My Maps Location > Opzioni , puoi aggiungere una chiave nella configurazione.

Incolla la chiave.

Riassunto passo dopo passo:

Quindi i passaggi che seguo sono

• Vai alla Google API Console
• Crea o seleziona un progetto
• Fare clic su Continua per abilitare l'API e tutti i servizi correlati
• Nella pagina Credenziali, ottieni una chiave del browser (e imposta le credenziali API)
• Per prevenire il furto di quote, proteggi la tua chiave API seguendo queste best practice

2. Gestire le categorie di posizione

Le posizioni sono classificate in categorie. Queste categorie possono essere visualizzate come filtri nel frontend o utilizzate come parametri predefiniti in una voce di menu per caricare alcune posizioni categorizzate.
 

Se hai molte posizioni, ti consigliamo di utilizzare le categorie. Puoi creare categorie e sottocategorie.
Per creare una categoria, vai su " My Maps location > "Categoria" e clicca su "Nuovo".

Quindi dalla schermata della categoria dovrai aggiungere un titolo e una categoria padre nel caso in cui desideri creare una sottocategoria

È anche possibile definire un marcatore predefinito per la posizione nella categoria utilizzando la scheda Selezione marcatore

3. Crea una posizione

Per creare una posizione, vai su My Maps location > Posizioni > Nuova

Ci sono 3 campi obbligatori:

• Nome della posizione
• Categoria della posizione
• Dettagli sulla posizione (indirizzo)      

Per l'indirizzo hai 3 soluzioni per aggiungerlo:

• Utilizzare il campo di ricerca (consigliato)
• Naviga sulla mappa e usa il cursore per indicare una posizione
• Inserisci un indirizzo (deve essere valido per Google Maps)

Per aggiungere una posizione tramite il motore di ricerca, digita il nome del luogo che desideri aggiungere.

Una volta effettuata la selezione, i campi di latitudine e longitudine verranno compilati automaticamente. My Maps è anche integrato con Google Places! Questo significa che puoi cercare un negozio o qualsiasi altra cosa registrata su Google Maps: il nostro componente recupererà tutte le informazioni sul luogo.

Puoi anche spostarti sulla mappa e posizionare direttamente un marcatore, il risultato sarà lo stesso e otterrai una latitudine e una longitudine compilate automaticamente.

Fai attenzione al campo indirizzo e al codice postale: se li compili manualmente, devono corrispondere a un indirizzo noto su Google Maps.

Tutte le altre informazioni sulla posizione (descrizione, orari,...) vengono visualizzate nella vista dettagliata della posizione.

Il link di contatto nell'edizione dei dettagli della posizione offre la possibilità di aggiungere un link di contatto, un'azione mailto o un URL per posizione. Sul frontend sarà presente un pulsante di contatto che aprirà l'URL o eseguirà l'azione mailto.

4. Altre informazioni sulla posizione

In ogni posizione puoi aggiungere un'immagine e un marcatore. 

• Immagine della posizione: l'immagine verrà visualizzata come miniatura nella descrizione comandi della posizione e in dimensioni maggiori nella pagina dei dettagli della posizione.
• Usa l'icona della categoria: usa l'icona che hai inserito nel campo categoria delle posizioni della mia mappa
• Sfondo del pennarello: scegli il colore per lo sfondo del pennarello
• Il marcatore verrà visualizzato sulla mappa come icona di posizione. My Maps Location .
• Usa un collegamento personalizzato sostituirà il collegamento ai dettagli della posizione con un URL personalizzato.

My Maps location utilizza la funzionalità multilingue nativa di Joomla. È possibile definire una lingua nelle categorie di posizione e nelle posizioni. Al cambio di lingua, le posizioni verranno filtrate come qualsiasi altro contenuto Joomla per visualizzare il contenuto approvato nella lingua.

Il campo di descrizione della posizione è uno dei più importanti.
Verrà visualizzato nella pagina dei dettagli della posizione e, a seconda del tema, come testo introduttivo della posizione nei risultati di ricerca. Ancora più importante, la descrizione è un editor WYSIWYG con tutti i plugin caricati al suo interno, il che significa che puoi inserire qualsiasi cosa tu voglia (immagini, video...).

Ecco il testo introduttivo visualizzato nei risultati della ricerca della posizione.

Il campo tag utilizza lo stesso sistema di tag di Joomla. È possibile aggiungere tag e sottotag e caricarli nel frontend come filtro. Per gestire tutti i tag, è sufficiente caricare il componente tag di Joomla: Menu Componente > Tag.
Nel frontend, a seconda della configurazione, i tag possono essere visualizzati come caselle di controllo (come mostrato di seguito) o come un elenco a discesa.

My Maps Location ha campi aggiuntivi per compilare le meta-informazioni (per i motori di ricerca). Questi campi vengono caricati nella pagina dei dettagli della posizione.

5. Visualizza le posizioni sul frontend

Per visualizzare le tue posizioni sul frontend puoi usare:

• Un menu per visualizzare il motore di ricerca della posizione, una singola posizione o una categoria di posizioni
• Un modulo per visualizzare un campo di ricerca o selezionare un insieme di posizioni
• Un pulsante dell'editor per visualizzare posizioni singole o multiple in qualsiasi editor

Carica le posizioni da un menu

Dal menu di gestione di Joomla, aggiungi un elemento e seleziona come tipo "Ricerca e visualizzazione della posizione". Verrà visualizzato il motore di ricerca della posizione con i relativi filtri.
Seleziona "Visualizzazione dettagliata della posizione" per visualizzare una singola posizione predefinita.

Dalla scheda principale del menu è possibile impostare:

• Inserisci indirizzo: puoi forzare la visualizzazione di un indirizzo predefinito al caricamento della pagina. Può essere lasciato vuoto
• Distanza: la distanza per la ricerca del blocco, facendo riferimento all'indirizzo sopra. Può essere lasciato a -1 (predefinito)
• Categoria: carica una categoria specifica di posizione
• Limite di ricerca: limita il numero di risultati di ricerca. 10 restituirà solo i primi 10 risultati nella ricerca per posizione
• Ordinamento: ordina i risultati della ricerca per Data, Titolo, Distanza (predefinito)

Quindi nella scheda del menu My Maps Location puoi impostare:

• Seleziona Componente: My Maps Location o tutte le integrazioni di terze parti come K2, Jomsocial ...
• ID categoria predefinito (estensioni di terze parti): categoria predefinita da caricare quando viene utilizzata un'estensione di terze parti, come K2, Hikashop o Adsmanager, ID elenco CB per il community builder
• Posizioni delle categorie secondarie: visualizza anche come risultati di ricerca le posizioni delle sottocategorie, non solo quella selezionata sopra
• Tema: seleziona uno dei 3 temi predefiniti, a larghezza intera e barra laterale del tema di ricerca e visualizzazione dei risultati disponibile per la voce di menu
• Fornitore di mappe: seleziona Google Maps, Bing Maps, Mapbox, OpenStreetMap, Baidu o Mapquest per personalizzare le tue mappe
• Abilita tag di ricerca : consente di effettuare query di ricerca utilizzando i nomi dei tag di posizione
• Disegni: a seconda della sorgente della mappa sono disponibili diversi tipi e colori di mappa
• Livello mappa: aggiungi alcuni dati (livelli) alle tue mappe. Sono disponibili i livelli KML, Traffico, Transito e Bici.
• URL del livello di Google Map: utilizza il livello di dati per memorizzare i tuoi dati personalizzati o per visualizzare i dati GeoJSON su una mappa di Google
• Tipo di Bing Maps: se Bing Maps è il tuo fornitore di mappe, seleziona l'aspetto e i dati di Bing Maps
• Tipo di OpenStreetMap: se OpenStreetMap è il tuo fornitore di mappe, puoi aggiungere alcuni dati (livelli) alle tue mappe
• Suggerimento sulla posizione: al caricamento della mappa, apre automaticamente il suggerimento sulla posizione dopo la ricerca della posizione
• Zoom mappa: definisci un livello di zoom predefinito sulla mappa
• Opzioni di larghezza e altezza dei risultati della mappa e della ricerca

Visualizzazione frontend basata sul tema

Risultato per una ricerca di una singola posizione visualizzata:

Visualizza le posizioni utilizzando un modulo

My maps location è dotata di 2 moduli per le posizioni native + altri per l'integrazione di terze parti (come un modulo per visualizzare le posizioni degli elementi K2)

Il modulo Mappa consente di visualizzare le posizioni con gli stessi filtri del menu, ma in una posizione specifica del modulo. Le posizioni verranno visualizzate come Mappa o Elenco. È possibile selezionare un insieme di posizioni o categorie di posizioni.

My Maps Location Map mostrerà un motore di ricerca con alcuni filtri come opzione, come la larghezza della mappa o il componente in cui verrà cercata la posizione (ad esempio, cerca solo la posizione K2).

Modulo di visualizzazione sul frontend:

Visualizza le posizioni utilizzando un pulsante dell'editor

Il pulsante dell'editor verrà caricato nell'editor di Joomla (solitamente negli articoli o nei moduli HTML personalizzati). Vedrai il pulsante nella parte inferiore dell'editor.
Cliccando, vedrai un riquadro luminoso che ti permetterà di selezionare una o più posizioni aggiunte in precedenza.

Puoi quindi selezionare una o più località e premere il pulsante per aggiungerle al tuo articolo. Se non specifichi alcun livello di zoom, la posizione verrà caricata automaticamente in base alla tua posizione.
Il codice tag che vedrai nel tuo editor WYSIWYG sarà simile a questo modello: {mymaplocations mapid width height}

Esempio: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} Questo codice visualizzerà una mappa con ID posizione=1, larghezza 58%, altezza 400px, zoom 10x e tipo Google. Utilizzare la virgola per aggiungere più di una posizione in una mappa. Esempio: {mymaplocation id=1 width=58% height=400px zoom=10 type=google} ID posizione = 1, 2, 3.