Google Maps JavaScript API RefererNotAllowedMapError


122

Nous essayons de développer une application de géolocalisation pour l'un de nos clients, et nous voulons d'abord la tester dans notre propre domaine.

Nous avons signé pour l'API JavaScript de Google Maps, et nous avons une clé de navigateur valide et notre domaine, www.grupocamaleon.com, a été autorisé à utiliser cette clé.

Mais nous ne pouvons même pas exécuter l'exemple le plus simple sans erreur.

Nous avons, dans notre domaine et avec notre clé, la démo suivante:

(1) http://www.grupocamaleon.com/boceto/aerial-simple.html

Mais cela ne fonctionne pas, et la console Firebug dit:

"Erreur de l'API Google Maps: Erreur de l'API Google Maps: RefererNotAllowedMapError (lien vers la documentation Google sur RefererNotAllowedMapError) URL de votre site à autoriser: (1)"

Ma page d'informations d'identification n'a pas la possibilité d'ajouter des référents à accepter, donc les solutions impliquant l'ajout de référents ne sont pas possibles pour le moment.

Ma page d'identification:

entrez la description de l'image ici

Pourquoi avons-nous cette erreur? Comment pouvons-nous y remédier?


Double possible de l' API Google Maps referrer pas permis . Votre code fonctionne pour moi (avec ma clé), il y a donc un problème avec votre clé, les référents autorisés ou les services autorisés à l'utiliser.
geocodezip

Mais je n'ai pas une telle possibilité dans ma page d'informations d'identification, comme vous pouvez le voir dans ma réponse ici. Un indice?
Grupo Camaleón Creativos

Eh bien, je suis un débutant et je ne sais pas encore comment utiliser correctement ce site. Désolé pour le dérangement. J'ai modifié ma question en ajoutant des informations sur ma page d'informations d'identification. Certaines solutions citées impliquent l'ajout de référents, ce que je ne peux pas faire pour le moment.
Grupo Camaleón Creativos

Si vous ne pouvez pas modifier les références de la clé, supprimez-la ou remplacez-la par celle que vous contrôlez. Une clé n'est pas requise, mais il y a des avantages à en inclure une.
geocodezip

1
J'ai créé une nouvelle clé sans restrictions APP ou API, il a dit expiredKey pendant 10 minutes, puis j'ai commencé à travailler. Ensuite, j'ai essayé d'ajouter uniquement l'API Places, mais elle est appelée à partir du Web et dit: Google Maps JavaScript API error: RefererNotAllowedMapErrormême après avoir attendu. Ensuite, j'ai essayé Maps JavaScript APIet ça n'arrêtait pas de dire RefererNotAllowedMapError, j'ai essayé de rafraîchir la page et cela a finalement commencé à fonctionner après 2 minutes et 40 secondes. Alors faites attention. Mais SANS rien ne fonctionne pour moi, et cela ne fonctionne que pour moi Maps JavaScript API. Il faut juste attendre beaucoup.
psycho brm

Réponses:


168

