Procurando por uma forma de incorporar conteúdo do Google Maps em seu site WordPress?
Como muitas coisas no WordPress, existem muitas formas diferentes para incorporar o Google Maps em seu site, dependendo de qual tipo de mapa você deseja incluir.
Neste post, começaremos mostrando como você pode adicionar Google Maps no WordPress sem um plugin. Em seguida, recomendaremos alguns plugins que podem ajudá-lo a incluir o Google Maps, bem como alguns benefícios de adotar essa abordagem. Também entraremos em detalhes sobre como usar a API do Google Maps de forma adequada, algo que agora é obrigatório.
Por fim, encerraremos com algumas considerações sobre desempenho de utilização do Google Maps no WordPress e compartilharemos dicas sobre como manter seu site WordPress carregando rapidamente, mesmo que seja necessário incorporar o Google Maps.
Você pode clicar em uma das opções abaixo para avançar diretamente para uma seção específica ou apenas leia o artigo inteiro.
- API do Google Maps agora é obrigatória
- Como adicionar Google Maps no WordPress sem um plugin
- Plugins WordPress para Google Maps que oferecem maior flexibilidade
- Efeitos sobre o desempenho e dicas para melhorar a performance do Google Maps
API do Google Maps Agora É Obrigatória
A partir de 11 de junho de 2018, a chave API passou a ser obrigatória para o Google Maps. Se você já implementou o Google Maps em seu site e ele não está mais funcionando, esse pode ser o motivo. Ou talvez esteja sem a chave API. A boa notícia é que para 99% das pessoas ela ainda deverá ser gratuita. Abaixo você encontra a tabela de preços da API do Google Maps.
O Google também te oferece um crédito recorrente de US$200 em sua conta de faturamento mensalmente para compensar seus gastos. Assim, a menos que você esteja gerando milhares de solicitações, usar o Google Maps em seu site não deve envolver custo algum.
Sabe o que mais mudou? Nada, mas agora você precisar seguir as seguintes etapas para usar o Google Maps no WordPress:
- Cadastre uma conta no Google Cloud Platform Console e a configure.
- Adicione suas informações de faturamento, mesmo que você não venha a ser cobrado.
- Adicione a chave API ao seu código de incorporação do Google Maps ou às configurações do plugin que estiver usando.
Como Conseguir Uma Chave API do Google Maps
Abaixo estão os passos para conseguir sua chave API do Google Maps.
Passo 1
Vá até o Google Cloud Platform Console. Se ainda não tiver uma conta, crie uma de graça.
Passo 2
Selecione ou crie um projeto.
Passo 3
Configure sua conta de faturamento. Mesmo que eles exijam que você informe um número de cartão de crédito, nunca haverá uma cobrança, a menos que os altos limites de uso sejam ultrapassados.
Passo 4
Será solicitado que você escolha um ou mais produtos. Isso vai depender do tipo de mapa desejado. Por exemplo, se você estiver incorporando um mapa em seu site WordPress sem um plugin (conforme demonstrado nos passos a seguir), o ideal é escolher a opção “Maps Embed API”.
Se você estiver usando um plugin como Google Maps Widget (demonstrado nas seções abaixo), sua escolha deve ser “Google Maps Static API”.
Se estiver usando um plugin ou tema de terceiros, ele deve oferecer a documentação sobre quais tipos de implementação do Google Maps são utilizados. Não se preocupe, porque você pode adicionar múltiplos tipos e alterá-los posteriormente.
Passo 5
Clique em “Habilitar”.
Passo 6
Clique em “APIs” e na opção “Credenciais” você encontrará sua chave API.
Passo 7
Se você estiver simplesmente incorporando a chave API do Google Maps, ela será exibida como texto comum em seu código-fonte. Assim, o ideal é restringi-la, do contrário outras pessoas poderiam usar sua chave API em seus próprios sites WordPress ou projetos e aumentar a quantidade de utilização de sua conta.
Para fazer isso, simplesmente clique no nome da sua chave API e será permitido que você adicione uma restrição. Em seu site WordPress, adicionar um HTTP referer deve ser suficiente, como por exemplo https://seudominio.com/*. Isso permite que ele realize chamadas apenas em seu website.
Como Adicionar Google Maps no WordPress Sem Um Plugin
Se você deseja incorporar apenas um mapa simples e não precisa de funcionalidades mais detalhadas como marcadores personalizados de localizações ou outras anotações, pode adicionar o Google Maps sem um plugin através do website normal do Google Maps que você utiliza diariamente.
Aqui está como isso funciona…
Passo 1: Copie o Código de Incorporação do Google Maps
Para começar, use o website do Google Maps para criar o mapa que você deseja incorporar.
Por exemplo, se deseja adicionar um marcador de local, abra o endereço desse lugar no Google Maps, ou se você quiser incorporar direções, abra a opção de rota.
Após criar o mapa que deseja incorporar em seu site, clique no menu suspenso no canto superior esquerdo:
Na lista de itens do menu, selecione a opção “Compartilhar ou incorporar mapa”:
Isso fará o pop-up “Compartilhar” ser aberto. Nela, clique na aba “Incorporar um mapa”.
Em seguida, será possível selecionar o tamanho desejado entre as opções suspensas. Para a maioria dos sites WordPress o tamanho padrão funciona bem, mas você pode aumentar ou diminuir as dimensões do mapa se desejar.
Após fazer os ajustes, clique no botão “Copiar HTML” para copiar o código de incorporação:
Na sequência, você precisará adicionar sua chave API ao código. Assim, ele ficará com uma aparência semelhante a esta:
<iframe src="https://www.google.com/maps/embed/v1/search?key=SUA_CHAVE_API¶meters allowfullscreen></iframe>Passo 2: Adicione o Código de Incorporação do Google Maps ao Site WordPress
Agora, tudo o que você precisa fazer é adicionar o código de incorporação ao seu site WordPress, no post ou página que deseja incluir o mapa.
Se você estiver usando o novo editor em blocos WordPress Gutenberg que foi lançado com o WordPress 5.0, pode fazer isso adicionando um bloco de HTML Personalizado e colando o código de incorporação nele. Não se esqueça de adicionar sua chave API.
É possível ter uma prévia de como seu mapa ficará clicando no botão Visualizar acima do bloco.
Se você ainda usa o editor clássico TinyMCE, pode adicionar o código de incorporação do Google Maps ao abrir a taba Texto e colar o código nela:
Após adicionar o código, é possível voltar para a aba Visual para observar uma prévia real do seu mapa.
E pronto! Você acabou de aprender como adicionar o Google Maps no WordPress sem precisar de nenhum plugin.
Use o Google My Maps Para Incorporar Mapas Mais Complexos Sem Um Plugin
Se você quiser ser mais criativo e usar outros recursos como múltiplos marcadores em locais, anotações personalizadas, entre outras possibilidades, é possível fazer isso sem a necessidade de um plugin com o serviço Google My Maps.
O My Maps é uma ferramenta oficial do Google que permite a criação e compartilhamento de seus próprios mapas personalizados. Com ela, você consegue criar algo como o exemplo abaixo, com muitas marcações e informações personalizadas que são exibidas quando o usuário clica em um dos locais marcados:
Aqui está como utilizá-la para adicionar o Google Maps personalizado no WordPress.
Passo 1: Crie Seu Mapa no Google My Maps
Para começar, vá até o Google My Maps e crie um novo mapa. Você pode usar a interface de construção para desenvolver seu mapa:
Não vamos cobrir muitos detalhes, mas essa interface permite que você construa mapas muito criativos. Para um olhar mais profundo, leia este artigo de ajuda do Google que aborda diversas funcionalidades importantes.
Passo 2: Gere o Código de Incorporação
Quando terminar de construir seu mapa, você precisará gerar o código de incorporação.
Entretanto, antes de conseguir tal código, é necessário tornar seu mapa público. Para fazer isso, clique no botão “Compartilhar”. Em seguida, clique em “Alterar”… no pop-up:
Em seguida, selecione “Ativado – Público na rede” e clique em “Salvar”:
Após fazer isso, clique no menu suspenso próximo ao título do seu mapa e selecione “Incorporar em meu site” para gerar o código de incorporação real:
Um pop-up com o código será aberto e você deverá copiá-lo. Não se esqueça de adicionar sua chave API.
Passo 3: Adicione o Código de Incorporação ao Site WordPress
Agora você pode adicionar o código de incorporação ao seu site WordPress como se o tivesse obtido do website normal do Google Maps.
Se você não souber como fazer isso, clique aqui para ir até a seção acima com o tutorial.
Use um Plugin WordPress Para Google Maps
Além dos métodos manuais citados acima, existem diversos plugins WordPress para Google Maps que podem ajudá-lo a incorporar mapas em seu site.
Há algumas razões que você talvez queira considerar para optar por um dos plugins ao invés dos métodos manuais:
- Eles permitem que você crie mapas mais complexos em uma interface simples.
- Você pode fazer tudo sem ter que sair do seu painel WordPress.
- Alguns deles fazem vinculações ao WordPress. Por exemplo, você é capaz de vincular marcadores de mapas aos posts WordPress.
- Alguns deles podem ajudá-lo a otimizar o Google Maps para melhorar o desempenho (mais sobre isso adiante).
Para todos esses plugins, você precisará gerar sua própria chave API do Google Maps antes de começar a incorporar mapas. Esse tutorial mostra como fazer isso.
Google Maps Widget
Google Maps Widget é um plugin simples para Google Maps que permite que você incorpore um mapa usando Google Maps Static API, uma opção que oferece uma abordagem mais adequada para o desempenho ao incorporar uma imagem estática ao invés de um mapa interativo (explicaremos isso mais a fundo na próxima seção).
Essa é uma excelente opção se você deseja algo simples e leve. Após fazer a ativação, será necessário inserir sua chave API do Google Maps nas configurações do plugin. É possível adicionar um mapa do Google em qualquer área de widget em seu site. Assim, os visitantes podem abrir uma versão interativa maior em uma lightbox:
Você também pode usar um mapa interativo diretamente se preferir, enquanto a versão Pro permite incorporar mapas em qualquer local de seu site com um shortcode.
Google Maps Easy
Google Maps Easy te ajuda a criar mapas personalizados com seus próprios marcadores e anotações.
Quando você adiciona marcadores, tem a capacidade de carregar seus próprios ícones personalizados, incluir textos e imagens em suas descrições e muito mais. Também é possível controlar como o mapa funciona, determinando se os usuários podem ou não usar o zoom:
Após criar seu mapa, você pode incorporá-lo usando um shortcode ou função PHP.
Intergeo
Intergeo é outra opção popular que permite que você crie seus próprios mapas com marcadores personalizados e tenha controle sobre todas as funcionalidades.
Após instalar e ativar o plugin, você será capaz de construir seus mapas diretamente em seu painel WordPress:
Em seguida, poderá incorporar os mapas em qualquer lugar do seu site usando um shortcode.
Gutenberg Block For Google Maps Embed
Gutenberg Block For Google Maps Embed é um plugin simples que adiciona um bloco dedicado do Google Maps ao novo editor WordPress Gutenberg.
Com esse bloco, você pode incorporar qualquer endereço e também escolher:
- Dimensões
- Nível de zoom
- Mapa interativo ou mapa estático (novamente, o segundo método ajuda no desempenho)
Ele não permite a criação de mapas personalizados – mas essa é uma opção conveniente se você usa o novo editor em blocos e deseja uma forma fácil de incluir alguns mapas.
O Google Maps Pode Atrasar Seu Site WordPress – Não Permita Que Ocorra
Embora o Google Maps permita que você incorpore diversas funcionalidades legais em seu site com mapas interativos, há uma troca em relação ao desempenho, pois ele precisa carregar muitos scripts para possibilitar que todas essas funcionalidades interativas sejam oferecidas.
Resumindo, incorporar o Google Maps pode causar lentidão em seu site.
Mas existem formas de combater isso.
Primeiro, se você não precisa que as pessoas sejam capazes de navegar interativamente no mapa em seu website, uma forma simples de acelerar tudo sem qualquer ferramenta de terceiros é:
- Fazer uma captura de tela do mapa que usará em seu site;
- Vincular essa captura de tela ao mapa real no website do Google Maps ou abrir um pop-up lightbox com o mapa interativo quando o usuário clicar sobre ela.
Dessa forma, seu site carregará apenas uma imagem normal – ao invés de todos os scripts associados ao Google Maps.
Como uma alternativa a fazer isso manualmente, você também pode usar o plugin AWEOS Google Maps iframe load per click. Ele substitui automaticamente as incorporações do Google Maps por uma imagem relacionada genérica. Assim, se um usuário clicar no botão “Carregar mapa” (“Load Map”), a incorporação completa do Google Maps será carregada:
Ou você também pode usar Google Maps Static API que retorna uma imagem regular sem qualquer JavaScript. Alguns plugins para Google Maps – incluindo Google Maps Widget e Gutenberg Block For Google Maps Embed – permitem que a Static API seja utilizada quando você cria seus mapas.
No entanto, percebemos que em algumas situações a abordagem estática não é suficiente e muitas pessoas querem incorporar a experiência interativa no Google Maps diretamente.
Se esse for o caso, outra boa maneira de acelerar o Google Maps é utilizar lazy loading. Com essa abordagem, seu site aguardará para iniciar o carregamento do Google Maps abaixo da dobra até que os visitantes comecem a rolar a página para baixo. Isso mantém seus tempos iniciais de carregamento velozes, enquanto continua permitindo que você incorpore conteúdo interativo do Google Maps.
Já escrevemos como usar lazy load em imagens e vídeos e a mesma ideia é válida para o Google Maps.
Existem alguns plugins que te possibilitam fazer isso. Por exemplo, o plugin a3 Lazy Load permite que lazy load seja utilizado em incorporações de iframes, o que inclui o Google Maps:
Outras opções são:
Resumo
Se você deseja apenas incorporar um único mapa em seu site, pode adicionar o Google Maps ao WordPress sem um plugin, através do recurso de código de incorporação embutido. Ou é possível usar a ferramenta Google My Maps para criar seu próprio mapa personalizado e incorporá-lo.
Além desses métodos manuais, existem muitos plugins WordPress para Google Maps que são capazes de te proporcionar muito controle sem precisar sair de seu painel WordPress.
Não importa qual método você escolha, preste atenção ao impacto que usar Google Maps causa no desempenho do site. Tente utilizar o Google Maps somente quando for absolutamente necessário e considere outras táticas como imagens genéricas ou lazy loading para reduzir o efeito negativo no desempenho.
Você tem outras perguntas sobre a utilização do Google Maps no WordPress? Compartilhe conosco nos comentários!
Brian tem uma enorme paixão pelo WordPress, e tem utilizado há mais de uma década e até desenvolve alguns plugins premium. Brian gosta de blogs, filmes e caminhadas. Conecte-se com Brian no Twitter.
Deixe um comentário