Saber como colocar Google Maps no WordPress é uma tarefa de cinco minutos. Isso ajuda a construir confiança, reforça seu SEO local e facilita a compra dos seus produtos ou serviços. Porém, garantir que o mapa seja exibido corretamente e tenha os recursos que você precisa pode levar horas. E se você esquecer de considerar os usuários de dispositivos móveis, talvez nem perceba que o mapa está cortado em telas pequenas.
Este guia apresenta três opções para adicionar mapas ao seu site WordPress: um iFrame nativo, um plug-in de mapas e um widget gratuito. Também abordaremos problemas e prós e contras de cada opção para que você possa decidir qual é a melhor para o seu caso.
Três opções para colocar Google Maps no WordPress
| Method | API key required | Cost | Mobile-responsive | Multi-pin support | Setup time |
|---|---|---|---|---|---|
|
iFrame nativo |
Não |
Gratuito |
Não; largura/altura fixas |
Não |
Cerca de 5 minutos |
|
Plug-in para WordPress |
Sim; gratuito para 10.000 carregamentos de mapa/mês |
Gratuito para recursos básicos; pago para recursos avançados |
Depende do plug-in |
Sim; geralmente pago |
Cerca de 15 a 25 minutos |
|
Widget Google Maps do Jotform |
Sim; gratuito para 10.000 carregamentos de mapa/mês |
Widget gratuito; inclui recursos avançados |
Sim |
Sim; gratuito |
Cerca de 15 minutos |
Opção 1: Usar um iFrame nativo do Google Maps
O iFrame do Google Maps é a forma mais simples e rápida de colocar um mapa no seu site. Você procura sua empresa no Google Maps, clica em Compartilhar, copia o código e cola em uma página do WordPress. Apresentamos um passo a passo aqui para que você possa configurar tudo rapidamente.
A simplicidade acaba sendo uma limitação por si só. Você não pode personalizar a aparência do mapa, adicionar vários marcadores ou exibir informações adicionais além da visualização padrão. Também é necessário experimentar diferentes tamanhos de mapa e layouts da sua página no WordPress para garantir que ele funcione bem em dispositivos móveis.
Como colocar Google Maps no WordPress com iFrame
Antes de começar, cadastre sua empresa na plataforma Perfil da Empresa no Google. Isso permite exibir suas informações completas no Google Maps, incluindo horários de funcionamento, avaliações ou cardápio. Se você está apenas apontando para um endereço que não é seu ou um ponto de referência, pule para o primeiro passo.
Obtenha o código de incorporação do Google Maps
- Acesse google.com/maps e pesquise o nome da sua empresa ou endereço.
- Confirme que você selecionou o marcador correto verificando os detalhes da empresa no lado esquerdo da tela.
- Clique em Compartilhar.
- Uma janela pop-up aparece na tela. Clique na aba Incorporar um mapa.
- Uma pré-visualização de como o mapa ficará no seu site aparece. Ele está definido no tamanho médio por padrão; você pode escolher exibir um mapa pequeno ou grande, ou até selecionar um tamanho personalizado usando o menu suspenso no canto superior esquerdo.
- Após selecionar o tamanho, clique em Copiar HTML. Isso copia o trecho de código do iFrame para a área de transferência.
Incorpore no WordPress (Editor de blocos/Gutenberg)
- No WordPress, abra a página ou post onde você deseja colocar o mapa.
- Clique no ícone + do insertor de blocos, digite HTML para filtrar e clique em HTML personalizado para adicionar o bloco à página.
- No novo bloco, clique em Editar HTML.
- Cole o código do iFrame na janela pop-up. A pré-visualização aparece no lado direito. Clique em Atualizar para finalizar.
- A página agora exibe o mapa incorporado via iFrame. Clique em Publicar ou Salvar para colocá-lo no ar no seu site, e visualize a página para ver como ficou.
Se esse processo não corresponde à forma como você edita páginas no WordPress, veja como adicionar HTML usando um destes editores:
Opção 2: Instalar um plug-in de mapa dedicado para WordPress
Comparado com a Opção 1, um plug-in dedicado para WordPress oferece mais personalização e funcionalidades. Você o instala no seu site da mesma forma que instala qualquer outro plug-in, cria e cola sua chave de API do Google Maps nas configurações e, em seguida, adiciona o elemento de mapa a uma página.
Essa opção adiciona certa complexidade. Obter a chave de API do Google Maps requer criar uma conta no Google Cloud Platform, configurar uma conta de faturamento e seguir um fluxo de configuração técnica. Além disso, os plug-ins de mapa funcionam no modelo freemium, oferecendo um plano gratuito razoável com recursos básicos, mas reservando as melhores funcionalidades para uma licença única ou uma assinatura anual.
Você estará adicionando mais plug-ins, então teste a velocidade do seu site após concluir a configuração. Se você hospeda seu site em um plano de baixo custo, muitos plug-ins podem deixar tudo consideravelmente mais lento, afetando a experiência do usuário e potencialmente fazendo com que os visitantes abandonem a página.
Fazer o mapa funcionar bem para usuários de dispositivos móveis depende do plug-in e de como você o configura. Por exemplo, o WP Go Maps recomenda definir valores específicos de altura e largura para evitar uma implementação comprimida.
Como configurar um plug-in de mapa no WordPress
Para este exemplo, vou usar um dos mais populares plug-ins de Google Maps para WordPress, o WP Go Maps.
Configurar o WP Go Maps
- Instale e ative o WP Go Maps.
- Clique em Pular introdução para finalizar a configuração.
- Clique em Configurações no menu lateral esquerdo.
- Na aba Geral, selecione Google Maps como o mecanismo de mapa.
Obtenha sua chave de API do Google Maps
Para extrair os dados do mapa da plataforma do Google, primeiro você precisa criar uma conta para obter sua chave de API.
- Acesse o site do Google Maps Platform e crie uma conta.
- Você será direcionado a um fluxo de configuração no Google Cloud Platform. Crie uma nova conta de faturamento definindo um nome, país e moeda.
- Adicione suas informações de contato e método de pagamento. Quando terminar, clique no botão Enviar e Ativar Faturamento.
Com essa opção, você recebe 10.000 carregamentos de mapa gratuitos por mês; se ultrapassar esse limite, o custo é de US$ 7 a cada 1.000. Se você ficar abaixo do limite, seu cartão nunca será cobrado, mas a conta de faturamento é obrigatória de qualquer forma. (Em março de 2025, o Google substituiu seu antigo crédito mensal de US$ 200 por uma cota gratuita separada para cada API; muitos tutoriais mais antigos ainda mencionam esse crédito, mas ele não existe mais.)
- O Google fará algumas perguntas sobre como você planeja usar o serviço do Maps. Responda e clique em Enviar.
- Clique em Chaves e Credenciais no menu lateral esquerdo.
- Clique no menu suspenso Criar Credenciais e, em seguida, em Chave de API.
- Na janela modal que aparece, você pode definir o nome e as permissões da sua nova chave de API. Não é necessário alterar essas configurações; role até o final e clique em Criar.
- Copie a chave de API.
É importante restringir sua chave antes de colocar o site no ar. Uma chave sem restrições no código-fonte da sua página pode ser copiada e usada para gerar cobranças indevidas na sua conta. Siga as práticas recomendadas de segurança de chave de API do Google para restringi-la ao seu domínio.
Finalize a configuração do plug-in no WordPress
- Volte à página de configurações do plug-in WP Go Maps na sua instalação do WordPress e cole a chave de API no campo Chave de API do Google Maps. Clique no botão Salvar Configurações após fazer isso.
- Clique em Mapas no menu lateral esquerdo.
- O plug-in já criou o primeiro mapa para você. Clique no botão Editar para visualizá-lo.
- É aqui que você configura como o mapa será exibido no seu site. Clique na aba Marcadores para começar a adicionar sua empresa.
- Clique no menu de três pontos e exclua o marcador de mapa predefinido.
- Clique em Adicionar Marcador na parte superior.
- Pesquise o endereço da sua empresa e selecione-o quando aparecer na lista.
- Clique no botão Adicionar Marcador para finalizar.
- Sua empresa agora está marcada no mapa. Você pode personalizar o nível de zoom e outras configurações visuais voltando e clicando no botão Configurações. Lembre-se de clicar em Salvar Mapa na parte inferior da tela quando terminar.
- Quando estiver pronto para colocar o mapa em uma página do seu site, clique no botão Obter Shortcode no canto inferior esquerdo. Isso copiará o shortcode para a sua área de transferência.
- Vá até a página onde deseja adicionar o mapa, clique para inserir um novo bloco e digite Shortcode para filtrar as opções. Clique nele quando aparecer.
- Cole o shortcode no campo de entrada e clique em Publicar ou Salvar.
- Ao visitar a página, o mapa exibe seu marcador com as configurações que você selecionou.
Opção 3: Adicionar um widget gratuito e personalizável do Google Maps (recomendado)
O Widget Google Maps do Jotform é um mapa gratuito e totalmente personalizável que não exige a instalação de um plug-in nem o pagamento de uma taxa de licença. Com ele, você pode
- Adicionar uma ou várias localizações que são exibidas no mesmo mapa.
- Escolher a visualização do mapa, incluindo mapa rodoviário ou satélite.
- Adaptar para um tema claro ou escuro, com controle de arredondamento de cantos para as caixas.
- Definir o tamanho, o layout e o nível de zoom do mapa.
Em comparação com iFrames nativos, ele é personalizável, permite múltiplos marcadores no mesmo mapa e já é responsivo por padrão. Em comparação com um plug-in, ele não sobrecarrega o seu site e não exige um plano pago para desbloquear todos os seus recursos.
Apesar dessas vantagens, o Widget Google Maps do Jotform ainda requer uma chave de API do Google Maps. Você precisará seguir as etapas de configuração e criar uma conta de faturamento com o Google.
Como adicionar o Widget Google Maps do Jotform ao seu site
- Acesse a página do Widget Google Maps do Jotform. Na maioria dos casos, a ferramenta de configuração carrega automaticamente; se não carregar, clique em Criar Novo Widget de Site para começar.
- Siga este guia sobre como obter sua chave de API do Google Maps. Ele cobre todas as etapas detalhadas na Opção 2, além de como restringir sua chave para mantê-la segura. (Lembre-se de que o Google Maps permite 10.000 carregamentos de mapa gratuitos por mês. A cada 1.000 carregamentos adicionais, o custo é de US$ 7.) Quando terminar, cole sua chave de API do Google Maps no campo de entrada.
- Ajuste as configurações gerais conforme sua preferência. Isso inclui a aparência do mapa e quantas localizações você deseja adicionar. As capturas de tela aqui usam os escritórios do Jotform em San Francisco e no Canadá para mostrar um mapa com múltiplos marcadores, mas você pode adicionar uma única localização ou quantas precisar. Clique em Continuar quando terminar.
- Altere as configurações de estilo, como tema, fonte ou CSS personalizado. Clique em Continuar quando terminar.
- Personalize o layout e os recursos extras nesta etapa final. Clique em Experimente no Seu Site Gratuitamente quando estiver pronto.
- Crie uma conta gratuita no Jotform ou faça login em uma conta existente. O código de incorporação aparece após a conclusão do login. Clique em Copiar Código.
- Adicione o código de incorporação à sua página com um bloco de HTML personalizado, seguindo as etapas 7 a 11 da Opção 1: Insira o bloco, cole o código e clique em Publicar ou Salvar.
- Abra a página no seu celular. Diferentemente do iFrame nativo da Opção 1, o widget se redimensiona automaticamente para caber na tela, então o mapa que ficou cortado no celular naquela opção é exibido por completo aqui.
Potencialize seu site WordPress com widgets inteligentes e sem servidor
Adicionar recursos inteligentes ao seu site geralmente significa pagar por novos plug-ins ou lidar com código. O Jotform ajuda você a pular tudo isso: junto com o Widget Google Maps, o diretório de widgets para sites do Jotform oferece mais de 150 widgets gratuitos e sem código, configuráveis apenas colando um simples trecho de HTML no seu site.
Estas opções combinam bem com o widget de Maps:
- Widget de Horário de Funcionamento: Este widget exibe os horários de funcionamento, incluindo um status ao vivo de aberto ou fechado que você pode colocar ao lado do seu mapa, para que os visitantes que encontrarem você no mapa saibam instantaneamente se você está aberto. Não requer chave de API.
- Widget de Agendamento: Adicione um recurso de agendamento ao seu site para que as pessoas possam marcar um horário com você. Este widget permite adicionar disponibilidade, listar seus tipos de serviço com duração e preço, e aceitar reservas sem precisar de uma ferramenta extra.
- Widget de FAQ: Este widget lista respostas para perguntas frequentes em um acordeão com busca. Fazer o mesmo no WordPress é fácil, mas obter a experiência refinada que este widget oferece significaria lidar com código ou instalar mais um plug-in.
Se você está em um plano de hospedagem WordPress básico, os plug-ins consomem recursos essenciais do servidor, deixando seu site mais lento e proporcionando uma experiência ruim aos visitantes. Os widgets do Jotform rodam na infraestrutura do Jotform, então a carga não é processada pelo seu site. Isso libera recursos do servidor, tornando seu site mais rápido e fácil de usar.
Quer levar seu site WordPress para o próximo nível? Confira
- Nosso guia Como usar o WordPress para aprender a criar um site profissional sem investir em um curso de web design
- A integração do Jotform com o WordPress, que simplifica sua coleta de dados com automação, pagamentos e recursos avançados em uma única plataforma
Perguntas frequentes
Sim, pode deixar seu site mais lento. Um Google Maps interativo carrega uma grande quantidade de JavaScript, variando de 100 KB a 2 MB. Em um teste independente, uma única incorporação custou 14% na pontuação de velocidade da página, aumentando o tempo até o site estar pronto para interação em 6,5 segundos. Para evitar lentidão, carregue o script do mapa apenas na página que o utiliza, use lazy-load no iFrame ou adicione uma imagem de placeholder com clique para carregar.
Sim, mas não com a incorporação básica por iFrame. Para múltiplos marcadores, crie um mapa no Google My Maps: adicione seus marcadores, defina-o como público, copie o código de incorporação e cole no seu site. Embora você possa adicionar quantos marcadores quiser, não é possível estilizar o mapa nem adicionar painéis de detalhes personalizados. Se você quer múltiplos marcadores e recursos de personalização, o Widget Google Maps do Jotform dá conta do recado (ele só precisa da sua chave de API do Google Maps).
Sim. Muitos plug-ins de Google Maps para WordPress têm planos gratuitos funcionais que cobrem mapas básicos, embora recursos avançados geralmente sejam reservados para o plano pago. Se você preferir não instalar um plug-in, o iFrame nativo do Google Maps e o Google My Maps são ambos gratuitos. O Widget Google Maps do Jotform também é gratuito, adicionando personalização e mapas com múltiplos marcadores que não aumentam a carga do servidor, mas ainda requer uma chave de API do Google Maps.
Este artigo é para proprietários de sites WordPress, negócios locais, corretores de imóveis e organizadores de eventos que desejam comparar formas de adicionar um mapa interativo e responsivo usando incorporações, plug-ins ou widgets personalizáveis.
Enviar Comentário: