Quer saber como colocar Google Maps no WordPress? Aprenda agora!

Ao criar o site da empresa, é essencial que a plataforma escolhida atenda a todas as necessidades digitais do negócio, o que faz muitas pessoas usarem o WordPress — um dos CMS mais completos do mercado. Mas uma dúvida ainda se perpetua na cabeça de alguns usuários: como colocar Google Maps no WordPress?

Se você também tem essa dificuldade, convidamos a continuar a leitura deste artigo até o fim. Falaremos sobre a importância de ter um mapa do Google no seu site e como fazer essa inserção de 3 maneiras diferentes. Segue abaixo o índice:

• Quais as dificuldades de colocar o Google Maps no WordPress?
• Por que considerar colocar o Google Maps no WordPress?
• Como colocar o Google Maps no WordPress?

Vamos lá?

Quais as dificuldades de colocar o Google Maps no WordPress?

Uma das vantagens de ter um site em WordPress é justamente a facilidade de criar páginas e posts, além de atribuir funcionalidades sem precisar ter conhecimentos de programação. 

Ou seja, o cenário em que o dono do negócio precisa recorrer ao programador para que ele faça a inserção de novos conteúdos (e até mesmo cobre pelo serviço) não existe no WordPress, pois é bem simples qualquer pessoa fazer isso (sobretudo após fazer o curso gratuito de WordPress na Prática da Rock University).

Porém, quando o assunto é colocar um mapa no site, a coisa não parece ser tão simples, começando pelo próprio gerenciador de conteúdos do WordPress.

Conforme é possível ver nessa imagem, entre as opções que o Gutenberg oferece, não existe uma dedicada a colocar mapas na sua publicação. Isso leva os usuários ao uso de “gambiarras”, como tirar um print do mapa no próprio Google Maps e colar a imagem no site, o que é uma prática não recomendada (explicaremos o porquê mais adiante).

Ao entrar no Google Maps, ele traz algumas opções de compartilhamento, o que gera um alívio àqueles que estão tentando colocar um mapa no site pela primeira vez. Mas esse alívio dura pouco, porque logo vem outra dificuldade. Observe a figura a seguir.

Ao clicar no botão de compartilhamento, o Google Maps mostra como primeira opção um link que leva a pessoa diretamente para o mapa, além de vias de compartilhamento nas redes sociais. Mas o objetivo aqui é inserir o mapa no site, certo? Colocar o link não é a intenção, e sim fazer com que o visitante veja o mapa cada vez que acessar sua página.

Isso faz com que alguns usuários cliquem na opção ao lado, que diz “Embed a map”, o que aumenta a complicação, pois o Google Maps te apresenta um código mais ou menos assim:

E agora? O que fazer com esse código para que o mapa seja exibido no seu site em WordPress? Veja a seguir.

Por que considerar colocar o Google Maps no WordPress?

Por mais que o site da sua empresa tenha o endereço escrito no rodapé, um mapa é bem mais útil e funcional. Primeiro porque nem todas as pessoas, ao acessarem o site, chegam ao rodapé e segundo porque um mapa é mais prático, sobretudo àqueles que acessam o site usando um celular.

Assim, colocar um mapa no site acaba se tornando conveniente aos seus visitantes. Por mais que vejamos algumas páginas que apresentem um print do próprio Google Maps, o ideal é que você tenha o próprio mapa embutido.

Afinal, os mapas permitem que os usuários interajam com ele, ponto que é fundamental neste momento em que conteúdos interativos ganham cada vez mais destaque.

Além disso, se seu negócio tiver mais de uma localidade que corresponda a filiais, franquias ou afins, você também pode apontá-los no Google Maps. 

Por fim, caso seus visitantes precisem enviar o mapa a outras pessoas ou compartilhá-lo em suas redes sociais, isso também é possível fazer a partir do Google Maps, que oferece essas ferramentas.

Existem outras opções para inserir mapas no WordPress além do Google Maps?

Sim, o WordPress conta com diversos plugins que permitem a inserção de mapas no seu site ou blog feito no CMS. 

