Clé API Googlemaps pour Localhost

91

Comment faire fonctionner la clé API googlemaps sur localhost?

J'ai créé une clé API et sous référents, j'ajoute ce qui suit:

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

Cela ne fonctionne pas et si j'exclus la clé API, cela ne fonctionne pas non plus?

google-maps google-maps-api-3 api-key adam78
la source
Double possible de Comment définir la restriction de clé API Google - URL de provenance HTTP
Viktorianer

Réponses:

130
  1. Accédez à cette adresse: https://console.developers.google.com/apis
  2. Créez une clé API pour votre projet
  3. Cliquez sur "Bibliothèque"
  4. Cliquez sur l'API de votre choix
  5. Cliquez sur "Activer" (en haut à droite)
  6. Cliquez sur "Credentials"> "Edit Key"
  7. Sous "Restriction de clé", sélectionnez "URL de provenance HTTP (sites Web)"
  8. Tapez l'adresse de votre site Web (ou "localhost", "127.0.0.1", "localhost: port" etc pour les tests locaux) dans le champ de texte et appuyez sur ENTERpour l'ajouter à la liste
  9. Utilisez votre clé dans votre projet
mirzaei.sajad
la source
8
C'est ce que j'ai fait aussi, mais je me demande: cela signifie-t-il que TOUT LE MONDE travaillant localement (localhost / 127.0.0.1) pourrait utiliser ma CLE API (et peut-être en déduire des coûts pour moi après la nouvelle tarification du 11/06/2018) ?)
tmanolatos
31
@tmanolatos Oui, c'est ce que cela signifie. Il n'est pas recommandé de donner à votre clé de production les droits d'hôte local, car n'importe qui peut utiliser votre clé tout en s'exécutant localement. Au lieu de cela, vous devez conserver deux clés. Un pour la production qui peut être vu par n'importe qui et ne devrait donc être autorisé que sur votre domaine. Un pour le développement qui devrait être traité comme des informations d'identification (ne le partagez pas) et permet l'accès à partir de l'hôte local.
the_cheff
2
@tmanolatos Oui, mais vous devez créer deux clés, une pour tester l'application et une pour l'application principale,
mirzaei.sajad
J'obtiens cette réponse après avoir suivi les étapes ci-dessus: {"error_message": "Les clés API avec des restrictions de référent ne peuvent pas être utilisées avec cette API.", "Results": [], "status": "REQUEST_DENIED"} Voici l'URL , où DEV_KEY est remplacé par ma clé API: maps.googleapis.com/maps/api/geocode/…
rmutalik le
Il renvoie le JSON correct lorsque j'utilise ma clé API PROD_KEY.
rmutalik le
10

Vous pouvez suivre cette voie. Cela fonctionne au moins pour moi:

dans la page d'informations d'identification:

  1. Sélectionnez l'option avec l'adresse IP (option n ° 3).

  2. Mettez votre adresse IP de votre fournisseur. Si vous ne le faites pas, recherchez votre adresse IP en utilisant ce lien: https://www.google.com/search?q=my+ip

  3. Sauvegarde le.

  4. Changez votre lien google map comme suit entre la balise script:

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

  5. Attendez environ 5 minutes ou plus pour laisser votre clé API se propager.

Votre carte google devrait maintenant fonctionner.

Sulung Nugroho
la source
9

Si vous travaillez sur localhost, créez une clé API distincte pour votre développement, puis supprimez les restrictions sur cette clé afin que votre hôte local puisse l'utiliser. N'oubliez pas de ne pas utiliser cette clé en production, afin de ne pas exposer votre clé aux chasseurs en ligne.

J'ai eu le même problème et toutes les tentatives pour faire fonctionner les restrictions sur mon environnement localhost ont échoué jusqu'à ce que j'ai créé un apikey séparé spécifiquement pour le développement, puis supprimé ses restrictions. Cependant, je n'utilise pas cette clé sur l'environnement de production, et une fois les développements terminés, je supprimerai la clé API immédiatement.

Je sais que cet article est en retard, mais pour les personnes qui seront probablement confrontées à ce problème à l'avenir, c'est la meilleure voie à suivre.

user1556937
la source
5

Je suppose que je suis un peu en retard à la fête, et bien que je sois d'accord que la création d'une clé séparée pour le développement (localhost) et le produit, il est possible de faire les deux en une seule clé.

Lorsque vous utilisez les restrictions d'application -> les référents http -> les restrictions du site Web, vous pouvez entrer des URL génériques.

Cependant, en utilisant un caractère générique comme .localhost / ou .localhost: {port}. (quand déjà .yourwebsite.com / * ) ne semble pas fonctionner.

Le simple fait de mettre un seul * fonctionne mais cela vous donne fondamentalement une clé illimitée qui n'est pas non plus ce que vous voulez.

Lorsque vous incluez le chemin complet sans utiliser le caractère générique *, cela fonctionne également, donc dans mon cas, mettez:

http: // localhost {port} /
http: // localhost : {port} / something-else / here

Fait fonctionner les cartes Google à la fois localement et sur www.yourwebsite.com en utilisant la même clé API.

Quoi qu'il en soit, quand avoir 2 clés séparées est également une option, je vous conseillerais de le faire.

Patrick
la source
1

Vous pouvez suivre ce tutoriel sur la façon d'utiliser Google Maps pour tester sur localhost.

Vérifiez ces fils SO associés:

J'espère que cela t'aides!

Abielita
la source
2
lien rompu est rompu
Rafael Herscovici
1
@Dementic console.developers.google.com/flows/…
AE Gray
@AEGrey - pas pour moi, pour les futurs utilisateurs.
Rafael Herscovici
1

Vous devez vérifier l'erreur spécifique dans la console javascript (par exemple Ctrl+ Shift+ Kdans Firefox pour Windows).

Selon Steven Gliebe (2016) , il existe quatre cas courants pour ce problème. Si je peux le résumer, comme ceci:

  1. MissingKeyMapError >> Obtenez la clé d'API Google Maps (mais considérez également l'alternative n ° 2)
  2. RefererNotAllowedMapError >> Enregistrez votre localhost: port dans votre tableau de bord de développeur Google .
  3. ApiNotActivatedMapError >> Activation de l'API Google Maps dans la page de la bibliothèque d'API Google
  4. InvalidKeyMapError >> Ajoutez correctement votre clé à vos scripts / codes

Après avoir modifié le code, veuillez effacer le cache de votre navigateur si nécessaire.

Au cas où il y aurait d'autres erreurs, vous pouvez consulter la page de documentation des codes d'erreur de l' API Google Maps .

Santosa Sandy
la source
0

Là où il est dit "Acceptez les demandes de ces référents HTTP (sites Web) (facultatif)", vous n'avez pas besoin de répertorier un référent. Cliquez donc sur le X à côté de localhost sur cette page mais continuez à utiliser votre clé.

Il devrait alors fonctionner après quelques minutes.

Les modifications apportées peuvent parfois prendre quelques minutes pour prendre effet, alors attendez quelques minutes avant de tester à nouveau.

GMC
la source
0

En tapant «mon IP» dans la recherche Google, j'ai obtenu mon adresse IP publique et je l'ai collée dans l'adresse IP (la troisième option). Ça marche pour moi.

Alaa ma
la source
0

En tapant «mon IP» dans la recherche Google, j'ai obtenu mon adresse IP publique et je l'ai collée dans l'adresse IP (la troisième option). Ça marche pour moi.

etf
la source