Chave de API do Googlemaps para Localhost

Como faço para que a chave da API do googlemaps funcione no localhost?

Criei uma chave de API e, nos referenciadores, adiciono o seguinte:

Accept requests from these HTTP referrers (websites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be 
accepted from any referrer. Be sure to add referrers before using this key 
in production. 

localhost

Isso não funciona e se eu excluir a chave da API, ela também não funciona?

1. Vá para este endereço: https://console.developers.google.com/apis
2. Crie uma chave de API para o seu projeto
3. Clique em "Biblioteca"
4. Clique em qualquer API que você deseja
5. Clique em "Ativar" (canto superior direito)
6. Clique em "Credenciais"> "Editar chave"
7. Em "Key Restriction", selecione "HTTP referrers (web sites)"
8. Digite o endereço do seu site (ou "localhost", "127.0.0.1", "localhost: port" etc para testes locais) no campo de texto e pressione ENTERpara adicioná-lo à lista
9. Use sua chave em seu projeto

Você pode seguir este caminho. Funciona pelo menos para mim:

na página de credenciais:

1. Selecione a opção com o endereço IP (opção nº 3).

2. Coloque o seu endereço IP do seu provedor. Caso contrário, pesquise seu endereço IP usando este link: https://www.google.com/search?q=my+ip

3. Salve isso.

4. Altere o link do mapa do Google como segue entre a tag de script:

   https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx "

5. Aguarde cerca de 5 minutos ou mais para permitir que sua chave de API se propague.

Agora o seu mapa do google deve funcionar.

Se você estiver trabalhando em localhost, crie uma APIkey separada para o seu desenvolvimento e, a seguir, remova as restrições dessa chave para que seu localhost possa usá-la. Lembre-se de não usar essa chave na produção, para não expor sua chave para caçadores online.

Tive o mesmo problema e todas as tentativas de fazer com que as restrições funcionassem em meu ambiente de host local não tiveram sucesso até que criei um apikey separado especificamente para desenvolvimento e, em seguida, removi suas restrições. No entanto, não uso essa chave no ambiente de produção e, assim que terminar os desenvolvimentos, irei deletar a chave API imediatamente.

Eu sei que esta postagem está atrasada, mas para as pessoas que provavelmente enfrentarão esse problema no futuro, este é o melhor caminho a seguir.

Acho que estou um pouco atrasado para a festa e, embora eu concorde que a criação de uma chave separada para desenvolvimento (localhost) e produto é possível fazer ambos em apenas 1 chave.

Ao usar Restrições de aplicativos -> referenciadores de http -> Restrições de sites, você pode inserir urls curinga.

No entanto, usando um caractere curinga como .localhost / ou .localhost: {porta}. (quando já tiver .seuwebsite.com / * ) parecem não funcionar.

Colocar um único * funciona, mas basicamente fornece uma chave ilimitada que também não é o que você deseja.

Quando você inclui o caminho completo sem usar o caractere curinga * também funciona, então, no meu caso, colocar:

http: // localhost {porta} /
http: // localhost : {porta} / outra coisa / aqui

Faz com que os mapas do Google funcionem tanto localmente quanto em www.yourwebsite.com usando a mesma chave API.

De qualquer forma, quando ter 2 chaves separadas também é uma opção, eu aconselho a fazer isso.

Você pode seguir este tutorial sobre como usar o Google Maps para testar no localhost.

• Clique neste link e siga o processo (criar novo projeto, chave API> chave do navegador, registrar o domínio 'localhost'): https://console.developers.google.com//flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true
• Gere a chave
• Implante o widget do Google Maps conforme descrito aqui: http://www2.microstrategy.com/producthelp/10/GISHelp/Lang_1033/GIS_Integration.htm
• Adicione sua chave de API do Google Maps a googleConfig.xml (conforme descrito no link anterior) ENTER_YOUR_KEY_HERE
• Reiniciar o servidor web

Verifique esses tópicos de SO relacionados:

• A chave da API v3 do Google Maps não funciona para testes locais
• Como usar a API simples do google maps no localhost
• A API do Google Maps v3 para localhost não funciona

Espero que isto ajude!

Você deve verificar o erro específico no console javascript (por exemplo, Ctrl+ Shift+ Kno Firefox para Windows).

Segundo Steven Gliebe (2016) , existem quatro casos comuns para esse problema. Se me permite resumir, desta forma:

1. MissingKeyMapError >> Obtenha a chave da API do Google Maps (mas também considere a alternativa nº 2)
2. RefererNotAllowedMapError >> Registre seu localhost: port no painel do desenvolvedor do Google .
3. ApiNotActivatedMapError >> Ativando a API do Google Maps na página Biblioteca de API do Google
4. InvalidKeyMapError >> Adicione sua chave aos seus scripts / códigos corretamente

Depois de fazer algumas modificações no código, limpe o cache do navegador conforme necessário.

Caso haja outros erros, você pode verificar a página de documentação dos códigos de erro da API do Google Maps .

Onde diz "Aceitar solicitações desses referenciadores HTTP (sites) (Opcional)", você não precisa ter nenhum referenciador listado. Portanto, clique no X ao lado de localhost nesta página, mas continue a usar sua chave.

Deve funcionar depois de alguns minutos.

As alterações feitas às vezes podem levar alguns minutos para entrar em vigor, portanto, aguarde alguns minutos antes de testar novamente.

Digitando 'meu IP' na pesquisa do google, peguei meu endereço IP público e colei no endereço IP (a terceira opção). Funciona para mim.

Digitando 'meu IP' na pesquisa do google, peguei meu endereço IP público e colei no endereço IP (a terceira opção). Funciona para mim.