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.
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.
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).
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.
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.
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.
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.
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.
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).
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.
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.
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”.
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).
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.
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).
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).
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”.
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).
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).
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).
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.
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.
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.
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.
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.
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.
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.
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.
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.
É isso aí!
Agora, ao atualizar seu site, você verá o Google Maps na área de widgets.
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.
- Como incorporar o Bing Maps no WordPress (passo a passo)
- Como adicionar um mapa interativo no WordPress
- Como incorporar um mapa do Google em formulários de contato (com pin de mapa)
- Melhores plug-ins do Google Maps para WordPress (a maioria é gratuita)
- Como adicionar o localizador de lojas do Google Maps no WordPress
- Melhores plug-ins de localização de lojas do WordPress para impulsionar o SEO local
- Como adicionar o esquema de vários locais para empresas locais no WordPress
- Como adicionar o preenchimento automático para campos de endereço no WordPress
- Melhores plug-ins de geolocalização e GeoIP para 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.
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.
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
WPBeginner Support
For tweaking the CSS, it would depend on the specific embed but you can find the CSS needed to change using Inspect Element. We have a guide on Inspect Element you may find helpful here:
https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
Administrador
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?
WPBeginner Support
For what you’re wanting, you would want to take a look at our article below:
https://www.wpbeginner.com/plugins/how-to-add-interactive-travel-maps-in-wordpress/
Administrador
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.
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?
Miranda Olding
Thanks – so clear x
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
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
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!
divi
Great Work Bro!!!!
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?
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.
Andy Meuleman
A great lesson, easy to follow and implement.
Much thanks, Andy
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
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?
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.
WRC
Thank you. Very helpful post.
Rory
Hi, I was wondering if it is possible to have Google Maps to show the location of Groups (Buddypress)?
Thanks for your help.
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
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?
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
Bongo
Powerful stuff man. Thanks
Erwin
Nice straight forward instructions. I posted a nice trick on how to get rid of the info bubble on the other day (http://goodwebsites.co.nz/how-to-remove-info-bubble-for-embedded-google-maps). Might be helpful.
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.
Widdershins
That is so cool! … thanks
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