Vuoi scoprire come creare una mappa con più pin utilizzando Jet Elements?
Elementi a getto offre un widget chiamato Mappa avanzata. A differenza del widget Google Mappe nativeElementor che supporta solo una posizione, Jet Elements Advanced Map Widget ti consente di creare una mappa con più pin.
Per utilizzare questo widget, devi prima integrare Jet Elements con Google Mappe utilizzando una chiave API.
Il widget della mappa avanzata di Jet Elements è molto utile se hai un'attività con più filiali in città e desideri creare una mappa che mostri la posizione delle tue filiali. Questo widget è utile anche per creare qualcosa come una mappa delle attrazioni turistiche di una città.
Ecco come utilizzare questo widget.
Passaggio 1: integra JetElements con Google Maps
Come accennato, è necessaria una chiave API Google Mappe per integrare Jet Elements con Google Maps. Puoi ottenere una chiave API tramite la console API di Google.
Quindi visita Console dell'API di Google e accedi con il tuo account Google. Se non hai ancora un progetto, creane uno nuovo cliccando sul menu a tendina in alto e clicca NUOVO PROGETTO sul popup che appare.
Dai un nome al tuo progetto e clicca sul pulsante CREATE .
Una volta creato il tuo nuovo progetto, selezionalo tramite il menu a discesa nella parte superiore della dashboard della Console API di Google, quindi fai clic su Biblioteca sul pannello di sinistra.
Google divide l'API di Google Maps in 17 tipi. È necessario abilitare le API richieste dal widget Mappa avanzata Jet Elements per utilizzare questo widget. Crocoblock, lo sviluppatore di Jet Elements, non fornisce informazioni dettagliate sulle API richieste. Sulla base della nostra esperienza, abbiamo abilitato le seguenti API:
- API delle indicazioni stradali
- API di geocodifica
- Mappe JavaScript API
- API Places
Puoi cliccare sul link MOSTRA TUTTO nella sezione Cartoline d'auguri per vederli tutti.
Per attivare un'API, selezionare l'API interessata (cliccandoci sopra) e cliccare sul pulsante ATTIVARE.
Dopo aver completato l'abilitazione delle API richieste, torna alla dashboard principale della console API di Google e fai clic su Identifiers sul pannello di sinistra. Fare clic sul pulsante Crea credenziali e seleziona Chiave API. Copia la chiave API nel popup che appare.
Successivamente, accedi alla dashboard di WordPress e vai a JetPlugins – > Impostazioni JetElements.
Fare clic sulla scheda integrazioni e incolla la tua chiave API sul campo Chiave API di Google Maps nella sezione Google Maps. Attiva l'opzione Chiave API di geocodifica separata e incollare lo stesso codice su Chiave API di geocodifica.
Passaggio 2: creare la mappa
Una volta che Jet Elements e Google Maps sono stati integrati correttamente, puoi iniziare a creare la mappa. Per fare ciò, crea una nuova pagina (Pagine -> Aggiungi) o un nuovo elemento (Articoli – > Aggiungi) e modificarlo con Elementor.
Nell'editore Elementor, imposta il layout prima di iniziare. Per fare ciò, apri il pannello Impostazioni pagina facendo clic sull'icona a forma di ingranaggio nell'angolo in basso a sinistra. Seleziona un layout dal menu a discesa sotto l'opzione impostazioni.
Aggiungi una nuova sezione facendo clic sull'icona più nella casella di modifica di Elementor e trascina il widget Mappa avanzata nell'area di disegno.
Imposta il centro della mappa sulla tua città (o qualsiasi regione a seconda della mappa che desideri creare). Imposta anche lo zoom iniziale.
aperto Google Maps e trova la prima posizione che vuoi aggiungere alla mappa e copia il suo indirizzo.
Torna all'editor di Elementor e apri la sezione Spille. Fai clic sulla posizione esistente e sostituisci l'indirizzo con l'indirizzo che hai appena copiato. Aggiungi anche la descrizione della posizione sul campo Descrizione pin.
Fare clic sul pulsante AGGIUNGI UN ELEMENTO posizionato un po' più in basso per aggiungere un altro indirizzo.
Per cambiare lo stile della tua mappa, così come l'altezza, puoi aprire la sezione Stile mappa.
NOTA: Se la mappa non viene caricata dopo aver trascinato il widget Mappa avanzata nell'editor di Elementor e vedi un messaggio "Solo per scopi di sviluppo", assicurati di abilitare la fatturazione di Google Cloud. La nuova politica di Google richiede agli sviluppatori di abilitare l'account di fatturazione.
Ottieni subito Elementor Pro!!!
Conclusione
Ecco ! Questo è tutto per questo articolo che mostra come creare una mappa con più pin utilizzando Jet Elements. Se hai dei dubbi su come arrivarci, faglielo sapere nel commentaires.
Tuttavia, puoi anche consultare le nostre risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress o quello acceso Divi: il miglior tema WordPress di tutti i tempi.
Ma nel frattempo, condividi questo articolo sui tuoi diversi social network.
...