Je sais que c'est une vieille question qui a déjà plusieurs réponses, mais j'ai eu ce même problème et pour moi le problème était que j'ai suivi l'exemple fourni sur console.developers.google.com et entré mes domaines dans le format *.domain.tld/*. Cela ne fonctionne pas du tout, et j'ai essayé d' ajouter toutes sortes de variations à cela comme domain.tld, domain.tld/*, *.domain.tldetc.

Ce qui a résolu le problème pour moi, c'est aussi l'ajout du protocole réel ; http://domain.tld/*est le seul dont j'ai besoin pour qu'il fonctionne sur mon site. Je suppose que je devrai ajouter https://domain.tld/*si je devais passer à HTTPS.

Mise à jour: Google a enfin mis à jour l'espace réservé pour inclure httpmaintenant:

Champ de saisie du référent de l'API Google Maps


1
Je confirme: la seule combinaison qui m'a permis d'utiliser l'API étaithttp://www.---.com/*
Marco Panichi

6
Cette réponse est la seule qui a permis à mon code de fonctionner. Je peux confirmer que l'exemple fourni par Google ne fonctionne pas.
Jargs

1
Merci, @Google, de nous donner de fausses informations. http://----.com/* est le format correct.
Michael Yaeger le

2
Si vous avez plusieurs sous-domaines que vous pouvez faire, http: //*.example.com et https: //*.example.com pour couvrir toutes les bases
tim.baker

1
Peut-être que Google a mis à jour cette fonctionnalité - pour moi, cela fonctionne sans le protocole. J'ai example.com/*dans le champ des paramètres, et cela fonctionne à partir dehttps://example.com/map
Andy

21

Allez sur Google, vous êtes plus intelligents que ne le laisse la page d'identification de l'API. (Je sais parce que j'ai deux fils qui travaillent là-bas.)

La liste des "référents" est beaucoup plus difficile qu'elle ne le laisse supposer. (Bien sûr, cela devrait être plus indulgent.) Voici quelques règles qui m'ont pris des heures à découvrir:

Il existe probablement d'autres règles, mais c'est un jeu de devinettes fastidieux.


1
À propos de la réponse avant la modification, je manque également de patience. On dirait que les jokers (*) ne fonctionnent qu'à la fin d'une adresse ( http://my.site.com/*) ou dans un sous-domaine ( http://*.site.com). Dans TOUS les autres cas ça ne marche pas
Cristian Traìna

1
J'avais mis à tort une restriction pour n'autoriser que l'API Places (l'onglet juste à côté des restrictions de référent). Cela entraîne la même erreur RefererNotAllowedMapError.
Matt Greer

Ajout de www. à mon nom de domaine l'a corrigé pour moi. Je ne sais pas si l'ajout d'un caractère générique (*) à la fin du domaine, tel que cela (https://www.my-site.com/*)a également corrigé le problème.
Mugé le

mon application mobile ionique a le domaine ionic: // app # / tabs. Comment pourrais-je l'inclure dans les restrictions. J'ai essayé de nombreuses combinaisons mais en vain. Ex: ionic: // app # / tabs, httpionic: // app # / tabs, httpsionic: // app # / tabs, ionic: // *, ionic: // app # / *, httpionic: // *, ......
AUK4SO

@ AUK4SO - Le signe dièse ( #) a une signification particulière dans les URL. Voir <a name=...>. Ou vouliez-vous dire iconic://1234/foo?
Rick James

18

Selon la documentation, 'RefererNotAllowedMapError' signifie

L'URL actuelle chargeant l'API JavaScript de Google Maps n'a pas été ajoutée à la liste des référents autorisés. Veuillez vérifier les paramètres de provenance de votre clé API dans la Google Developers Console.

J'ai configuré l'API Google Maps Embed pour ma propre utilisation personnelle / professionnelle et jusqu'à présent, je n'ai spécifié aucun référent HTTP. Je n'enregistre aucune erreur. Vos paramètres doivent faire en sorte que Google pense que l'URL que vous visitez n'est ni enregistrée ni autorisée.

entrez la description de l'image ici


15

Rappelez-vous simplement que si vous le modifiez, cela peut prendre jusqu'à 5 minutes pour que les paramètres prennent effet.


15

J'ai essayé de nombreuses variantes de référents et j'ai également attendu 5 minutes jusqu'à ce que je réalise que l'exemple que Google remplit dans le champ de formulaire est défectueux. Ils montrent:

*.example.com/*

Cependant, cela ne fonctionne que si vous avez subdomain.ou www.devant votre nom de domaine. Ce qui suit a fonctionné pour moi immédiatement (en omettant la période principale de l'exemple de Google):

*example.com/*

9
Mauvaise idée - quelqu'un pourrait créer hackexample.comet utiliser votre API
HyderA

3
@HyderA - Une possibilité plus probable est que quelqu'un enregistre un tas de comptes Google gratuits pour obtenir des charges de carte supplémentaires.
ow3n

@HyderA, ils auraient encore besoin de la clé, donc pas une énorme chance. Mais vous avez raison, toujours un risque potentiel.
Eoin

mon application mobile ionique a le domaine ionic: // app # / tabs. Comment pourrais-je l'inclure dans les restrictions. J'ai essayé de nombreuses combinaisons mais en vain. Ex: ionic: // app # / tabs, httpionic: // app # / tabs, httpsionic: // app # / tabs, ionic: // *, ionic: // app # / *, httpionic: // *, ......
AUK4SO

10

Selon les documents de Google cela est arrivé parce que le urlsur lequel vous utilisez l'API Google Maps, il not registeredenlist of allowed referrers

ÉDITER :

Depuis Google Docs

Tous les sous-domaines d'un domaine spécifié sont également autorisés.

Si http://example.com est autorisé, alors http://www.example.com est également autorisé. L'inverse n'est pas vrai: si http://www.example.com est autorisé, http://example.com n'est pas forcément autorisé

Alors, veuillez configurer le http://testdomain.comdomaine, puis vous http://www.testdomain.comcommencerez à travailler.


Dans mon cas, il s'agissait d'un DNS mal configuré pour le domaine. Par exemple: www.testdomain.com a bien fonctionné testdomain.com n'a pas fonctionné, provoquant une erreur
Tahir Khalid

1
Il semblerait que la logique de cela soit inversée? Sauf si je manque quelque chose.
twobob

10

Vérifiez que le bon APIS est également activé.

J'ai essayé tout ce qui précède, les astérisques, les noms de domaine, les barres obliques, les barres obliques inverses et tout, même à la fin en n'entrant qu'une seule URL comme dernier espoir.

Tout cela n'a pas fonctionné et j'ai finalement réalisé que Google exige également que vous spécifiiez maintenant les API que vous souhaitez utiliser (voir capture d'écran)

entrez la description de l'image ici

Je n'avais pas ceux dont j'avais besoin activés (pour moi, c'était l'API JavaScript de Maps)

Une fois que je l'ai activé, tout a bien fonctionné en utilisant:

http://www.example.com/ *

J'espère que cela aide quelqu'un! :)



8

J'ai trouvé que même les vôtres HTTP Referreressont suffisamment valables, mauvais ensemble de API Restrictionscauses Google Maps JavaScript API error: RefererNotAllowedMapError.

Par exemple:

  • Vous utilisez l'API Javascript pour la clé.
  • Ajouter http://localhost/*àApplication Restrictions / HTTP Referrences
  • Choisissez Maps Embed APIau lieu deMaps Javascript API
  • Ce qui provoque RefererNotAllowedMapError

Oui, dans mon cas, l'erreur de classification était le problème
Andriy F.

Mais qu'en est-il de la sécurité? Est-ce que n'importe qui peut utiliser ma clé dans localhost si j'ai autorisé localhost?
Kaushal

5

Il y a beaucoup de solutions supposées sur plusieurs années, et certaines ne fonctionnent plus et d'autres ne l'ont jamais fait, donc ma prise à jour fonctionne fin juillet 2018.

Installer:

L'API JavaScript de Google Maps doit fonctionner correctement avec…

  • plusieurs domaines appelant l'API: example.cometexample.net
  • sous-domaines arbitraires: user22656.example.com etc.
  • protocoles HTTP sécurisés et standards: http://www.example.com/ethttps://example.net/
  • structure de chemin indéfinie (c'est-à-dire un grand nombre de chemins URL différents)

Solution:

  • En fait, en utilisant le modèle de l'espace réservé: <https (or) http>://*.example.com/* .
  • Ne pas omettre le protocole, mais ajouter deux entrées par domaine (une par protocole).
  • Une entrée supplémentaire pour les sous-domaines (avec un *. premier nom d'hôte).
  • J'avais le sentiment que l' RefererNotAllowedMapErrorerreur apparaissait toujours en utilisant la bonne configuration (et après avoir attendu amplement de temps). J'ai supprimé la clé d'identification, répété la demande (maintenantInvalidKeyMapError ), créé de nouvelles informations d'identification (en utilisant exactement la même configuration), et cela a fonctionné depuis.
  • L'ajout de simples protocoles et domaines ne semblait pas avoir inclus de sous-domaines.
  • Pour l'un des domaines, la configuration de travail ressemble à ceci:

Capture d'écran de la configuration de l'API Google

(Sous forme de texte :)

Accept requests from these HTTP referrers (web sites)
    https://*.example.com/*
    https://example.com/*
    http://*.example.com/*
    http://example.com/*

Dans mon cas, cette solution a aidé mais avait une restriction d'API sur la mauvaise API. Pour une raison quelconque, le même message d'erreur a été renvoyé. La modification de la restriction de l'API de "API Places" à "API Maps Javascript" a résolu le problème.
LMG

4

entrez la description de l'image ici

Acceptez les demandes de ces référents HTTP (sites Web)

Ecrire le chemin du répertoire localhost


3
selon le texte de Google, il est censé être une propriété facultative et si elle est vide, elle devrait fonctionner
ejectamenta

@ayanchakraborty - J'ai essayé 10 combinaisons différentes de localhost / index.html (et divers chemins) ainsi que diverses combinaisons de fichier: ///android_assets/www/index.html - mais rien ne fonctionne. Le RefererNotAllowedMapError dans la console me montre: L'URL de votre site à autoriser: __file_url __ // android_asset / www / index.html # / tab / map //// `- mais cela et les variantes ne fonctionnent pas non plus.
rolinger

4

J'ai rencontré la même erreur:

entrez la description de l'image ici

Ce lien explique comment configurer les restrictions de clé API: https://cloud.google.com/docs/authentication/api-keys#adding_http_restrictions

Dans mon cas, le problème était que j'utilisais cette restriction:

Référents HTTP (sites Web) Acceptez les demandes de ces référents HTTP (sites Web) (facultatif) Utilisez des * pour les caractères génériques. Si vous laissez ce champ vide, les demandes de tout référent seront acceptées. Assurez-vous d'ajouter des référents avant d'utiliser cette clé en production. https://*.example.net/*

Cela signifie que des URL telles que https://www.example.net ou https://m.example.net ou https://www.example.net/San-salvador/ fonctionneraient. Cependant, des URL telles que https://example.net ou https://example.net ou https://example.net/San-salvador/ ne fonctionneraient pas. J'avais simplement besoin d'ajouter un deuxième référent:

https://example.net/*

Cela a résolu le problème pour moi.


4

J'ajoute 2 domaines de site Web, définir "*" dans le sous-domaine ne fonctionne pas mais le sous-domaine spécifique "WWW" et non-sous-domaine a été travaillé pour mes sites Web en utilisant la même clé API Google Map.

ne pas utiliser "*" dans le sous-domaine

J'espère que cela aidera.


3

vous affichez une capture d'écran de votre page d'informations d'identification api, mais vous devez cliquer sur "Clé du navigateur 1" et partir de là pour ajouter des référents.


3

Pour des pages imbriquées plus profondes

Si vous avez un projet dans un dossier par exemple ou des pages imbriquées

http://yourdomain.com/your-folder/your-page vous pouvez entrer ceci dans

http://yourdomain.com/*/*

L'important étant de /*/*/*savoir jusqu'où vous devez aller

Il semble que le *ne correspondra pas /ou n'entrera pas dans des chemins plus profonds.

Cela donnera à votre domaine un accès complet, sauf si vous avez une imbrication plus profonde que cela.


3

Aucun de ces correctifs ne fonctionnait pour moi jusqu'à ce que je découvre que cela RefererNotAllowedMapErrorpeut être causé par l'absence de compte de facturation lié au projet. Assurez-vous donc d'activer votre essai gratuit ou autre.


3
  1. Que votre facturation est activée

  2. Que votre site Web a été ajouté à Google Console

  3. Que votre site Web soit ajouté aux référents de votre application.

  4. (faites un joker pour www et aucun www)

http://www.example.com/ * et http://example.com/ *

  1. Que Javascript Maps est activé et que vous utilisez les informations d'identification correctes

  2. Le site Web a été ajouté à votre DNS pour activer votre console Google ci-dessus.

  3. Souriez après que cela fonctionne!


Votre liste de référents autorisés se trouve dans la console Web de Google Cloud Platform (console.cloud.google.com) sousAPIs & Services > Credentials > (your key) > Application restrictions > HTTP Referrers
Master of Ducks

3

Ceci est un autre produit Google sh1tty avec une implémentation terrible.

