Erro Google Maps - Esta página não carregou o Google Maps corretamente. Consulte o console javascript para ver detalhes técnicos

Última atualização: 07 de janeiro de 2020


Vários usuários tem relatado que seus mapas pararam de funcionar sem mais nem menos. Isto realmente vem acontecendo agora, pois o Google começou a implementar um sistema de API_KEY para que se possa utilizar seus mapas em sites externos. Portanto, para utilizar os mapas em seus próprios sites, é necessário criar uma API_KEY e modificar um pouquinho a URL de acesso.

Mas calma, não precisa se preocupar. Resolver isto é bem simples (acredite) ;)

Então, vamos lá:

- Primeiro de tudo, precisamos acessar o endereço https://cloud.google.com/console/google/maps-apis/overview - (se não estiver logado em sua conta Google, será solicitado o login e senha);

(!) Caso nunca tenha acessado o Google Cloud Platform, você precisará confirmar os termos de uso e, logo após, precisará criar um novo projeto. Para isto, clique no botão CRIAR conforme imagem abaixo:


- Aguarde a criação do novo projeto que pode demorar alguns minutos e, assim que a página carregar, clique na opção "Maps JavaScript API" (conforme pode ser visto na imagem abaixo):


- Aguarde o carregamento da página e clique no botão ATIVAR;




- Aguarde a ativação do produto;

- Assim que concluso, clique na opção "Credenciais" e logo em seguida, clique no link "Credenciais no Gerenciador de API"  (ver imagem abaixo):

 

 

- Uma nova página será exibida. Aqui é local onde irá criar a Chave API para usar em seu site. Assim que a página carregar, clique no link "Credenciais em APIs e serviços" e em seguida, clique no botão azul "Criar credenciais" e escolha a opção "Chave de API";

 

 

- Pronto! Uma janela será exibida com seu código API. Clique em "Fechar" após copiar sua chave API.

Após isto, basta acessar o código fonte de sua página e localizar a linha: maps.googleapis.com/maps/api/js e substituir por https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_API (lembre-se de alterar o SUA_CHAVE_API para a API KEY que acabou de criar).

Se preferir, segue abaixo o código completo do script para exibição do Google Maps:

<script src="https://maps.googleapis.com/maps/api/js?key=SUA_CHAVE_API" type="text/javascript"></script>

Ah, se você estiver utilizando um tema já pronto (comprado na internet por exemplo), você terá que localizar dentro dele onde fica o link para a biblioteca do Google Maps que utiliza este endereço: maps.googleapis.com/maps/api/js

E está pronto! Bem simples, não? \o/

  • 240 usuários acharam útil
Esta resposta foi útil?

Artigos relacionados


Como resolver o erro: 500 Internal Server Error

O erro 500 - Internal Server Error - é um dos erros mais comuns que podem acontecer em uma hospedagem de sites e, para resolvê-lo, é bem mais...


Ativando funções pelo arquivo PHP.INI

Em nossos servidores, algumas funções que colocam em riscos a segurança de nossos clientes são desabilitadas por padrão, que é o caso das funções...


Como ativar a verificação em dois passos?

A verificação em dois passos permite adicionar uma camada adicional de segurança à sua central de cliente.Com esta etapa adicional, sempre que...


Como desbloquear meu IP no firewall do servidor?

Neste tutorial vamos explicar passo a passo como prosseguir com o desbloqueio do seu IP no firewall do servidor. A antiga ferramenta de...