Como colocar Google Maps no WordPress: 3 métodos simples

Um dos principais objetivos de um site de empresa é ajudar seus clientes a encontrarem você com mais facilidade. Se o seu negócio tem um endereço físico, é essencial mostrar todas as informações que as pessoas precisam para chegar até lá. E, na maioria das vezes, exibir um mapa — como o do Google Maps — é bem mais prático do que simplesmente dar um endereço.
A boa notícia é que o WordPress permite adicionar um mapa de diferentes formas. Neste artigo, vamos mostrar como colocar Google Maps no WordPress usando três métodos:
- Um plugin do Google Maps para WordPress;
- O recurso de incorporação do próprio Google Maps;
- As opções do seu tema WordPress.
Tem bastante coisa útil para ver, então vamos direto ao ponto!
Conteúdo
Por que vale a pena adicionar o Google Maps ao WordPress
Uma coisa fácil de concordar é que adicionar um mapa no seu site é muito melhor do que simplesmente só colocar o endereço escrito do seu negócio nele. Com um mapa, as pessoas podem ter uma rápida noção de que rua você está, o que há por perto e como encontrar você.
Escolher o tipo ideal de mapa pode ser um pouco mais difícil. Algumas pessoas acabam usando capturas de tela de mapas online, mas essa opção é bem limitada — principalmente quando você pode colocar o Google Maps no WordPress de forma gratuita e muito mais funcional.
Veja alguns motivos para usar o Google Maps no seu site WordPress:
- O mapa é interativo, então os visitantes podem navegar por ele e localizar seu negócio com mais precisão.
- Dá para destacar qualquer localização — inclusive várias ao mesmo tempo.
- Os usuários podem alternar entre o modo mapa e a visualização da rua, vendo como é o local por fora.
- O mapa pode ser enviado direto para o celular, facilitando o acesso a rotas de navegação até o endereço.
Naturalmente, existem outros serviços de mapas online além do Google Maps. Mas o Google é amplamente conhecido e usado, o que significa que a maioria dos visitantes já está familiarizada com sua interface e confia nas informações exibidas.
O único ponto negativo é que o WordPress, por padrão, não oferece um recurso nativo para adicionar mapas. Mas isso não é um problema — existem plugins, recursos do próprio tema ou o código de incorporação do Google Maps para resolver isso de forma simples. Vamos ver tudo isso a seguir.
Como colocar Google Maps no WordPress (3 métodos)
Neste guia, vamos mostrar três formas práticas de adicionar o Google Maps ao seu site WordPress. Vamos começar com os plugins, depois explicar como inserir o mapa manualmente e, por fim, mostrar como usar os recursos do seu tema para isso.
Vamos direto ao passo a passo.
1. Instale um plugin do Google Maps para WordPress
O Google Maps é uma função tão popular nos sites que não é nenhuma surpresa que existam muitos plugins do Google Maps para WordPress disponíveis.
Por exemplo, com o WP Google Maps, você pode adicionar mapas em páginas usando linhas de código. Esse plugin também oferece opções para personalizar seus marcadores e temas específicos para seus próprios mapas.

Na nossa opinião, o WP Google Maps é uma das melhores opções para você completar a ação de como colocar Google Maps no WordPress. Ele ainda é compatível com vários plugins de cache e Redes de Distribuição de Conteúdo (CDN).
Porém, existem muitos outros plugins que você pode usar. Entre eles o WD Google Maps, que é uma sólida alternativa e suporta múltiplos marcadores, mapas móveis amigáveis e outras opções de personalização.

Quando você adiciona um mapa usando o WD Google Maps, o próprio plugin guia você pelo processo usando um construtor interativo. Assim, além de aprender a fazer toda a configuração, você acompanha tudo em opções de pré-visualização.
Por fim, temos o Google Maps Widget, que também é um dos melhores plugins do Google Maps para WordPress. Esse plugin em particular, inclusive, é bem fácil de configurar. Ele permite que você adicione mapas em miniaturas à barra lateral ou no rodapé do seu site WordPress.

Esse plugin é ótimo quando você tem pouco espaço na página, já que widgets podem ser inseridos em quase qualquer lugar.
Entretanto, para sites de negócios, estamos mais inclinados a colocar mapas em tamanhos maiores, pois eles já são mais complicados de navegar. Ainda assim, vamos ver agora como colocar Google Maps no WordPress usando o plugin WP Google Maps.
Primeiro de tudo, navegue até o painel de controle do seu site WordPress. De lá, vá para a seção Plugins >> Adicionar Novo. Use o campo de busca e procure pelo plugin WP Google Maps. Quando você encontrá-lo, clique em Instalar Agora e, em seguida, Ativar.

