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

Como adicionar o Google Maps no WordPress (da maneira correta)

Para empresas locais, exibir sua localização em um mapa interativo não é apenas uma conveniência – é um elemento crucial de sua estratégia digital.

Adicionar o Google Maps ao seu site pode melhorar significativamente a experiência do usuário, facilitando para os visitantes encontrarem sua localização. Além disso, pode aumentar a visibilidade do seu site nos mecanismos de pesquisa, atraindo mais visitantes e clientes em potencial.

Pesquisamos as melhores maneiras de integrar perfeitamente o Google Maps ao seu site WordPress, melhorando a experiência do usuário e o SEO.

Neste artigo, mostraremos a você como liberar o poder do Google Maps no WordPress.

Add Google Maps in WordPress

Por que adicionar o Google Maps no WordPress?

Você sabia que o Google Maps é o aplicativo de navegação mais popular em todas as plataformas?

Se você tem um endereço de escritório ou de loja física, adicionar o Google Maps ao seu site WordPress facilita a localização rápida de suas lojas físicas, restaurantes ou pontos de venda pelos usuários. Isso ajuda você a atrair mais clientes e gerar mais negócios.

Além disso, a incorporação do Google Maps também pode melhorar o SEO do WordPress. De acordo com o Google, 46% de todas as pesquisas são locais. Adicionar o Google Maps ao WordPress pode impulsionar seu SEO local e melhorar sua visibilidade nas pesquisas locais.

Agora, há duas maneiras de incorporar o Google Maps no WordPress, e mostraremos a você ambas.

A vantagem do segundo método é que ele segue todas as práticas recomendadas de SEO local, portanto, se você usá-lo, o Google começará a incluir sua localização no Google Maps. Ele também exibirá as informações da sua empresa, como nome, logotipo, endereço, telefone e horário de funcionamento, nos resultados da pesquisa local.

Dito isso, vamos ver como você pode adicionar o Google Maps ao WordPress. Abaixo estão os links rápidos que você pode usar para ir para a seção que preferir:

Como adicionar o Google Maps no WordPress sem um plug-in

Se você quiser apenas incorporar rapidamente o Google Maps em um post ou página do WordPress, poderá usar o método padrão do iFrame.

Basta acessar o site do Google Maps e digitar qualquer endereço na área de pesquisa.

Find location in Google Maps and Click Share to Embed

Em seguida, você precisa clicar no ícone Compartilhar, e será exibida uma janela pop-up com a opção de Enviar um link de localização ou Incorporar um mapa.

Você precisa selecionar a opção “Embed a map” (Incorporar um mapa).

Copy Google Maps HTML Embed Code

Depois disso, basta copiar o código HTML do Google Maps e, em seguida, abrir a página na qual você deseja incorporar o mapa.

Dentro do editor de blocos, você precisa adicionar um bloco HTML personalizado.

Select Custom HTML block in WordPress

Agora você pode simplesmente colar o código de incorporação que copiou do Google Maps.

Depois disso, você precisa atualizar ou publicar a página para visualizar as alterações.

Google Maps iFrame Embed Code in Block Editor

Esse método funciona para incorporar rapidamente o Google Maps, mas não oferece o máximo de benefícios de SEO.

Se você for uma pequena empresa, restaurante ou loja on-line com um ou vários locais físicos, recomendamos usar a próxima solução para maximizar suas classificações de SEO local, pois ela usa dados de gráfico aberto adequados para ajudá-lo a obter uma classificação mais alta no Google.

Como adicionar o Google Maps ao WordPress com um plug-in de SEO local

A melhor maneira de adicionar o Google Maps e otimizar seu site para SEO local é usar o All in One SEO (AIOSEO).

É o melhor plugin de SEO para WordPress porque ajuda você a obter classificações de SEO mais altas sem editar o código ou contratar um desenvolvedor. Mais de 3 milhões de profissionais usam o AIOSEO para melhorar suas classificações nos mecanismos de busca.

AIOSEO

Para este tutorial, usaremos a versão Pro do AIOSEO porque ela inclui o recurso Local SEO e outras opções avançadas de otimização. Há também uma versão gratuita do AIOSEO que você pode usar para começar a otimizar seu site para os mecanismos de pesquisa.

Primeiro, você precisará instalar e ativar o plug-in AIOSEO no WordPress. Para obter mais detalhes, consulte nosso tutorial sobre como instalar um plug-in do WordPress.

Após a ativação, o plug-in iniciará o assistente de configuração. Você pode clicar no botão “Let’s Get Started” (Vamos começar) para configurar o plug-in. Se precisar de ajuda, consulte nosso guia sobre como configurar corretamente o All in One SEO no WordPress.

AIOSEO setup wizard

Em seguida, você pode acessar All in One SEO ” Local SEO no painel do WordPress.

Em seguida, clique no botão “Activate Local SEO” (Ativar SEO local) para começar a definir as configurações locais.

Activate local SEO

Quando o complemento Local SEO para WordPress estiver ativado, você poderá adicionar um único local ou vários locais no AIOSEO e exibi-los no Google Maps. Mostraremos como adicionar ambos ao seu site.

Adição de um único local

Para adicionar seus locais, informações comerciais, horários de funcionamento e muito mais, primeiro você precisa ir para All in One SEO ” Local SEO e abrir a guia “Locations” (Locais).

Se você tiver um único local físico, mantenha a opção “Multiple Locations” (Vários locais) definida como No (Não).

Location tab under local SEO

Depois disso, role para baixo até a seção “Mapas” para fixar sua localização exata.

Basta digitar seu endereço no campo “Digite uma consulta”, e o Google Maps mostrará sua localização.

Pin your store location

Depois de inserir sua localização, não se esqueça de clicar no botão “Save Changes” (Salvar alterações).

Adição de vários locais

Se você tiver mais de um local físico, precisará ativar a configuração “Multiple Locations” (Vários locais) na guia “Location” (Local) no Local SEO.

Enable multiple locations

Depois disso, um novo menu Locais aparecerá em seu painel de administração do WordPress.

Vá em frente e navegue até Locais e clique no botão “Adicionar novo”.

Add a new location

Quando estiver no editor do WordPress, role a tela para baixo até a seção “Map” (Mapa).

Aqui você pode digitar seu endereço no campo “Enter a query” (Digite uma consulta).

Add multiple map locations

Depois de inserir sua localização no mapa e adicionar informações de localização, clique no botão “Publicar”.

Agora você pode repetir essa etapa e adicionar quantos locais quiser para sua empresa.

Quando terminar de adicionar seus locais, você poderá acessar a guia “Maps” no menu All in One SEO ” Local SEO.

Aqui você terá que inserir uma chave de API do Google Maps.

Enter Google maps API key

Agora, vamos ver como criar uma chave de API para o Google Maps.

Como criar uma chave de API do Google Maps

Para começar, você precisará visitar o site da Google Maps Platform e clicar no botão “Get Started” (Começar).

Google maps platform

Depois de fazer login com sua conta do Google, você precisará configurar uma conta de faturamento.

O Google Maps Platform tem preços de pagamento conforme o uso e oferece os primeiros US$ 300 de uso mensal gratuitamente para todos os usuários. Para a maioria dos sites, isso cobrirá facilmente uma simples incorporação de mapa, como a que estamos criando neste tutorial.

Não se preocupe, eles não cobrarão nenhuma taxa, a menos que você faça o upgrade manual para uma conta paga.

Para começar, clique no botão “Create Billing Account” (Criar conta de cobrança).

Create a billing account

Em seguida, você pode selecionar seu país e escolher o que melhor descreve sua organização no menu suspenso.

Depois de selecionar essas informações, clique na caixa de seleção dos Termos de Serviço e, em seguida, clique no botão “Continuar”.

Enter personal details for billing account

Na próxima tela, você precisará digitar seu número de telefone para verificação.

Depois de fazer isso, clique no botão “Send Code” (Enviar código).

Enter mobile number

Depois de verificar o código, o próximo passo é inserir o nome de sua empresa, os detalhes do método de pagamento e o endereço de cobrança.

Depois de inserir esses detalhes, clique no botão “Start my Free Trial” (Iniciar minha avaliação gratuita).

Enter business name and payment details

Em seguida, será feita uma série de quatro perguntas sobre sua organização e como você usará a Plataforma do Google Maps.

O Google Maps perguntará qual é o seu principal objetivo ao usar a plataforma, em que setor você está, selecionará um caso de uso e o tamanho da sua empresa.

Depois de responder a essas perguntas, clique no botão “Submit” (Enviar).

Answer few questions for google maps

Agora você verá uma janela pop-up com sua chave de API do Google Maps.

Você pode copiar e salvar essa chave em um arquivo de texto para uso futuro.

Copy the API key

Agora que você criou uma chave de API do Google Maps, precisará voltar ao painel do WordPress para inseri-la nas configurações do AIOSEO Local SEO.

