Come aggiungere Google Maps nel sito WordPress (il modo più semplice)

L'aggiunta di una mappa Google nel tuo sito web non solo rende facile per i visitatori trovare la sede della tua attività, ma aggiunge anche un tocco di professionalità e funzionalità. 

Ma come aggiungere Google Maps nel sito WordPress? 🤔

Non preoccuparti! Mostreremo il metodo più semplice:

• Utilizzando un plugin WordPress (ElementsKit)

Potresti chiedere, perché ElementsKit? 

Bene, offre un widget Google Map che puoi inserire semplicemente trascinare e rilasciare. Inoltre, otterrai enormi opzioni di personalizzazione per personalizzare la tua mappa Google in modo che appaia esattamente come desideri. Quindi, non è necessario essere un mago della programmazione per realizzarlo!

Immergiamoci! 🥳

Cos'è Google Maps?

Google Maps è un servizio di mappatura web sviluppato da Google per visualizzare posizioni e indicazioni precise per qualsiasi indirizzo 🗺️

Google Maps è un servizio di mappatura web sviluppato da Google per visualizzare posizioni e indicazioni precise per qualsiasi indirizzo Puoi vedere immagini satellitari, mappe stradali e Vista panoramica a 360° di strade. Inoltre, Google Maps offre anche condizioni del traffico in tempo reale e migliore pianificazione del percorso per viaggiare a piedi, in macchina, in bicicletta o con i mezzi pubblici. 🛣️🚦

Allora come funziona Google Maps? Bene, Google Maps funziona principalmente utilizzando a combinazione completa di immagini satellitari e terrestri. Allo stesso tempo, raccoglie continuamente il feedback degli utenti per procedere con un processo di validazione e rimane aggiornato con il costante cambiamento condizioni in tempo reale. ⏳

Come aggiungere Google Maps al sito WordPress in 5 passaggi 

Il modo più semplice per integrare Google Maps in WordPress è utilizzare un plugin WordPress. È anche possibile l'integrazione manuale, ma è difficile ottenere tutte le funzionalità e le opzioni di personalizzazione senza un plug-in.

Per aggiungere Google Maps al tuo sito WordPress, il Plug-in WordPress ElemenetKit è la scelta migliore. È un componente aggiuntivo Elementor all-in-one definitivo per il sito Web WordPress che ha già raggiunto il Oltre 1 milione di traguardi di installazione attivi. 

Otterrete 85+ widget Elementor personalizzati insieme alla mappa di Google. Con più tipi di stili mappa, troverai numerose opzioni di personalizzazione che si adatteranno sicuramente alle tue preferenze, al tipo di sito web e alle esigenze degli utenti.

Esploriamo il semplice 5 passaggi su come aggiungere Google Maps nel sito WordPress utilizzando il plugin ElementsKit! 🙌 

✨✨ Requisiti 
✅ Elementore – Scarica Elementor
✅ ElementsKit Lite – Scarica ElementsKit Lite
✅ ElementsKit Pro – Ottieni ElementsKit Pro
✅ API di Google Map – Ottieni l'API di Google Map

Passaggio 1: installa il plug-in ElementsKit 

Il processo di installazione di ElementsKit è simile a qualsiasi altra installazione di plugin in WordPress. Puoi installarlo e attivarlo direttamente oppure caricare il file zip del plugin, quindi installare e attivare la licenza. Per installare ElementsKit, 

• Vai alla dashboard di WordPress 
• Clicca su Plugin ➔ “Aggiungi nuovo” 
• Scarica il Plug-in WordPress ElementsKit Comprimi il file e carica il file 
• Oppure cerca Componente aggiuntivo ElementetsKit  nella casella di ricerca
• Quindi fare clic su "Installare"
• Una volta installato, fare clic su "Attivare"

🎯 Poiché la funzione Google Map è a widget professionale di ElementsKit, è necessario acquistare un pacchetto premium e attivare la licenza. 

👉 Ecco la guida alla documentazione su come acquistare e attivare la licenza ElementsKit Pro. 

Passaggio 2: genera una chiave API di Google Map

Adesso devi farlo generare la chiave API di Google Map per connetterti al tuo sito WordPress. L'API di Google Maps (Application Programming Interface) è un codice univoco forniti da Google per integrare e utilizzare la funzionalità di Google Maps nei tuoi siti web o altre applicazioni. 

