Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coppa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Come aggiungere Google Maps in WordPress (il modo giusto)

Per le aziende locali, visualizzare la propria posizione su una mappa interattiva non è solo una comodità: è un elemento cruciale della strategia digitale.

L’aggiunta di Google Maps al vostro sito web può migliorare significativamente l’esperienza dell’utente, rendendo più facile per i visitatori trovare la vostra posizione. Inoltre, può aumentare la visibilità del sito sui motori di ricerca, attirando più visitatori e potenziali clienti.

Abbiamo studiato i modi migliori per integrare perfettamente Google Maps nel vostro sito web WordPress, migliorando sia l’esperienza dell’utente che la SEO.

In questo articolo vi mostreremo come sbloccare la potenza di Google Maps in WordPress.

Add Google Maps in WordPress

Perché aggiungere Google Maps a WordPress?

Sapevate che Google Maps è l’app di navigazione più popolare su tutte le piattaforme?

Se avete l’indirizzo di un ufficio o di un negozio fisico, l’aggiunta di Google Maps al vostro sito web WordPress facilita agli utenti la localizzazione rapida dei vostri negozi, ristoranti o punti vendita. Questo vi aiuta ad attirare più clienti e a generare più affari.

Non solo, ma incorporare Google Maps può anche migliorare la SEO di WordPress. Secondo Google, il 46% di tutte le ricerche sono locali. L’aggiunta di Google Maps a WordPress può incrementare la SEO locale e migliorare la vostra visibilità nelle ricerche locali.

Ora ci sono due modi per incorporare Google Maps in WordPress, e noi ve li mostreremo entrambi.

Il vantaggio del secondo metodo è che segue tutte le best practice della SEO locale, quindi se lo utilizzate, Google inizierà a includere la vostra posizione su Google Maps. Inoltre, visualizzerà le informazioni sulla vostra attività, come nome, logo, indirizzo, telefono e orari di apertura, nei risultati della ricerca locale.

Detto questo, vediamo come aggiungere Google Maps a WordPress. Di seguito sono riportati i collegamenti rapidi che potete utilizzare per andare alla sezione che preferite:

Come aggiungere Google Maps in WordPress senza un plugin

Se volete solo incorporare rapidamente Google Maps in un post o in una pagina di WordPress, potete utilizzare il metodo iFrame predefinito.

È sufficiente andare sul sito web di Google Maps e digitare un indirizzo stradale qualsiasi nell’area di ricerca.

Find location in Google Maps and Click Share to Embed

Successivamente, è necessario fare clic sull’icona Condividi e apparirà un popup con l’opzione di inviare un link alla posizione o di incorporare una mappa.

È necessario selezionare l’opzione “Incorpora una mappa”.

Copy Google Maps HTML Embed Code

A questo punto, è sufficiente copiare il codice HTML di Google Maps e aprire la pagina in cui si desidera incorporare la mappa.

All’interno dell’editor di blocchi, è necessario aggiungere un blocco HTML personalizzato.

Select Custom HTML block in WordPress

Ora è sufficiente incollare il codice embed copiato da Google Maps.

Successivamente, è necessario aggiornare o pubblicare la pagina per visualizzare l’anteprima delle modifiche.

Google Maps iFrame Embed Code in Block Editor

Questo metodo funziona per incorporare rapidamente Google Maps, ma non offre i massimi vantaggi SEO.

Se siete una piccola impresa, un ristorante o un negozio online con una o più sedi fisiche, vi consigliamo di utilizzare la prossima soluzione per massimizzare le vostre classifiche Local SEO, perché utilizza i dati open graph corretti per aiutarvi a posizionarvi meglio su Google.

Come aggiungere Google Maps a WordPress con un plugin per il SEO locale

Il modo migliore per aggiungere Google Maps e ottimizzare il sito per la SEO locale è utilizzare All in One SEO (AIOSEO).

