PUBLICIDADE

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: 08 de maio de 2022


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);


:: PARA USUÁRIOS QUE NUNCA CRIARAM UM PROJETO NO GOOGLE CLOUD:

(se já possui um projeto criado, pule esta parte e verifique o tutorial mais abaixo):


A primeira coisa que será preciso fazer é confirmar os termos de uso e, logo após, 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):


 

(!) Caso a página não redirecione automaticamente ou não mostre a opção acima, no menu lateral, desça até próximo do fim e clique na opção "Plataforma Google Maps" > "Visão Geral".

 

 

- Aguarde o carregamento da página e clique na opção "Maps JavaScript API" e depois, no botão ATIVAR;




- Aguarde a ativação do produto;

- Assim que concluso, clique na opção "Credenciais" (no menu lateral esquerdo) e logo em seguida, em "Criar Credenciais":

 

 

- Selecione a opção "Chave de API";


 

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


:: PARA USUÁRIOS QUE CRIARAM UM PROJETO NO GOOGLE CLOUD:


Caso já tenha criado (em algum momento) uma chave do Google Maps, uma tela como abaixo será exibida ao entrar no endereço https://cloud.google.com/console/google/maps-apis/overview:



Para copiar sua chave, clique na opção "APIs e Serviços" > "Credenciais" no menu lateral;



Na tela seguinte, será exibida todas as chaves que possui em sua conta. Localize a chave criada e clique na opção "EXIBIR CHAVE" e por fim, no ícone para copiar sua chave (API Key).


Após a realização dos procedimentos, 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/

  • google, maps, console, javascript




Este artigo foi útil?



Artigos relacionados



« Voltar