Come creare una mappa di Google con più pin in WordPress

L'aggiunta di una mappa al tuo sito Web può aiutare i tuoi visitatori a trovare facilmente le tue posizioni di attività o eventi. Se la tua azienda ha più di una posizione, potresti voler mostrarli tutti sulla stessa mappa. È qui che l'utilizzo di più pin su una mappa di Google potrebbe diventare utile.

Se il tuo sito Web è creato con Element, non dovrai fare molta seccatura nell'aggiunta di più pin sulla tua mappa di Google. Invece, puoi facilmente aggiungere quanti ne vuoi. Il processo è abbastanza semplice, anche per i principianti.

In questo post, tratteremo un tutorial dettagliato su come creare una mappa di Google con più pin in WordPress con Elementor. Ma prima, tratteremo alcune parole sul perché e quando dovresti usare Google Maps con più pin sui tuoi siti Web WordPress.

Perché utilizzare Google Maps con più pin sul tuo sito WordPress

L'uso di Google Maps con più pin può migliorare il tuo sito Web in molti modi. Non si tratta solo di mostrare luoghi. Può aiutare gli utenti a creare fiducia e rendere il tuo sito più utile perché possono facilmente trovare i tuoi negozi. Ecco alcuni principali motivi per cui dovresti considerarlo.

1. Mostra tutte le tue sedi in un unico posto

Se la tua azienda ha diverse filiali, negozi o uffici, più pin possono aiutarti a visualizzarli tutti su una singola mappa. Ciò rende più facile per i visitatori vedere ogni posizione a colpo d'occhio senza passare da mappe o pagine diverse.

2. Aiuta gli utenti a trovare il punto più vicino

Quando gli utenti vedono tutte le posizioni su una mappa, possono trovare rapidamente quello più vicino a loro. Questo può migliorare la loro esperienza e aiutarli a agire più velocemente, come visitare il tuo negozio o prenotare un appuntamento.

3. Risparmia tempo per i visitatori

Invece di elencare ogni indirizzo uno per uno in testo normale, puoi mostrarli visivamente con i pin. Questo consente di risparmiare tempo sia a te che ai tuoi visitatori. Rende anche il tuo sito più professionale e moderno.

4. Aumenta la SEO locale con i dati sulla posizione

Google Maps può aiutare con SEO locale del tuo sito Web. Quando aggiungi indirizzi reali alla tua mappa, racconta ai motori di ricerca sulle sedi delle tue attività. Questo può aiutare il tuo sito a comparire nei risultati di ricerca locali. Esplora come migliorare la SEO locale con HappyAddons.

5. Rendi il tuo sito più interattivo

Una mappa con più pin sembra più interattiva e dinamica del semplice testo. I visitatori possono ingrandire, fare clic sui pin ed esplorare la mappa. Questo rende il tuo sito più coinvolgente e intuitivo.

6. Perfetto per le imprese basate sui servizi o multipli

Se gestisci una catena di ristoranti, cliniche, negozi o punti di consegna, più pin aiutano a spiegare chiaramente la tua portata. Come già detto sopra, questo crea fiducia e aiuta gli utenti a scegliere il punto più vicino.

Prerequisiti per realizzare una mappa di Google con più pin con Element

Chiariamo una cosa chiara all'inizio. Elementor ha un widget integrato chiamato Google Map . Ma le sue caratteristiche sono molto limitate. Non è possibile aggiungere più pin alla mappa utilizzando questo widget predefinito. Quindi, per farlo, avrai bisogno di un aggiuntivo aggiuntivo.

Una grande opzione è HappyAddons . Offre un widget chiamato Google Maps Advanced , che consente di creare e aggiungere facilmente più pin alla tua mappa senza problemi.

Quindi, in totale, hai bisogno dei seguenti strumenti sul tuo sito per questo tutorial.

• Elemento
• HappyAddons
• HappyAddons Pro

HappyAddons Pro è richiesto perché la mappa Google avanzata è un widget premium del plug -in. Una volta installati e attivati sul tuo sito, inizia a seguire il tutorial come menzionato di seguito. Esplora tutti gli altri widget di HappyAddons.

Come creare una mappa di Google con più pin in WordPress: tutorial passo-passo

In questa sezione, spiegheremo il passo dopo passo come creare una mappa di Google con più pin in WordPress con plugin Elementator e HappyAddons. Decoreremo questa sezione anche con gli screenshot necessari, in modo da poter capire il processo completo. Continua a leggere!

Passaggio 01: Apri una pagina e trova il widget avanzato di Google Map

Apri il post o la pagina in cui si desidera creare la mappa di Google con più pin. Trova il widget di Advance Google Map sul pannello Element. Trascina e lascialo cadere sulla tela elementare.

Passaggio 02: Ottieni la chiave API di Google

Dopo aver aggiunto il widget alla tela, ti verrà chiesto di configurare le credenziali per la visualizzazione della mappa di Google. Per iniziare questo, fare clic sull'opzione Credenziali nella sezione Impostazioni generali sul pannello.

Sarai portato alla sezione Credenziali di HappyAddons nel backend del sito Web. Trova l'opzione Google Map . Quindi, premi l'opzione Ottieni la chiave API .

Verrai alla pagina di Google Cloud.

Ora, devi trovare "Maps JavaScript API". Per questo, digita maps JavaScript API nella casella di ricerca. Una volta visualizzata l'opzione, fare clic su di esso .

Dopo essere arrivato alla pagina API JavaScript delle mappe, abilita l'opzione .