È il miglior plugin SEO per WordPress perché vi aiuta a ottenere un posizionamento SEO più elevato senza dover modificare il codice o assumere uno sviluppatore. Oltre 3 milioni di professionisti utilizzano AIOSEO per migliorare il loro posizionamento sui motori di ricerca.

AIOSEO

Per questo tutorial utilizzeremo la versione AIOSEO Pro, che include la funzione Local SEO e altre potenti opzioni di ottimizzazione. Esiste anche una versione gratuita di AIOSEO che potete utilizzare per iniziare a ottimizzare il vostro sito per i motori di ricerca.

Per prima cosa, è necessario installare e attivare il plugin AIOSEO in WordPress. Per maggiori dettagli, consultate il nostro tutorial su come installare un plugin di WordPress.

Dopo l’attivazione, il plugin avvia la procedura guidata di configurazione. È possibile fare clic sul pulsante “Cominciamo” per configurare il plugin. Se avete bisogno di aiuto, consultate la nostra guida su come configurare correttamente All in One SEO in WordPress.

AIOSEO setup wizard

Successivamente, potete andare su All in One SEO ” Local SEO dalla vostra dashboard di WordPress.

Quindi fare clic sul pulsante “Attiva SEO locale” per iniziare a configurare le impostazioni locali.

Activate local SEO

Una volta attivato l’addon Local SEO per WordPress, è possibile aggiungere una singola località o più località in AIOSEO e visualizzarle su Google Maps. Vi mostriamo come aggiungere entrambi al vostro sito web.

Aggiunta di una singola sede

Per aggiungere le vostre sedi, le informazioni sull’attività, gli orari di apertura e altro ancora, dovete prima andare su All in One SEO ” Local SEO e aprire la scheda “Sedi”.

Se avete una sola sede fisica, mantenete l’opzione “Sedi multiple” impostata su No.

Location tab under local SEO

Successivamente, scorrere fino alla sezione “Mappe” per appuntare la propria posizione esatta.

È sufficiente inserire il vostro indirizzo nel campo “Inserisci una richiesta” e Google Maps mostrerà la vostra posizione.

Pin your store location

Una volta inserita la posizione, non dimenticate di fare clic sul pulsante “Salva modifiche”.

Aggiunta di più sedi

Se avete più di una sede fisica, dovrete attivare l’impostazione “Sedi multiple” nella scheda “Posizione” di Local SEO.

Enable multiple locations

A questo punto, nel pannello di amministrazione di WordPress apparirà un nuovo menu Locations.

Andare avanti e navigare in Posizioni e poi fare clic sul pulsante “Aggiungi nuovo”.

Add a new location

Una volta entrati nell’editor di WordPress, scorrete verso il basso fino alla sezione “Mappa”.

Qui potete inserire il vostro indirizzo nel campo “Inserisci una domanda”.

Add multiple map locations

Dopo aver inserito la vostra posizione sulla mappa e aver aggiunto le informazioni sulla località, fate clic sul pulsante “Pubblica”.

Ora è possibile ripetere questo passaggio e aggiungere tutte le sedi desiderate per la propria attività.

Una volta terminata l’aggiunta delle località, si può andare alla scheda ‘Mappe’ nel menu All in One SEO ” Local SEO.

Qui si dovrà inserire una chiave API di Google Maps.

Enter Google maps API key

Vediamo ora come creare una chiave API per Google Maps.

Creare una chiave API di Google Maps

Per iniziare, è necessario visitare il sito web di Google Maps Platform e fare clic sul pulsante “Inizia”.

Google maps platform

Dopo aver effettuato l’accesso con il vostro account Google, dovrete impostare un account di fatturazione.

Google Maps Platform ha una tariffa a consumo e offre i primi 300 dollari di utilizzo mensile gratuitamente per tutti gli utenti. Per la maggior parte dei siti web, questa cifra coprirà facilmente un semplice embed di mappa come quello che stiamo creando in questa esercitazione.

Non preoccupatevi, non vi addebiteranno alcun costo a meno che non passiate manualmente a un account a pagamento.