• Navigare verso Configurazione in Cloud Console
• Clicca su “Crea nuovo progetto”

• Scrivi il tuo Nome del progetto E posizione 
• Clicca su "CREARE"

• Verrà reindirizzato al menu dell'hamburger
• Seleziona il "API e servizi” opzione
• Clicca su “ABILITA API E SERVIZI”

• Ricerca Carta geografica nella casella di ricerca
• Oppure clicca su  "API JavaScript di Maps"

• Se non hai i piani premium, devi farlo imposta il tuo account con le informazioni necessarie (paese, dettagli della carta, indirizzo di fatturazione, ecc.)

• Successivamente, abilita il API JavaScript di Maps 
• Ora vai a Piattaforma Google Maps ➔ pagina Credenziali
• Seleziona un progetto oppure puoi anche creare un nuovo progetto da qui
• Clicca su “Crea credenziali”e ne genererà uno nuovo Chiave API per te

• Quindi, fai clic su Crea credenziali ➔ Chiave API
• Puoi vedere la chiave API appena creata per Google Maps elencata nella pagina Credenziali sotto Chiavi API
• copia la chiave API da qui
• Fare clic su Chiudi

❗❗Ricordati di limitare l'API chiave prima di utilizzarla sul tuo sito Web WordPress❗❗

Passaggio 3: collega la chiave API di Google Map con ElementsKit 

Adesso devi farlo collega la chiave API di Google Map appena creata al tuo sito web WordPress. Per fare ciò, devi incollare la chiave API nella sezione Google Map di ElementsKit. 

• Vai alla dashboard di WordPress 
• Clicca su “Kit Elementi” 
• Vai a “WIDGET” opzione
• Scorri verso il basso e puoi vedere il widget di Google Map  
• Accendi il "Google Map" aggeggio 
• Clicca su "Salvare le modifiche"

• Navigare  “ElementsKit” ➔ “Impostazioni utente”
• Scorri verso il basso e fai clic su "Google Map" opzione 
• Incolla la chiave API sul campo di immissione 
• Clicca su "Salvare le modifiche"

Passaggio 4: trascina e rilascia il widget della mappa di Google all'interno della pagina/post

Ora è il momento di vedere come aggiungere Google Maps nel sito WordPress semplicemente trascinando e rilasciando:

• Creane uno nuovo pagina/articolo o aprire una pagina/post esistente 
• Clicca su “Modifica con Elemetor” 
• Cerca il "Google Map" widget di Elemenetkit 
• Trascinare e rilasciare il widget all'interno del blocco in cui desideri visualizzare la mappa

🟢 Nota: puoi aggiungere più mappe e personalizzarle individualmente utilizzando lo stesso widget. Tutto quello che devi fare è selezionare un blocco Elementor e quindi trascinare e rilasciare il widget Google Map. 🟢

Passaggio 5: personalizza le impostazioni di Google Map 

Ora, il passaggio finale è personalizzare Google Maps secondo le tue preferenze. ElementsKit offre tantissime opzioni di personalizzazione tra cui contenuto, stile e impostazioni avanzate per layout, effetti di movimento, reattività, CSS personalizzati, ecc. 

Vediamo come puoi personalizzare Google Maps utilizzando le opzioni di personalizzazione di ElementsKit sul tuo sito Web WordPress. 

Personalizzazione dei contenuti 

In questa sezione puoi selezionare il tipo di mappa e il tipo di indirizzo e impostare latitudine e longitudine personalizzate per aggiungere l'indirizzo che desideri visualizzare sul tuo sito web. Inoltre, sono disponibili opzioni di personalizzazione per indicatori, controlli e temi della mappa. 

🌎 Tipo di mappa 

ElementsKit offre piattaforme di mappatura versatili da questo widget. Puoi selezionare il tipo di mappa dalla sezione a discesa. 

• Fai clic su Impostazioni ➔ Seleziona il tipo di mappa  

Qui puoi ottenere 7 tipi di mappe Google, ad esempio:

1️⃣ Base: Con la funzionalità di base di Google Map, gli utenti del tuo sito web possono farlo cercare luoghi, visualizzare le mappe e ottenere indicazioni stradali per varie destinazioni. 