Porém, é recomendável usar o Google Maps, e a razão disso é muito simples: ele é a maior referência em mapas na internet e traz a força de marca do Google.

Certamente, você quer passar segurança e credibilidade aos visitantes do seu site; logo, contar com as ferramentas do Google é uma das melhores formas de fazer isso.

Como colocar o Google Maps no WordPress?

Existem 3 formas de inserir o Google Maps no seu site em WordPress. Apresentamos todas a seguir e explicamos como funciona cada uma.

Adicione Google Maps usando um código embedado

Embedar significa pegar o código HTML e inserir no site para que seja exibida uma função específica. Nesse caso, trata-se do mapa do Google Maps. Vamos mostrar nas próximas linhas os passos de como fazer essa inserção no WordPress.

Passo 1: acesse o site do Google Maps — de preferência esteja logado com sua conta do Google.

Passo 2: insira, na barra localizada na parte superior esquerda, o endereço que você quer que apareça no mapa.

Passo 3: entre as opções que aparecem abaixo da foto, clique em “Share” para ter acesso às opções de compartilhamento.

Passo 4: como dissemos, é preciso embedar o código no site e, para que ele apareça, clique em “Embed a map”. 

Passo 5: a tela seguinte apresenta o código HTML e um preview do mapa tal como ele será exibido no site, clique em “Copy HTML” para copiar o código a ser embedado no site em WordPress.

Passo 6: em seguida, entre no seu WordPress e crie ou abra o editor do post ou a página em que o mapa deverá aparecer.

Passo 7: dentro do editor do WordPress, há duas opções para inserir o código embedado do Google Maps. Ensinaremos aqui ambas as formas.

Passo 8: a forma mais fácil consiste em clicar no botão de “+” e, nas opções que aparecem (veja imagem a seguir). Escolha “HTML personalizado” (se ele não aparecer entre as primeiras opções, clique em “Navegar por todos” para procurá-lo).

Passo 9: dentro do bloco de HTML, cole o código que você copiou do Google Maps, e o mapa será exibido no site.

Passo 10: antes de mostrar o resultado final, vamos ensinar como fazer a inserção do código de forma manual no editor do WordPress. O primeiro passo é clicar nos três pontinhos e, depois, em “Editor de código”.

Passo 11: dentro do editor de código, cole o código HTML onde quiser que o mapa seja inserido e, na sequência, clique em “Publicar”. 

Passo 12: pronto, o mapa do Google Maps aparecerá na página ou post do seu site.

Adicione o Google Maps no WordPress usando plugins

Como o Google Maps é uma ferramenta muito conhecida, é possível encontrar plugins do WordPress que dispõem dessa funcionalidade.

O WP Google Maps é um dos mais usados, pois permite que você coloque mapas a partir de linhas de código, além de trazer opções para customizá-los.

A seguir, aprenda os passos que devem ser seguidos para fazer a instalação e ativação desse plugin e a inserção do Google Maps no seu site.

Passo 1: dentro do seu painel do WordPress, vá em “Plugins” e clique em “Adicionar novo”.

Passo 2: na barra de busca, digite “WP Google Maps” e o plugin será o primeiro a ser exibido nos resultados; em seguida, clique em “Instalar agora”.

Passo 3: após fazer a instalação, vá em “Plugins instalados”, procure o WP Google Maps e clique em “Ativar”.

Passo 4: após fazer a ativação, você notará que uma opção chamada “Mapas” aparecerá no seu menu lateral: clique nela.

Passo 5: para criar seu primeiro mapa usando o plugin, clique no botão azul que diz “Skip intro and create a map”.

Passo 6: na tela que aparece a seguir, o plugin irá pedir um API key que precisa ser criado: Portanto, clique em “Create an API key now”.

Passo 7: o plugin deverá redirecionar você para o Google Cloud Platform, mas, caso não o faça, basta fazer login com sua conta do Google e ver uma tela como esta:

Passo 8: no menu localizado na parte esquerda, clique em “APIs e serviços”.

Passo 9: no novo menu que aparece na tela, clique em “Credenciais”.

Passo 10: na tela principal, clique em “Criar Credenciais” para que sejam exibidas as opções. Você deve escolher “Chave de API”.

Passo 11: sua chave será criada e você deve copiá-la para inserir no plugin (repare que cobrimos a numeração da chave, pois você não deve compartilhá-la com ninguém).

Passo 12: de volta à tela do plugin, cole a chave API no espaço que diz “Paste your API key here and press save” e clique no botão azul que diz “Save”.

Passo 13: depois de inserir sua chave API, o primeiro mapa aparecerá como “My first map” (nome que você pode editar para outro da sua preferência). Clique em “Editar”.

Passo 14: o plugin trabalha com dois tipos de mapas — OpenLayers e Google Maps —, de modo que, nessa tela que aparece na sequência, clique em Google Maps e, em seguida, no botão azul que diz “Select Engine”.

Passo 15: na próxima tela, você precisa escolher o nome do mapa, além de definir a altura, largura, nível de zoom, alinhamento do mapa no site e o tipo de mapa que deve ser exibido (roteiro ou terreno). 

Passo 16: no campo que diz “Marcadores”, você pode inserir o endereço completo ou GPS do local a ser mostrado no mapa, além de escolher o tipo de animação a ser aplicado no mapa, e clicar em “Adicionar marcador” para incluí-lo.

Passo 17: o endereço inserido aparecerá na relação “Seus marcadores”, que permite a inserção de outros endereços caso você tenha necessidade de apontar outros lugares no seu mapa.

Passo 18: na tela inicial do plugin, seu mapa será apresentado com um shortcode que deve ser copiado e colado numa página ou post do site para exibi-lo.

Passo 19: assim, ao abrir o editor de conteúdo do WordPress, cole o shortcode que foi apresentado pelo plugin e faça a publicação.

Passo 20: pronto, seu mapa será exibido com sucesso no seu site em WordPress! 

Adicione o Google Maps no WordPress por meio de tema

Embora seja pouco conhecida, uma terceira forma de inserir Google Maps no WordPress é por meio do tema que você usa no seu site. Claro que isso não se aplica a todos os templates, mas alguns contam com essa funcionalidade.

O WordPress oferece muitos temas gratuitos que ajudam bastante as pessoas que precisam criar um site de sucesso usando o CMS e não contam com um orçamento separado para investir num template pago. Contudo, a opção de inserção de mapas costuma estar disponível nas opções premium por ser uma funcionalidade específica.

Por isso, frisamos que a compra de um template deve ser fundamentada nos objetivos que você tem para seu negócio. Se já estiver considerando esse investimento e a exibição do Google Maps no site for importante, o ideal é que você compre um tema que traga essa função.

O Divi, por exemplo, tem um conjunto de ferramentas que permite inserir diversos elementos no site a partir de um construtor visual que facilita muito a vida dos donos de negócio sem conhecimentos de programação.

Vamos mostrar agora o passo a passo de como colocar o Google Maps no site usando esse tema.

Passo 1: para que você consiga usar o editor visual do tema (cuja usabilidade é bem mais intuitiva), clique no botão azul que diz “Use Visual Builder”. 

Passo 2: em seguida, você verá os módulos que o tema oferece. Procure por “Map”, função dedicada à inserção do mapa no site a partir do template.

Passo 3: ao escolher essa opção, o Divi apresenta uma tela em que você deve inserir a API key (que ensinamos acima como gerar) e o endereço do site.

Passo 4: após seguir esses passos, o mapa poderá ser visualizado no seu site em WordPress.

Assim, finalizamos este conteúdo cuja finalidade foi mostrar a você como colocar Google Maps no WordPress. Esperamos que tenha sido útil e que uma das três formas acima te atenda bem.

O Google também conta com outras ferramentas que podem ser utilizadas no WordPress, como o Adsense. Veja neste artigo como você pode usá-lo!