Per iniziare, fate clic sul pulsante “Crea account di fatturazione”.

Create a billing account

Successivamente, è possibile selezionare il proprio Paese e scegliere ciò che meglio descrive la propria organizzazione dal menu a tendina.

Una volta selezionate queste informazioni, fare clic sulla casella di controllo relativa ai Termini di servizio e quindi sul pulsante “Continua”.

Enter personal details for billing account

Nella schermata successiva, dovrete inserire il vostro numero di telefono per la verifica.

Una volta fatto ciò, fare clic sul pulsante “Invia codice”.

Enter mobile number

Dopo aver verificato il codice, la cosa successiva da fare è inserire la ragione sociale, i dettagli del metodo di pagamento e l’indirizzo di fatturazione.

Una volta inseriti questi dati, fate clic sul pulsante “Inizia la mia prova gratuita”.

Enter business name and payment details

Successivamente, vi verranno poste una serie di 4 domande sulla vostra organizzazione e sull’uso che farete della piattaforma Google Maps.

Google Maps vi chiederà l’obiettivo principale dell’utilizzo della piattaforma, il settore in cui operate, la selezione di un caso d’uso e le dimensioni della vostra azienda.

Dopo aver risposto a queste domande, fare clic sul pulsante “Invia”.

Answer few questions for google maps

A questo punto apparirà un popup con la chiave API di Google Maps.

È possibile copiare e salvare questa chiave in un file di testo per un uso futuro.

Copy the API key

Ora che avete creato una chiave API di Google Maps, dovrete tornare alla vostra dashboard di WordPress per inserirla nelle impostazioni di AIOSEO Local SEO.

Configurazione delle impostazioni di Google Maps in WordPress

Ora è possibile tornare a All in One SEO ” Local SEO dalla dashboard di WordPress e navigare nella scheda “Mappe”.

Inserire la chiave API di Google Maps nel campo “Chiave API”. Appena aggiunta la chiave, verrà visualizzata un’anteprima della mappa in AIOSEO.

Add API key and see map preview

Successivamente, è possibile scorrere verso il basso per modificare le impostazioni della mappa.

AIOSEO consente di visualizzare Google Maps utilizzando un blocco Gutenberg, uno shortcode, un widget o un codice PHP. Inoltre, consente di scegliere diversi stili di mappa e di aggiungere un indicatore personalizzato alla mappa.

Edit map settings

Non dimenticate di fare clic sul pulsante “Salva modifiche” quando avete finito.

Visualizzazione di Google Maps in WordPress

Quindi, potete aggiungere Google Maps a qualsiasi post o pagina di WordPress. Per iniziare, basta modificare o aggiungere una nuova pagina al vostro sito web.

Una volta entrati nell’editor dei blocchi, fare clic sul pulsante “+” in alto e aggiungere il blocco AIOSEO Local – Map in qualsiasi punto della pagina.

Add local maps block

Dopodiché, la vostra Google Map verrà aggiunta alla pagina.

AIOSEO consente anche di modificare le impostazioni della mappa dalle opzioni sulla destra. Ad esempio, è possibile mostrare etichette e icone, aggiungere un indicatore personalizzato e modificare la larghezza e l’altezza della mappa.

Edit your map in WordPress

Se si dispone di più sedi, è possibile selezionare la sede da evidenziare scegliendo tra le opzioni presenti nel menu a destra.

È sufficiente fare clic sul menu a discesa “Località” e selezionare la località preferita da visualizzare sul sito web.

Choose which location to display

Una volta soddisfatti delle impostazioni, procedere alla pubblicazione della pagina.

Ora è possibile visitare il sito web per vedere Google Maps in azione.

Preview your map

Potete anche aggiungere Google Maps alla sezione widget del vostro sito, come la barra laterale o il piè di pagina.