Premere il pulsante ACCET e CONTINUA . Prima di allora, puoi selezionare il tuo paese. L'abbiamo offuscato per il nostro caso.

La chiave API di Google non è tecnicamente gratuita. Devi completare le informazioni di fatturazione per ottenere l'API.

Nota (come è gratuito): sebbene non sia tecnicamente gratuito, riceverai token equivalenti a $ 200 al mese a T non costi . Con questo token, la tua mappa di Google può essere caricata o visualizzata fino a 28.000 volte . Solo se questo limite di vista/carico viene incrociata, la tua carta verrà addebitata.

Dopodiché, ti verrà fornito un popup. Devi fornire alcune informazioni sulla tua attività in cui questa mappa verrà utilizzata. Una volta fatto, fare clic sul pulsante Invia nell'angolo in basso a destra del popup.

La chiave API di Google Map apparirà immediatamente sullo schermo con un nuovo popup. Copia la chiave API .

Torna all'opzione chiave API di HappyAddons Google e incolla il tuo codice lì. Premi il pulsante Salva Modifiche alla fine.

Ora, vieni alla tua tela elementare e aggiornalo/ricaricala. La mappa di Google apparirà sulla tela.

Controlla come creare una sequenza temporale in WordPress con Element.

Passaggio 03: aggiungi più pin alla mappa

Per impostazione predefinita, sulla mappa viene visualizzato un solo pin. Per aggiungere e visualizzare più pin alla mappa, espandere la sezione marcatore della mappa sul pannello.

Dopo l'espansione della sezione Marker Map, è possibile aggiungere tutti i pin che si desidera facendo clic sul pulsante + Aggiungi elemento .

Ora, posizionando i valori per latitudine e longitudine, è possibile impostare con precisione i pin per ogni luogo.

Passaggio 04: configurare le impostazioni della mappa

Allo stesso modo, espandere la sezione Impostazioni della mappa .

Troverai molte opzioni in questa sezione.

Ora, esplori gentilmente ogni opzione attivando e fuori per vedere come funzionano in modo da poter finalmente stare con quelli che si adattano alle esigenze di design.

Scopri come creare una galleria di immagini a scorrimento automatico in WordPress.

Passaggio 05: stilizzare il widget avanzato di Google Map

Quando vengono eseguite tutte le impostazioni e le parti del contenuto, vieni alla scheda Style . Da qui puoi personalizzare l'altezza, la larghezza, il tipo di bordo, il raggio del bordo e altre opzioni.

Allo stesso modo, espandi anche altre opzioni e fai le personalizzazioni necessarie mentre si desidera cambiare l'aspetto dei pin.

Passaggio 06: Anteprima il design

Quando il design è terminato, prima di pubblicarlo online, visualizzare in anteprima per vedere se è richiesta una correzione o una modifica. Puoi vedere che il widget funziona bene alla nostra estremità nel video collegato di seguito.

Pertanto, puoi creare una mappa di Google con più pin in WordPress con Element.

Suggerimenti avanzati per Google Map con più pin

Dopo aver aggiunto più pin alla tua mappa di Google, ci sono più cose che puoi fare per far funzionare meglio la mappa per i tuoi visitatori e il tuo sito web. Questi suggerimenti avanzati ti aiuteranno a rendere la tua mappa più professionale, migliorare l'esperienza dell'utente e persino supportare i tuoi sforzi SEO locali.

1. Usa immagini personalizzate anziché icone

Invece del pin rosso predefinito, prova a utilizzare icone o immagini personalizzate per ogni posizione. HappyAddons ti consente di farlo dalla scheda Contenuto> Sezione Marker Map. Le immagini e le icone personalizzate possono rendere la tua mappa più visivamente chiara e attraente.

2. Impostazioni zoom e centrali

Regola il livello di zoom e il centro della mappa per mostrare correttamente tutti i pin. Se alcuni perni sono distanti, assicurati che il livello di zoom sia abbastanza largo in modo che tutti siano visibili quando la mappa si carica. Ciò offre agli utenti una panoramica completa senza dover spostare manualmente la mappa.

3. Rendilo adatto ai dispositivi mobili

Controlla sempre come appare la tua mappa sui dispositivi mobili. Assicurati che si caricano velocemente, i pin sono cliccabili e le caselle di informazioni sono leggibili su piccoli schermi. Una mappa che funziona bene sia su desktop che mobile, manterrà felici più utenti.

4. Incorporare le mappe sulle pagine di contatto o di posizione

Non lasciare la tua mappa su una pagina. Puoi riutilizzare la stessa mappa incorporandola su altre pagine come "contattaci", "le nostre sedi" o "visitaci". Questo aiuta gli utenti a trovare il posto giusto ovunque si trovino sul tuo sito.

Scopri come creare una pagina Web dinamica in WordPress con Element.

Conclusione

Fare una mappa di Google con più pin potrebbe essere un semplice passaggio o parte del tuo web design, ma può avere un'impressione di lunga durata. Non solo può aiutare i visitatori a trovare le tue sedi, ma anche a migliorare il punteggio SEO locale e rendere il tuo sito Web più professionale.

Con l'aiuto dei plug -in Element e HappyAddons, puoi aggiungerli facilmente al tuo sito Web senza molto seccatura. È così semplice che anche i principianti possono farlo solo seguendo il tutorial coperto sopra. Se hai ancora domande senza risposta, facci sapere attraverso la casella dei commenti qui sotto.

Ti torneremo molto presto con risposte praticabili. Grazie per essere stato con noi fino alla fine. Facci sapere quale argomento vuoi che copriamo nel prossimo post.