Javascript 谷歌地图错误：InvalidKeyOrUnauthorizedURLMapError

Google Map error: InvalidKeyOrUnauthorizedURLMapError

提问by Jim Andrews

I am developing in JavaScript/HTML/CSS an app that uses Google Maps. I am getting the following alert dialog box:

我正在用 JavaScript/HTML/CSS 开发一个使用谷歌地图的应用程序。我收到以下警报对话框：

"This page was unable to display a Google Maps element. The provided Google API key is invalid or this site is not authorized to use it. Error Code: InvalidKeyOrUnauthorizedURLMapError"

“此页面无法显示 Google 地图元素。提供的 Google API 密钥无效或此站点无权使用它。错误代码：InvalidKeyOrUnauthorizedURLMapError”

The app doesactually display the map element; the alert is not a problem except it should not appear at all. The map displays properly.

该应用程序确实显示了地图元素；警报不是问题，除非它根本不应该出现。地图正确显示。

I have gone in to the Google Developer's Console and, in the "Credentials" section, have "edited allowed referrers" to be mydomain.com/*

我进入了 Google Developer's Console，在“凭据”部分，“编辑允许的引用者”为 mydomain.com/*

I have also gone in to the Google Developer's Console in the APIs section and enabled 11 Google Maps APIs.

我还进入了 API 部分中的 Google Developer's Console，并启用了 11 个 Google Maps API。

回答by Yarimadam

After lots of referrer combinations, deleting and re-creating credentials i realized that i didn't enabled "Google Maps JavaScript API". What a shame. :)

经过大量的引用组合，删除并重新创建凭据后，我意识到我没有启用“Google Maps JavaScript API”。多可惜。:)

For anyone who is having trouble to get google maps api work please check if the API enabled first.

对于无法使用 google maps api 的任何人，请先检查是否启用了 API。

回答by Prabs

After struggling a lot with this issue I've found 1 solution for me. It might help people who are searching for a proper and exact solution but not the comments, downvotes and links.
(Map was not displayed in my case.)

在为这个问题苦苦挣扎之后，我为我找到了 1 个解决方案。它可能会帮助那些正在寻找适当而准确的解决方案的人，但不会帮助那些正在寻找评论、反对票和链接的人。
（在我的情况下没有显示地图。）

If suppose,the link of page where you are loading map is
http://example.com/abc/def/ghi/kpn.php

如果假设，您正在加载地图的页面链接是
http://example.com/abc/def/ghi/kpn.php

then give thesame(exactly the same)under Edit allowed references

然后给same(exactly the same)下Edit allowed references

If you try loading the same page using:

如果您尝试使用以下方法加载同一页面：

www.example.com/abc/def/ghi/kpn.php

www.example.com/abc/def/ghi/kpn.php

or

或者

http://www.example.com/abc/def/ghi/kpn.php

http://www.example.com/abc/def/ghi/kpn.php

then your page is loaded but not your map, and this alert is generated.

然后您的页面已加载，但您的地图未加载，并生成此警报。

CONCLUSION

结论

Use the same path(Url address) at these 2 places.

在这两个地方使用相同的路径（Url 地址）。

1. While loading the page which has map.

2. Under Edit allowed references.

1. 在加载有地图的页面时。

2. 下Edit allowed references。

After following this I've got rid from this alert.

在遵循此之后，我摆脱了此警报。

回答by Sereysethy Touch

First you need to go to https://console.developers.google.com/and select APIs.

首先，您需要转到https://console.developers.google.com/并选择 API。

In Google Maps APIs select Google Maps JavaScript API and make sure you enable API for Google Maps JavaScript.

在 Google Maps APIs 中选择 Google Maps JavaScript API 并确保为 Google Maps JavaScript 启用 API。

Secondly, you need to create an API key:

其次，您需要创建一个 API 密钥：

1. Go to Credentials
2. Create new key and select Browser Key
3. No need to specify any referrers

1. 转到凭据
2. 创建新密钥并选择浏览器密钥
3. 无需指定任何推荐人

So you should see Any referrer allowedafter you save.

所以你应该Any referrer allowed在保存后看到。

回答by PlanetAutomatic

After a lot of trial and error this worked for me (by Eduardo. Thanks !)

经过大量的反复试验，这对我有用（Eduardo。谢谢！）

The URL that needs to be authorized is the one in the Referrer header for the requests the browser sends to Google to load the API.

需要授权的 URL 是浏览器发送给 Google 以加载 API 的请求的 Referrer 标头中的 URL。

Under Browser Credentials > REFERERS

在下面 Browser Credentials > REFERERS

Add these

添加这些

1. .example.org/
2. www.example.org/*
3. http://www.example.org
4. http://example.org

1. .example.org/
2. www.example.org/*
3. http://www.example.org
4. http://example.org

回答by Jim Andrews

geocodezip provided the info i needed. I was indeed loading the googlemaps library twice: once in my index.html file and once in an iFrame. I changed my code so that the iFrame did not load the googlemaps library but, instead, used the parent. Thanks geocodezip!

geocodezip 提供了我需要的信息。我确实两次加载 googlemaps 库：一次在我的 index.html 文件中，一次在 iFrame 中。我更改了我的代码，以便 iFrame 没有加载 googlemaps 库，而是使用了父级。感谢地理编码！

回答by Khairudi

Go to APIs menu and find "Google Maps JavaScript API" after you open it just press "Enable API"

打开 APIs 菜单并找到“Google Maps JavaScript API”，然后按“启用 API”

回答by Lars Ljungqvist

I got it to work by exchanging the keys with my own special created keys AND reading this webpage a few times very carefully. My advice is to add or exchange your Google API Keys at https://console.developers.google.com/apis/credentialsbefore embarking in very complicated scripting.

我通过用我自己特殊创建的密钥交换密钥并非常仔细地阅读此网页几次来使其工作。我的建议是 在开始编写非常复杂的脚本之前，先在https://console.developers.google.com/apis/credentials添加或交换您的 Google API 密钥。

Insert your own API keys in the very first line of the Google Map javascript:

在 Google Map javascript 的第一行插入您自己的 API 密钥：

回答by Dinesh Sharma

If you have been setup all configuration like api key etc, and you still got the error, please enable all your mandatory APIs regarding to google maps.

如果您已经设置了 api 密钥等所有配置，但仍然出现错误，请启用所有与谷歌地图相关的必需 API。

Like:-

喜欢：-

Google Maps Embed API
Google Maps Geocoding API
Google Maps Geolocation API
Google Maps JavaScript API

Google Maps Embed API
Google Maps Geocoding API
Google Maps Geolocation API
Google Maps JavaScript API

回答by Eduardo

What worked for me was to use Firebug in order to find the exact URL that made the request to the Google Maps API. As stated in Google Maps API documentation on troubleshooting authorization, "How to find the correct URL" part:

对我有用的是使用 Firebug 来找到向 Google Maps API 发出请求的确切 URL。正如 Google Maps API 文档中关于授权故障排除的“如何找到正确的 URL”部分所述：

The URL that needs to be authorized is the one in the Referrer header for the requests the browser sends to Google to load the API.

需要授权的 URL 是浏览器发送给 Google 以加载 API 的请求的 Referrer 标头中的 URL。

In my case, lets suppose I have a website example.com. In the developer console, under Google Maps API key, I've added many combinations of referrer such as example.com/*, *.example.com/*, example.com, but still the InvalidKeyOrUnauthorizedURLMapErrorpersisted.

就我而言，假设我有一个网站 example.com。在开发者控制台中，在 Google Maps API 密钥下，我添加了许多引用的组合，例如example.com/*, *.example.com/*, example.com，但仍然InvalidKeyOrUnauthorizedURLMapError存在。

My solution, as I've mentioned, to use Firebug: open example.com and look for what was the referrer making request to https://maps.googleapis.com/maps/api/js?..., and it was http://example.com, and that is it. I've added http://example.com/*to the enabled URLs in the Developers Console under my respective API key and now everything works fine.

正如我所提到的，我的解决方案是使用 Firebug：打开 example.com 并查找向 发出请求的引用者是什么https://maps.googleapis.com/maps/api/js?...，它是http://example.com，就是这样。我已经http://example.com/*在我各自的 API 密钥下的开发人员控制台中添加了启用的 URL，现在一切正常。

It is important to know where to look for on Firebug: it is the Nettab. Just click on the request to maps.googleapis ...and look for the Referer

知道在 Firebug 上的何处查找很重要：它是Net选项卡。只需单击请求maps.googleapis ...并查找Referer

回答by AaronP

I was able to get this to work by deleting all my referrers and allowing all. Apparently there is a bug in the developer console that is causing problems. Some people say that they can get referrers to work by deleting all then adding all back in at once instead of line by line:

通过删除我的所有推荐人并允许所有，我能够让它发挥作用。显然，开发人员控制台中存在导致问题的错误。有些人说他们可以通过删除所有内容然后立即添加所有内容而不是逐行添加来使引用者工作：

https://productforums.google.com/forum/#!topic/maps/mSVyDazRMQo

https://productforums.google.com/forum/#!topic/maps/mSVyDazRMQo

Previous things I tried:

我以前尝试过的事情：

1. Regenerating Key
2. Setting all maps apis to enabled
3. Hard coding absolute paths of referrers

1. 重新生成密钥
2. 将所有地图 API 设置为启用
3. 推荐人的硬编码绝对路径

A side note, when I didn't include my api_key everything worked fined, though I'm sure they will eventually turn you off if you don't use your api_key.

附带说明，当我没有包含我的 api_key 时，一切正常，但我确信如果您不使用 api_key，他们最终会关闭您。