Le problème que j'ai trouvé avec ceci est que si vous limitez une clé API par adresse IP, cela ne fonctionnera pas ... MAIS loin de la part de Google de clarifier ce point ... Ce n'est qu'après le dépannage et la recherche que j'ai trouvé:

Les clés API avec une restriction d'adresses IP ne peuvent être utilisées qu'avec des services Web destinés à être utilisés du côté serveur (tels que l'API de géocodage et d'autres API de service Web). La plupart de ces services Web ont des services équivalents dans l'API JavaScript Maps (par exemple, consultez le service de géocodage). Pour utiliser les services côté client de l'API JavaScript Maps, vous devrez créer une clé API distincte qui peut être sécurisée avec une restriction de référents HTTP (voir Restreindre une clé API).

https://developers.google.com/maps/documentation/javascript/error-messages

FFS Google ... Information assez importante qu'il serait bon de clarifier sur la configuration ...



2

J'ai enfin fait fonctionner le mien en utilisant cette astuce de Google: ( https://support.google.com/webmasters/answer/35179 )

Voici nos définitions de domaine et de site. Ces définitions sont spécifiques à la vérification de la Search Console:

http://example.com/ - A site (because it includes the http:// prefix)
example.com/ - A domain (because it doesn't include a protocol prefix)
puppies.example.com/ - A subdomain of example.com
http://example.com/petstore/ - A subdirectory of http://example.com site

2

J'ai également eu du mal à faire fonctionner cela, mais voici quelques conseils:

  • Les URL définies comme référents incluent http, par exemplehttp://example.com/*
  • L'API JavaScript de Google Maps a été activée
  • La facturation a été configurée sur ce compte

Une fois que tout cela a été résolu, les cartes s'affichent comme prévu.


1

J'essayais d'utiliser l' API Places (Autocomplete) et j'ai dû également activer l' API Maps Javascript à partir de Google Cloud Console avant que l'API Places ne fonctionne.


0

Vérifiez votre déclaration sur place. Pour charger l'API JavaScript de Google Maps, utilisez une balise de script comme celle-ci

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap"
async defer></script>

J'utilise cette déclaration sur mon site Wordpress dans le fichier function.php

wp_enqueue_script("google-maps-v3", "//maps.google.com/maps/api/js?key=YOUR_API_KEY", false, array(), false, true);

J'ai défini la clé API sur ce format et cela fonctionne bien

http://my-domain-name(without www).com/*

cette déclaration ne fonctionne pas

*.my-domain-name.com/*

0

La suppression des restrictions (à Aucune) a fonctionné pour moi.


6
la suppression des restrictions est considérée comme une mauvaise pratique et rend votre API vulnérable.
mtness

2
@mtness oui évidemment mais l'affiche l'a déjà essayé d'abord sans succès. Malheureusement, la documentation de Google n'est plus utile. Chaque réponse ici apporte de nouveaux conseils, c'est presque comme un jeu de devinettes ...
James Wong - Réintégrer Monica le


0

La console Javascript de Chrome m'a suggéré de déclarer l'adresse complète de la page dans ma liste de référents HTTP, dans ce cas http://mywebsite.com/map.htm Même si l'adresse exacte est http://www.mywebsite.com/map.htm - J'avais déjà des styles génériques répertoriés comme suggérés par d'autres, mais c'était la seule façon dont cela fonctionnerait pour moi.


0

Cela a fonctionné pour moi. Il existe 2 grandes catégories de restrictions dans les paramètres de clé API:

  • Application restrictions
  • API restrictions

Restrictions d'application:

En bas de la section Référent, ajoutez l'url de votre site Web " http://www.grupocamaleon.com/boceto/aerial-simple.html ". Il y a des exemples de règles sur le côté droit de la section en fonction de diverses exigences.

Restrictions d'application

Restrictions de l'API:

Sous les restrictions de l'API, vous devez sélectionner explicitement `` API Maps Javascript '' dans la liste déroulante, car notre clé unique ne sera utilisée que pour appeler l'API Google Maps (probablement) et l'enregistrer comme vous pouvez le voir dans le cliché ci-dessous. J'espère que cela fonctionne pour vous ..... a fonctionné pour moi

entrez la description de l'image ici

Vérifiez votre script:

Le problème peut également survenir en raison d'une alimentation incorrecte des clés dans la balise de script. Cela devrait être quelque chose comme:

  <script async defer src="https://maps.googleapis.com/maps/api/jskey=YOUR_API_KEY&callback=initMap"
  type="text/javascript"></script>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.