Se sei un principiante e desideri aggiungere una semplice mappa Google al tuo sito Web WordPress con un indicatore, scegli il tipo di mappa base. 

2️⃣ Indicatore multiplo: L'utilizzo di più Google Maps è l'ideale per te se stai pianificando viaggi o evidenziando luoghi diversi. I visitatori del tuo sito web possono contrassegnare ed etichettare più punti di interesse su un'unica mappa. 

3️⃣ Statico: Utilizzando la funzionalità delle mappe statiche di ElementsKit, puoi fornire ai tuoi utenti la possibilità di generare un'immagine statica di una mappa. Se lo desideri, questo tipo di mappa può essere incorporata nei tuoi siti Web WordPress condividere la visualizzazione offline. 

4️⃣ Polilinea:  utilizzi Google Maps di tipo Polyline nel tuo sito WordPress per consentire agli utenti di creare e visualizzare linee sulla mappa per visualizzare i percorsi, i confini o le aree di interesse specifiche.

5️⃣ Eccessivamente: Il widget Google Maps di ElementsKit supporta anche la funzione di integrazione overlay. Utilizzando questo tipo di mappa è possibile visualizzare la sovrapposizione dati aggiuntivi come informazioni meteorologiche, condizioni del traffico o livelli personalizzati sulla mappa per una visualizzazione migliorata. 

6️⃣ Con Percorsi: Quando utilizzi la mappa dei percorsi di ElementsKit, i visitatori del tuo sito web possono inserire i loro punti di partenza e di arrivo per ottenere indicazioni stradali dettagliate passo dopo passo. Inoltre, possono vedere il tempo di viaggio stimato e gli aggiornamenti sul traffico in tempo reale. 

Ti aiuterà a scoprire la loro distanza dalla tua posizione, o sarà più adatto quando devi aggiungere più indirizzi di uffici/filiali al tuo sito web.

7️⃣ Panoramica: Puoi anche visualizzare la vista panoramica utilizzando il widget Google Map di ElementsKit. Le viste panoramiche, note anche come Street View, forniranno agli utenti a Virtuale a 360 gradi giro in varie località. Permetterà ai visitatori del sito di esplorare i luoghi come se fossero fisicamente presenti.

👉👉 Per ogni tipo di personalizzazione della mappa in dettaglio, puoi consultare questa documentazione – Mappa di Google nel sito WordPress.

📌 Tipo di indirizzo 

Per ciascun tipo è possibile selezionare Tipo indirizzo come indirizzo tramite scrivendo direttamente il nome della località oppure impostando latitudine e longitudine del rispettivo indirizzo. 

Tuttavia, la latitudine e la longitudine sono le coordinate geografiche per rappresentare una posizione specifica sulla superficie terrestre. 

La latitudine è la misura della distanza di un punto nord o sud dell'Equatore. D'altra parte, la longitudine definisce la misura della distanza di un punto est o ovest del Primo Meridiano.

Ottieni latitudine e longitudine: 

• Vai a https://www.google.com/maps/
• Cerca il nome della tua posizione
• Fare clic con il pulsante destro del mouse sul punto preciso della mappa
• Puoi vedere il valori di latitudine (sinistra) e longitudine (destra)
• Ora copia la latitudine e la longitudine
• Prossimo, impasto inserirli nei rispettivi campi di input

🔖 Impostazioni marcatore 

Qui puoi personalizzare le opzioni per contrassegnare la posizione utilizzando titolo, contenuto, icona, ecc. 

• Aggiungere un Titolo della mappa di Google per visualizzare il nome mentre qualcuno cerca la tua posizione
• Scrivi contenuto con 1-2 righe descrivere l'indirizzo quando passi il mouse sopra la mappa 
• Abilita l'interruttore per aggiungere un icona del marcatore personalizzato
• Carica l'icona del marcatore, puoi utilizzare il logo della tua azienda o altre icone per descrivere la tua identità 
• Impostato larghezza e altezza personalizzate per l'icona del marcatore 

🟢 Per le mappe Google di tipo con più indicatori, puoi caricare e personalizzare più icone per ciascuna posizione. 🟢

🎛️ Controlli

Da questa impostazione è possibile controllare il livello di zoom, la visualizzazione stradale, il tipo di mappa, lo scorrimento della mappa, ecc. 

• Controllo del livello di zoom: Fornire un numero qualsiasi per definire il livello di zoom.
• Abilita il controllo Street View: Abilita per mostrare la mappa con Street View.
• Attiva il controllo del tipo di mappa: Attiva per consentire all'utente di controllare il tipo di mappa, ad esempio roadmap, satellite, ecc.
• Abilita controllo zoom: Attiva per aggiungere un'icona di controllo zoom per ingrandire (+) e ridurre (-) la mappa.
• Abilita il controllo a schermo intero: Attivare questa opzione consentirà all'utente di vedere la mappa in modalità a schermo intero.
• Abilita lo zoom della rotella di scorrimento: L'attivazione della rotella di controllo dello scorrimento aumenterà o diminuirà il fattore di zoom di 10% per ciascun clic, verso l'alto o verso il basso.

🎨 Temi

Puoi personalizzare l'origine e gli stili del tema di Google Map. Inoltre, se puoi aggiungere un tema personalizzato, ciò è possibile nel widget Google Map di ElementsKit. 

✨ Sorgente del tema standard di Google 

• Fai clic sul tema ➔ Seleziona il tipo di fonte: Google Standard  
• Seleziona gli stili di tema standard dalla sezione a discesa:
  • Standard, Argento, Retro, Scuro, Notte e Melanzana

✨ Sorgente del tema Mappe sgargianti 

• Se desideri aggiungere varie combinazioni di colori, Snazzy Map è adatto al tuo sito. 
• Fai clic sul tema ➔ Seleziona il tipo di fonte: Snazzy Maps
• Seleziona gli stili dalla sezione a discesa:
  • Predefinito, Semplice, Colorato, Complesso, Scuro, Scala di grigi, Monocromatico, Nessuna etichetta e Due tonalità 

✨ Tema personalizzato

• Puoi anche aggiungere un tema personalizzato secondo le tue preferenze ed esigenze. 
• Scegli il fonte del tema ➔ Personalizzato
• Aggiungi uno stile di tema personalizzato nel campo indicato 
• Clicca su "Clicca qui" per ottenere il codice di stile JSON dello stile selezionato 

Personalizzazione dello stile

Avrai la massima flessibilità per impostare altezza, larghezza e allineamento della mappa personalizzati in base al design della pagina web. 

➡️ Altezza: Imposta l'altezza personalizzata per la mappa

➡️ Larghezza: Regola la larghezza secondo le tue preferenze

➡️ Allineamento: Imposta l'allineamento della mappa di Google a sinistra, destra o al centro

Personalizzazione avanzata 

Puoi controllare tutti gli stili del layout della mappa e altre funzionalità e personalizzarli dalle impostazioni avanzate del widget Google Map di ElementsKit. 

⏺️ Imposta valori personalizzati per il intera disposizione larghezza, margine, riempimento, posizione e z-index 

⏺️Imposta effetti di movimento per i campi di input (ad esempio zoom avanti, zoom indietro, dissolvenza in apertura, dissolvenza in chiusura, ecc.)

⏺️ Scegli la disposizione tipo e colore dello sfondo

⏺️ Personalizza il tipo di bordo, raggio, maschera e reattività del dispositivo (pc, scheda, dispositivo mobile)

⏺️ Inserisci attributi e CSS personalizzati per funzionalità aggiuntive 

5 vantaggi dell'inserimento di Google Maps nel sito Web WordPress 

Aggiungere Google Maps al tuo sito web offre numerosi vantaggi. Ecco i 5 principali vantaggi di integrare Google Maps sul tuo sito WordPress:

1. Aumenta la visibilità aziendale 

Quando i visitatori arrivano sul tuo sito web, Google Maps li aiuterà a visualizzare la tua posizione e fornire un'idea chiara di dove è situata la tua attività. 

Poiché questa funzionalità è particolarmente utile per le aziende con vetrine fisiche o uffici. Quindi, se hai più filiali, puoi mostrarle su un'unica mappa. 

Ciò aiuterà i tuoi clienti a scoprire filiali nuove e vicine. Possono semplicemente fare clic sugli indicatori per ottenere l'indirizzo e le indicazioni stradali per ciascuna posizione. 