Após a ativação, uma nova aba chamada Maps vai aparecer no seu painel de controle. Se você clicar, você vai acessar a uma tela inicial de informações gerais sobre o plugin. Você não precisa fazer nada em específico aqui. Apenas clique no botão azul Skip Intro and Create a Map para ir para a próxima tela.

Na nova tela, você vai ver que o plugin vai informar você que ele precisa de uma chave API do Google. Você pode obter a sua clicando no link Create an API Key Now.

O Google vai perguntar se você concorda com as condições e termos de uso antes de fornecer uma chave de API. Quando concordar, o Google vai configurar um novo projeto e você poderá gerar uma chave logo em seguida.

Na imagem acima, estamos borrando a nossa API Key. Você nunca deve compartilhar essa chave com outras pessoas. Afinal, ela está associada com a sua conta e você não quer que os outros abusem dela, não é mesmo?
De qualquer forma, a sua API Key será uma combinação de várias letras e números. Assim que a tiver, volte para o seu painel de controle e cole a API Key no campo indicado. Em seguida, clique em SAVE.

Você verá uma mensagem de confirmação. Além disso, já poderá começar a trabalhar no seu primeiro mapa. Clique em Editar no título My First Map.

Em seguida, o plugin vai perguntar a você qual plataforma deve sustentar o seu mapa. Escolha a opção Google Maps. Depois, clique em Select Engine.

Na nova tela, a primeira coisa que você precisa fazer é definir um nome para o seu mapa. Depois, especifique a sua largura e altura. A largura padrão de 100% vai automaticamente criar um mapa que se adaptar à resolução do seu site. Então ela é geralmente a melhor opção.

Você também poderá modificar o nível de zoom inicial que você que seu mapa mostre. Além de também poder decidir qual o tipo de layout de mapa que ele vai ser apresentado aos seus visitantes.
Por exemplo, você pode usar o tipo Roteiro ou o tipo Terreno. Na maioria das vezes, a primeira opção é a melhor e a mais útil para seus leitores. Ela mostra exatamente o caminho que eles precisam seguir para chegar ao seu destino.
Agora, deslize a tela para baixo e alcance a seção Marcadores. Aqui, você pode especificar a local exato que você quer que o seu mapa mostre. É só digitar o endereço ou fornecer coordenadas no GPS próprio dele. Você também pode mover o mapa e clicar com o botão direito do mouse em qualquer lugar que deseja marcar.

Abaixo do campo de Endereço/GPS, existe um outro campo em que você pode inserir tipos de Animação para o seu mapa. Por exemplo, você pode adicionar uma leve animação de balanço ao seu marcador no mapa quando ele for carregado.
Você também pode definir que o Google Maps posicione uma janela de informação (pop-up) próximo ao seu marcador, mostrando o endereço completo escrito do seu negócio físico.
Quando estiver com tudo pronto, clique em Salvar Marcador e página vai recarregar. Então, clique no botão azul Salvar Mapa no meio da tela. O plugin vai salvar todas as mudanças feitas.
Você pode embarcar o mapa criado com o plugin Google Maps WordPress copiando e colocando o código HTML em qualquer lugar do seu site. Você acha esse código (shortcode) dentro da aba Mapas do seu painel de controle, à direita da tela. Use a foto abaixo como referência.

E é isso! Você acabou de aprender a como colocar Google Maps no WordPress usando um plugin. Agora, você pode fazer com que seus visitantes ou clientes cheguem até o seu negócio ou loja física muito mais facilmente.
Use o recurso de incorporação do Google Maps
Se você prefere não usar um plugin para colocar Google Maps no WordPress, também dá para seguir um caminho manual. O próprio Google oferece um recurso de incorporação (embed) que permite adicionar mapas diretamente ao seu site.
Embora seja possível pegar o código de incorporação direto pelo Google Maps, uma forma ainda mais simples é usar um serviço como o Embed Google Map, que gera esse código para você de maneira rápida e prática.

Assim que configurar as opções de acordo com as suas preferências, clique no botão verde Get HTML-Code. O programa vai gerar um código HTML que você precisará adicionar ao seu site.

