Mapa do Google não aparece no WordPress: como corrigir

Tipo Outros erros

Nome do erro Mapa do Google que não aparece EN: Google Map not displaying

Severidade Atenção

Descrição O mapa do Google que não aparece no WordPress quase sempre indica uma chave de API ausente, restrita demais ou sem faturamento ativo na conta. O resultado é um bloco cinza, um mapa com a marca d'água 'For development purposes only' ou um erro no console; a correção é gerar e restringir corretamente a chave da Google Maps Platform.

O que é o mapa do Google que não aparece no WordPress?

O mapa do Google que não aparece é a falha em que um bloco de mapa incorporado (via plugin, Elementor ou shortcode) exibe uma área cinza, uma mensagem de erro ou a marca d’água que escurece o mapa em vez do mapa funcional. Desde 2018 a Google Maps Platform exige uma chave de API com faturamento ativado, então mapas sem chave válida ou sem cartão na conta param de renderizar. As pistas exatas aparecem no console do navegador.

Como identificar

No lugar do mapa aparece um bloco cinza ou o mapa coberto pela marca d’água “For development purposes only”.
O console do navegador (F12) mostra o erro “Google Maps JavaScript API error: ApiNotActivatedMapError” ou “RefererNotAllowedMapError”.
O console exibe “BillingNotEnabledMapError”, indicando que a conta da Google Cloud não tem faturamento ativo.
O mapa funciona no editor do Elementor ou do plugin, mas some na página publicada para o visitante.

Antes de começar: Nunca deixe a chave de API do Google Maps sem restrição de referenciador. Uma chave aberta pode ser copiada do código-fonte e usada por terceiros, gerando cobrança no seu faturamento da Google Cloud.

Como prevenir

Restrinja a chave de API por referenciador HTTP e mantenha apenas as APIs do Maps que o site usa ativadas
Monitore a cota e o faturamento na Google Cloud para o mapa não sumir ao estourar o limite gratuito
Ao usar cache, exclua o script do Google Maps das regras de adiar ou combinar JavaScript

Causa

Nenhuma chave de API do Google Maps foi inserida no plugin ou no widget, então a biblioteca JavaScript carrega sem autorização.
A conta da Google Cloud não tem o faturamento ativado, exigência obrigatória da Maps Platform desde julho de 2018.
A restrição de referenciador HTTP da chave não inclui o domínio do site (ou inclui só o www), gerando RefererNotAllowedMapError.
As APIs necessárias (Maps JavaScript API, Geocoding API) não foram ativadas no projeto da Google Cloud, causando ApiNotActivatedMapError.
Um plugin de cache ou otimização adiou ou agrupou o script do Maps de forma que ele carrega antes da biblioteca da Google estar pronta.

Como resolver

Leia o erro exato no console: abra a página, pressione F12 e veja a aba Console. A mensagem da Google diz a causa precisa: chave ausente, faturamento, referenciador ou API não ativada.
Gere uma chave de API: no console da Google Cloud, crie um projeto, ative a Maps JavaScript API e a Geocoding API, e gere uma chave de API em Credenciais.
Ative o faturamento: vincule um cartão à conta da Google Cloud. A Maps Platform tem cota mensal gratuita, mas exige faturamento ativo, senão exibe a marca d'água de desenvolvimento.
Restrinja a chave ao seu domínio: nas restrições da chave, escolha Referenciadores HTTP e adicione as variações do site. Inclua com e sem www para evitar o RefererNotAllowedMapError.
```
https://seudominio.com/*
https://www.seudominio.com/*
```
Cole a chave no plugin e limpe o cache: insira a chave no campo do plugin de mapas ou do Elementor, salve e limpe o cache do site e do CDN. Confirme que o script do Maps não está sendo adiado de forma incorreta.

HTML

<!-- Carregamento correto da Maps JavaScript API com chave restrita e callback -->
<div id="mapa" style="height:400px;"></div>
<script>
  function iniciarMapa() {
    new google.maps.Map(document.getElementById('mapa'), {
      center: { lat: -23.5505, lng: -46.6333 },
      zoom: 14
    });
  }
</script>
<script async
  src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_RESTRITA&callback=iniciarMapa">
</script>

Perguntas frequentes

Por que o mapa do Google aparece cinza no WordPress?

O bloco cinza, geralmente com a marca d'água 'For development purposes only', indica que a chave de API existe mas a conta da Google Cloud está sem faturamento ativo. Ative o faturamento na conta para o mapa renderizar normalmente.