Per iniziare, andate su Aspetto ” Widget dal pannello di amministrazione di WordPress. Quindi, fate clic sul pulsante “+” e aggiungete il blocco di widget “AIOSEO Local – Map” dove desiderate visualizzare la vostra posizione.

Add maps widget

Successivamente, è possibile modificare le impostazioni del widget.

Ad esempio, è possibile aggiungere un titolo, modificare la larghezza e l’altezza della mappa, scegliere quale località visualizzare se si hanno più località e modificare l’etichetta.

Edit map widget settings

Ecco fatto!

Ora, quando aggiornate il vostro sito web, vedrete Google Maps nell’area dei widget.

Maps preview in widget area

Guide esperte sull’uso delle mappe in WordPress

Ora che sapete come aggiungere Google Maps al vostro sito, potreste voler vedere altre guide relative alle mappe e alla localizzazione in WordPress.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere Google Maps al vostro sito WordPress. Potreste anche voler vedere le nostre scelte dei migliori plugin WordPress per le piccole imprese e imparare come aggiungere un localizzatore di negozi Google Maps in WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.

Divulgazione: I nostri contenuti sono sostenuti dai lettori. Ciò significa che se cliccate su alcuni dei nostri link, potremmo guadagnare una commissione. Vedi come WPBeginner è finanziato , perché è importante e come puoi sostenerci. Ecco il nostro processo editoriale .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Il kit di strumenti WordPress definitivo

Ottenete l'accesso gratuito al nostro kit di strumenti - una raccolta di prodotti e risorse relative a WordPress che ogni professionista dovrebbe avere!

Reader Interactions