Copie e cole o código HTML mostrado. Volte ao painel de controle do seu site WordPress. Abre o editor de qualquer página ou postagem em que você queira adicionar o mapa do Google Maps.
Clique no botão “+” e adicione um bloco de HTML personalizado. No campo que surgirá, cole o código obtido no Embed Google Maps. Clique em “Visualizar” para confirmar está tudo certo.

Então, salve suas mudanças e dê uma olhada na nova página que você acabou de criar.

Legal, né? O ponto fraco dessa abordagem é que você vai precisar gerar novos códigos HTML cada vez que quiser adicionar um mapa a uma nova página, então tenha isso em mente.
3. Adicione um mapa pelo seu tema WordPress
O Google Maps é tão popular entre usuários do WordPress que alguns temas já vêm com essa funcionalidade integrada. Ou seja, com o tema certo, você não precisa instalar plugins nem adicionar códigos HTML manualmente para colocar Google Maps no WordPress.
Porém, encontrar um tema com esse recurso pode exigir um pouco de pesquisa. Em geral, apenas temas premium oferecem suporte nativo a mapas — o que significa que talvez seja necessário investir um pouco. Mas, se você já está pensando em comprar um tema premium, é provável que esteja buscando mais do que apenas essa funcionalidade.
Se não sabe por onde começar, uma boa dica é procurar por temas multipropósito para WordPress. Eles costumam vir recheados de recursos, e servem para criar praticamente qualquer tipo de site.
Um dos temas pagos mais populares que você pode encontrar e que tem essa compatibilidade com o Google Maps é o Divi. Esse tema oferece uma variedade de vantagens, incluindo um criador de páginas próprio.

Quando for criar páginas com o Divi Builder, você pode dividi-las usando colunas e linhas. Então, você pode criar e especificar módulos usando os espaços que aparecerem. Você vai poder personalizar cada campo com as funções que quiser adicionar ao seu site.

Como você pode perceber na imagem acima, um desses módulos se chama Map. Clicando nele, você terá que adicionar uma código chave de API do Google. Caso você não tenha uma, mostramos o processo de como conseguir um código no primeiro método deste artigo.
Quando colar o referido código no campo solicitado, você poderá escolher onde quer posicionar o seu mapa e adicionar quantos marcadores quiser nele.

Outros exemplos de temas pagos que oferecem suporte ao Google Maps no WordPress são o Travelmatic, o Estato e o Reales WP. Essa é uma função muito popular em temas voltados a viagens e a assuntos imobiliários. Mas você consegue encontrar temas WordPress pagos para outros tipos de assuntos, se procurar bem.
Descubra o que mais você pode fazer com o WordPress
Como fazer login no WordPress
2 maneiras de adicionar ícones ao menu do WordPress
Agendando posts no WordPress
Como gerenciar funções e permissões de usuários no WordPress
Guia de como reinstalar o WordPress
Como instalar o WordPress em um subdomínio
Guia completo sobre favicons no WordPress
Conclusão
Não existe forma melhor de mostrar um endereço no seu site do que com um mapa interativo. O Google Maps ajuda qualquer pessoa a encontrar o caminho até sua localização, o que aumenta as chances de receber mais visitas no seu negócio. E o melhor: é muito simples colocar Google Maps no WordPress, já que existem várias maneiras práticas de fazer isso.
Ficou com alguma dúvida sobre como usar o Google Maps no seu site WordPress? Deixe sua pergunta nos comentários!
Comentários
February 13 2019
Ola, gostei muito do conteudo mas estou com um probelam, gerei a API Key do Maps e coloquei no plugin mas esta dando erro, e tbm usei a mesma api key em outros plugin de maps mas o erro perciste, o que pode ser esse erro ??
February 21 2019
Oi, Edgar. Que bom que gostou do conteúdo :) Sobre o erro, neste caso é preciso verificar o erro em si e também se a API Key esta correta ou é valida, geralmente, ao acessar a página do seu website na qual possui o Google Maps, você consegue inspecionar e ir no Console do Navegador e ver qual erro apresenta ;)
January 29 2024
O Site indicado no post (embedgooglemap.net) gera um código HTML com um link escondigo no meio. Quem for usar preste atenção para remover
February 02 2024
Vamos dar uma olhada nisso, Douglas! Obrigado pelo apontamento.