Preciso pagar para usar o Google Maps no site?

A Maps Platform oferece uma cota mensal gratuita, mas exige um cartão cadastrado e faturamento ativo. Para sites de tráfego comum, o uso costuma ficar dentro do gratuito. Sem o faturamento ativo, porém, o mapa não carrega.

O que é o erro RefererNotAllowedMapError?

Significa que o domínio do site não está na lista de referenciadores HTTP permitidos da chave. Edite as restrições da chave na Google Cloud e adicione o endereço do site com e sem www, usando o curinga no final.

Como achar a causa exata do mapa não carregar?

Abra a página, pressione F12 e leia a aba Console. A Google escreve o motivo: ApiNotActivatedMapError (API não ativada), BillingNotEnabledMapError (sem faturamento) ou RefererNotAllowedMapError (domínio não autorizado).

O mapa funciona no editor mas some na página. Por quê?

No editor o script às vezes carrega sem a restrição que falha no front-end, ou um plugin de cache adia o script do Maps na página pública. Verifique a restrição de referenciador da chave e exclua o script do Maps do cache.

Posso usar a mesma chave em vários sites?

Tecnicamente sim, mas não é recomendado. A restrição por referenciador prende a chave a um domínio. Para vários sites, gere uma chave por domínio, assim um uso indevido em um site não afeta a cota e a cobrança dos outros.

Grave

Como corrigir o mapeamento de campos no User Registration do WPForms

O mapeamento de campos no User Registration do WPForms falha quando os dropdowns em Settings -> User Registration não apontam para os campos certos do formulário, quando o campo Email obrigatório esta ausente ou quando a Meta Key de um custom user meta não casa com o nome real do campo, fazendo os dados não chegarem ao perfil do usuário.

Atenção

Como corrigir o Drip Content que não libera conteúdo no Tutor LMS

O Drip Content do Tutor LMS não libera o conteúdo quando o addon Content Drip está desativado, quando nenhum tipo de liberação foi escolhido na aba Content Drip do curso, ou quando a regra definida (data, dias após matrícula, sequencial ou pré-requisito) ainda não foi satisfeita pelo aluno.

Grave

Como corrigir o erro de upload de arquivos no WPForms

O upload de arquivos no WPForms falha quando a extensão esta fora da lista permitida do campo, o arquivo passa do limite do servidor (upload_max_filesize) ou um plugin de cache serve uma versão antiga do formulário. A correção trata cada uma dessas três frentes.

Atenção

Como corrigir o WPForms Post Submissions que não cria posts no WordPress

O WPForms Post Submissions não cria post quando o addon esta inativo, quando o formulário não foi montado com o template de envio de post, ou quando os campos do formulário não foram conectados aos campos de post na aba Post Submissions das configurações do formulário.

Informativo

Como corrigir o erro de conformidade GDPR no WPForms

O WPForms GDPR checkbox não aparece quando a opção GDPR Enhancements esta desativada nas configurações do plugin: sem ela, o campo GDPR Agreement fica oculto no construtor e o consentimento não e coletado nem registrado na entrada.

Atenção

Como corrigir o Survey and Polls que não exibe resultados no WordPress

O WPForms não mostra resultados de survey quando o reporting não foi ativado no formulário, quando o campo usado não e suportado pelo addon Surveys and Polls, ou quando ainda não ha entradas coletadas para calcular o relatório.

Setores

Extensões

Integrações

Como corrigir o mapa do Google que não aparece no WordPress

O que é o mapa do Google que não aparece no WordPress?

Como identificar

Como prevenir

Causa

Como resolver

Perguntas frequentes

Itens relacionados

Como corrigir o mapeamento de campos no User Registration do WPForms

Como corrigir o Drip Content que não libera conteúdo no Tutor LMS

Como corrigir o erro de upload de arquivos no WPForms

Como corrigir o WPForms Post Submissions que não cria posts no WordPress

Como corrigir o erro de conformidade GDPR no WPForms

Como corrigir o Survey and Polls que não exibe resultados no WordPress

Setores

Extensões

Integrações

Extensões

Hero Sections

Seções de CTA

Login

Blog

Cabeçalhos

Seções de FAQ

Cadastro

Blog individual

Rodapés

Seções de contato

Seções de preços

Faixas

Portfólio

Seções de equipe

Números

Logotipos