36 commentiLascia una risposta

  1. Dennis Muthomi

    thanks for this well-explained guide! I have an issue that I need help with though. One of my websites has a dark mode color design because tha;ts how the theme was designed and coded. I also use Google Maps quite often, and I know there is a dark mode version available.

    is there a way to add the dark mode version of Google Maps to my website instead of the regular version? I just want the map to match my website’s dark theme design.

    • WPBeginner Support

      At the moment we do not have a recommended easy method for changing the map to their dark mode variant in embeds. If that changes we will be sure to share!

      Admin

  2. Moinuddin Waheed

    This is really a time and resource saving post for me as I was looking a minimal way of adding a Google map address in one of my clients website and was not sure how to do.
    Both the methods without plugin and with AIOSEO are good and serves my need.
    But I would go with AIOSEO to implement this feature as it will also help in local seo.
    Thanks for this helpful guide for embedding Google map.

  3. melanie bund

    Hi, do you know how to hide the 13px white space at the bottom of the embedded google map?
    Thank you in advance
    Melanie

  4. Donata

    I have a google maps on my web, but the pin which is added to the map is not clickable. The pin only shows the adress but it do not direct if you click on it. Is it possible to do clickable icon?

  5. Sharon

    Don’t you have to get an API from Google before you can use a map plugin and insert it into the plugin? That’s been my experience lately.

    • Mark

      Hi I’m trying to insert a google map onto my website ( Wordpress ) it keeps disappearing am I correct in thinking that google now want $200 a month for this or whatever the cost or can I still insert a map for free

      • WPBeginner Support

        Google now charges for large uses of their maps API which is what the plugin runs on, the $200 you likely saw was the free monthly credit Google gives to those using their API so smaller sites are not charged.

        Admin

        • Kamil

          Yes, that true but there is alternative for Google maps API. OSMapper is the plugin that uses Open Street Maps API that does not requires any API keys and there is no limit for usage. You can install it from Wordpress.org.

        • WPBeginner Support

          While we have not tested it yet, we will be sure to take a look at it.

  6. Blessy

    I tried the first step: copy the HTML in the after going to the embed button and paste it into the text version of the post. I went to the visual one and saw the embedded google map. I saved it at the site takes out the map. The changed texts remain, though, but the map keeps vanishing. it keeps repeating each try. Why does it happen?

  7. Miranda Olding

    Thanks – so clear x

  8. Sara C

    Great tutorial – short and to the point. I had tried two other plugins that my client didn’t like. Thank you for the manual embedding information. Worked perfectly and quickly.

    Many, many thanks for this tutorial.
    Sara

  9. Denny Png

    Dear Sir/Madam,

    I would like to change the Google Map address & not sure where to locate this embedded link to update the WP backend. I couldn’t find it the contact menu to locate it.

    Seek yr kind advise on it!

    Thankyou!

    Rdgs,
    Denny Png

  10. Kathy

    Thank you! This is what I was looking for! Perfect for my travel post on my blog! The video is great and very helpful!

  11. Andy Kramer

    I would love to do this but when I go into google maps and type the address there is absolutely no gear so I can’t even get a link to copy for WordPress. Any ideas or suggestions?

    • Karen

      I am having the exact problem. There is no flower on Google Maps anymore! So how does this work?

  12. Mari

    Hi!
    I can’t find the code.. There’s no “flower icon” nor other links on the bottom right of the map. Is it because the place I’m trying to add doesn’t have a street address, it’s just coordinates?
    Thanks in advance.

  13. Andy Meuleman

    A great lesson, easy to follow and implement.

    Much thanks, Andy

  14. Karthik

    Is there any way to get this Map as a background to a page with full length say width 100% n height 100% something like that??

    • Parmod

      Can you be more specific about what exactly do you need

  15. Bigg Tobias Inspired

    So, I loved the map tutorial but what if I want to place it in a certain area of the page… Or side bar? Can anyone help?

  16. Carla Spacher

    Thanks so much! Why would anyone bother with a plugin that may ultimately slow down their site when you have provided such easy instructions to grab the code from Google Maps?

    By the way, if anyone is having trouble finding the code. Once you see the map, go to the bottom right-hand corner and click on the flower icon and click on “Share and embed map”. Then click on “Embed map” and enter into your WP page/or post.

  17. WRC

    Thank you. Very helpful post.

  18. Rory

    Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
    Thanks for your help.

  19. aamir

    hello sir,

    i want to use plugin which provide exact location. can you suggest me? i use map press, leaflet market, wp google map etc. plugin but still no luck. all this plugin show some far location from my exact location. i want exact location where my shop is located. please help me. or is there any way to develop custom map & put in wordpress site? please provide step by step procedure.

    Thanks & Regards,
    aamir

  20. Trang Tran

    Thanks for taking the time to write this article. It’s very helpful. Is it possible to add a Google Map that is linked with Google Places?

  21. Guilherme

    Very nice. But when we use coordinates, the lightbox map don´t work right. It just shows some place in USA. How can I fix this?

    Thanks

  22. Bongo

    Powerful stuff man. Thanks

  23. Christopher Rose

    Thanks for all the informative WP articles you’re posting.

    Is it possible to add a Google Map to a site that

    1. automatically adds the location of all site visitors or commenters to a map
    and
    2. allow all customers to be added, probably manually, although an automatic option would be good too. I have a small ecommerce site that has customers all over the world and thought it would be fun to show where we have sent stuff to.

  24. Widdershins

    That is so cool! … thanks :D

    • zakaria

      Thank you very much!

      I have already founded (MapPress Easy Google Maps) and it is nice plugin.
      And of course, your attention is very nice support. THANKS!!!
      One more thing, please.
      I would like to use these maps in tabs but only tab’s (shortcode) plugin I have found so far which shows maps is (Jshortcode). (I mean it shows in second or third tab. The others aren’t showing in second or third tabs.) It is nice plugin too but has very colorful tabs.
      May be you would be so kind to advice some other plugins to solve this problem.

      Thanks advance
      Best regards
      Zakaria

Lascia una risposta

Grazie per aver scelto di lasciare un commento. Tenga presente che tutti i commenti sono moderati in base alle nostre politica dei commenti e il suo indirizzo e-mail NON sarà pubblicato. Si prega di NON utilizzare parole chiave nel campo del nome. Avremo una conversazione personale e significativa.