Di conseguenza, puoi aumentare il tuo visibilità dell'azienda presso i potenziali clienti sul tuo sito WordPress. 

2. Fornisce indicazioni precise 

Uno dei principali vantaggi di incorporare Google Maps nel tuo sito Web WordPress è quello di fornire indicazioni precise alla tua attività. I visitatori possono inserire la loro posizione attuale e ricevere indicazioni dettagliate per raggiungere la tua posizione. 

Questa funzione è molto conveniente per i clienti che non hanno familiarità con la zona o fanno affidamento sui trasporti pubblici. Indicazioni precise aiutano a garantire che i potenziali clienti possano raggiungere facilmente la tua attività senza alcun fastidio o confusione. 

3. Mette in mostra il SEO locale

Ottimizzazione per i motori di ricerca locali (SEO) è fondamentale per le aziende che hanno come target un’area geografica specifica. Integrando Google Maps nel tuo sito web WordPress, puoi mostrare la posizione della tua attività nei risultati di ricerca. 

Secondo studi recenti, circa 46% di tutte le ricerche hanno intento locale. Ciò indica che gli utenti di Internet stanno cercando le attività, i servizi o i prodotti più vicini.

Pertanto, l'aggiunta di una mappa Google aumenterà le tue possibilità di apparire nel pacchetto locale o pacchetto mappa. È la sezione dei risultati di ricerca che visualizza una mappa con le attività commerciali locali correlate alla query di ricerca. 

Di conseguenza, puoi attingere a questo vasto pubblico di ricerca locale e aumentare le tue possibilità di attirare clienti locali. 

4. Facilita la pianificazione degli eventi 

L'integrazione di Google Maps nel tuo sito WordPress può semplificare il processo di pianificazione dell’evento sia per te che per i tuoi partecipanti per qualsiasi evento o riunione aziendale. Puoi incorporare una mappa nella pagina del tuo evento per fornire il posizione e indicazioni precise alla sede. 

Questo sarà fai risparmiare tempo e fatica ai tuoi visitatori nella ricerca della sede separatamente. Inoltre, puoi includere indicatori per le fermate dei trasporti pubblici, le aree di parcheggio o gli alloggi nelle vicinanze, per rendere ancora più semplice per i partecipanti pianificare la loro visita. 

5. Migliora la fiducia, la credibilità e l'esperienza dell'utente 

Ultimo ma non meno importante, avere un indirizzo su Google Maps aiuta a creare fiducia tra i visitatori. Esso mostra trasparenza e fornisce ai clienti la prova visiva della tua esistenza. 

Inoltre, quando i visitatori possono vedere facilmente la tua posizione, è più probabile che si fidino della tua attività, soprattutto se riescono a trovare recensioni e valutazioni positive associate alla tua posizione.

Inoltre, aggiungere una mappa Google al tuo sito WordPress può aiutarti aumentare il marchio in modo credibile oltre a semplificare l'esperienza dell'utente fornendo indicazioni precise sulla sede della tua attività. Ridurrà la necessità per gli utenti di passare da una piattaforma all'altra per trovare indicazioni stradali o cercare la tua attività su servizi di mappatura esterni. 

Mantenendo i visitatori sul tuo sito web, puoi fornire a esperienza senza soluzione di continuità, aumentando le possibilità di conversioni e di soddisfazione del cliente.

🔔 Le persone leggono anche – Creare un News Ticker in WordPress: 3 semplici passaggi

5 migliori pratiche per l'utilizzo di Google Maps in WordPress

Ecco i 5 migliori pratiche per l'utilizzo di Google Maps nei siti WordPress per migliorare l'esperienza dell'utente e stare al passo con i giochi SEO. 

✔️ Assicurati il giusto posizionamento della mappa

Il posizionamento appropriato della mappa è fondamentale sia per l'usabilità che per la navigazione ottimizzazione dei motori di ricerca (SEO). Ad esempio, puoi visualizzare la mappa della tua posizione sul la pagina dei contatti o il footer. 

Non esistono regole rigide per il posizionamento della mappa sul tuo sito web, devi solo posizionare la mappa nella posizione in cui si trova facile per i visitatori da trovare e utilizzare.  

✔️ Ottimizza il tempo di caricamento e le prestazioni della mappa

Assicurati di avere ottimizzato il tempo di caricamento della mappa. Perché una mappa a caricamento lento può essere frustrante per i visitatori e può anche danneggiare il tuo SEO. 

Puoi usare a plugin leggero di Google Maps con tutte le opzioni di personalizzazione come ElementsKit. Se utilizzi un metodo alternativo invece di un plug-in, minimizzare e comprimere JavaScript e CSS file prima di pubblicare la mappa di Google sul tuo sito web. 

✔️ Garantisci un design reattivo per i dispositivi mobili

La reattività del dispositivo è un must. Assicurati che la mappa adatti automaticamente le sue dimensioni e il suo layout a adattarsi a qualsiasi dimensione dello schermo ad esempio PC, tablet o telefono cellulare. 

Questo è importante per garantire che i visitatori abbiano a buona esperienza visualizzare la tua mappa non solo su pc o schermi di grandi dimensioni ma anche su dispositivi mobili.

✔️ Garantisci la conformità ai Termini e condizioni dell'API di Google Maps

Google Maps ha un insieme di termini e condizioni che devi accettarli e seguirli. 

Questi termini e condizioni riguardano come utilizzare Google Maps e le altre regole. Quindi è importante leggeteli attentamente prima di utilizzare l'API.

✔️ Mantieni la versione aggiornata del plug-in di Google Maps

Google Maps rilascia regolarmente nuove versioni della sua API. Queste versioni includono nuove funzionalità e correzioni di bug. 

Pertanto, è importante mantenere il plug-in di Google Maps aggiornato a assicurati di utilizzare la versione più recente dell'API e di non perdere nessuna nuova funzionalità.

📢 Vedi anche – Novità di WordPress 6.2: 11 funzionalità principali e oltre!

Domande frequenti

Perché è importante aggiungere al sito WordPress? 

L'aggiunta di Google Maps al tuo sito Web WordPress può migliorare la SEO locale del tuo sito Web, creare fiducia nei visitatori, aumentare il traffico del sito Web e fornire un'esperienza utente migliore ai tuoi visitatori.

Come creare uno shortcode di Google Map in WordPress?

Per creare uno shortcode della mappa Google in WordPress, 

• Navigare verso Google Map
• Cerca la posizione desiderata 
• Navigare verso  “Condividi” ➔ “Incorpora una mappa”
• copia il codice HTML incorporato
• Ora crea o apri una pagina/post esistente
• Aggiungine uno nuovo blocco HTML personalizzato
• Impasto il codice incorporato in questo blocco
• Questo codice iFrame incorporato sarà convertito in uno shortcode quando modifichi la pagina o il post

Come aggiungere Google Maps nel sito WordPress senza plugin?

Puoi usare Google Le mie mappe e crea una nuova mappa per aggiungere funzionalità di base della mappa al tuo sito Web WordPress senza installare alcun plug-in. Inoltre, puoi utilizzare il metodo iFrame/shortcode predefinito per incorporare il codice HTML della tua posizione preferita su Google Map nella pagina web. 

Perché Google Maps non funziona sul mio sito WordPress?

Google Maps potrebbe non funzionare sul tuo sito WordPress in caso di configurazione errata della chiave API, problemi di autenticazione o conflitti con altri plugin o temi. Pertanto, si consiglia di controllare le impostazioni della chiave API e utilizzare i plugin della versione aggiornata e garantire la compatibilità con altri plugin/temi.

Avvolgetelo

Per aumentare la visibilità della tua attività, aumentare la fiducia dei visitatori, potenziare la SEO locale e indirizzare più traffico al tuo sito web, aggiungendo Google Maps al sito WordPress è una soluzione efficace.

E ora sai che “come aggiungere Google Maps nel sito WordPress” non è scienza missilistica. Seguendo quanto sopra 5 passaggi utilizzando ElementsKit e l'API di Google Map, puoi facilmente integrare una o più mappe di posizioni nel tuo sito web. Assicurati solo di seguire anche le migliori pratiche durante l'integrazione di Google Maps nel tuo sito. 

Se avete domande o suggerimenti, fatecelo sapere e saremo lieti di ascoltarvi. Grazie per aver letto!