Configuração das definições do Google Maps no WordPress

Agora você pode voltar para All in One SEO ” Local SEO no painel do WordPress e navegar até a guia “Maps”.

Vá em frente e insira a chave da API do Google Maps no campo “Chave da API”. Você verá uma visualização do mapa no AIOSEO assim que adicionar a chave.

Add API key and see map preview

Em seguida, você pode rolar para baixo para editar as configurações do mapa.

O AIOSEO permite que você exiba o Google Maps usando um bloco do Gutenberg, um shortcode, um widget ou um código PHP. Ele também permite que você escolha diferentes estilos de mapa e adicione um marcador personalizado ao seu mapa.

Edit map settings

Não se esqueça de clicar no botão “Salvar alterações” quando terminar.

Exibindo o Google Maps no WordPress

Em seguida, você pode adicionar o Google Maps a qualquer post ou página do WordPress. Para começar, basta editar ou adicionar uma nova página em seu site.

Quando você estiver no editor de blocos, clique no botão “+” na parte superior e adicione o bloco AIOSEO Local – Map em qualquer lugar da página.

Add local maps block

Depois disso, seu Google Map será adicionado à página.

O AIOSEO também permite que você edite as configurações do mapa a partir das opções à sua direita. Por exemplo, você pode exibir rótulos e ícones, adicionar um marcador personalizado e editar a largura e a altura do mapa.

Edit your map in WordPress

Se você tiver vários locais, poderá selecionar o local a ser destacado escolhendo entre as opções fornecidas no menu à sua direita.

Basta clicar no menu suspenso “Location” e selecionar o local de sua preferência para exibir em seu site.

Choose which location to display

Quando estiver satisfeito com suas configurações, vá em frente e publique a página.

Agora você pode visitar seu site para ver o Google Maps em ação.

Preview your map

Você também pode adicionar o Google Maps à seção de widgets do seu site, como a barra lateral ou o rodapé.

Para começar, vá para Appearance ” Widgets no painel de administração do WordPress. Em seguida, clique no botão “+” e adicione o bloco do widget “AIOSEO Local – Map” onde você deseja exibir sua localização.

Add maps widget

Depois disso, você pode editar as configurações do widget.

Por exemplo, você pode adicionar um título, alterar a largura e a altura do mapa, escolher o local a ser exibido, caso tenha vários locais, e editar o rótulo.

Edit map widget settings

É isso aí!

Agora, ao atualizar seu site, você verá o Google Maps na área de widgets.

Maps preview in widget area

Guias especializados sobre o uso de mapas no WordPress

Agora que você já sabe como adicionar o Google Maps ao seu site, talvez queira ver outros guias relacionados a mapas e localização no WordPress.

Esperamos que este artigo tenha ajudado você a aprender como adicionar o Google Maps ao seu site WordPress. Talvez você também queira ver nossas escolhas dos melhores plug-ins do WordPress para pequenas empresas e saber como adicionar um localizador de lojas do Google Maps no WordPress.

Se você gostou deste artigo, inscreva-se em nosso canal do YouTube para receber tutoriais em vídeo sobre o WordPress. Você também pode nos encontrar no Twitter e no Facebook.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Veja como o WPBeginner é financiado, por que isso é importante e como você pode nos apoiar. Aqui está nosso processo editorial.

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.

O kit de ferramentas definitivo WordPress

Obtenha acesso GRATUITO ao nosso kit de ferramentas - uma coleção de produtos e recursos relacionados ao WordPress que todo profissional deve ter!

Reader Interactions

34 ComentáriosDeixe uma resposta

  1. 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.

  2. 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

  3. 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?

  4. 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.

        Administrador

        • 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.

  5. 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?

  6. Miranda Olding

    Thanks – so clear x

  7. 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

  8. 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

  9. 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!

  10. 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?

  11. 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.

  12. Andy Meuleman

    A great lesson, easy to follow and implement.

    Much thanks, Andy

  13. 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

  14. 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?

  15. 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.

  16. WRC

    Thank you. Very helpful post.

  17. Rory

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

  18. 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

  19. 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?

  20. 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

  21. 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.

  22. 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

Deixe uma resposta

Obrigado por deixar um comentário. Lembre-se de que todos os comentários são moderados de acordo com nossos política de comentários, e seu endereço de e-mail NÃO será publicado. NÃO use palavras-chave no campo do nome. Vamos ter uma conversa pessoal e significativa.