Google Maps Javascript API v3随机发生NotLoadingAPIFromGoogleMapsError [英] NotLoadingAPIFromGoogleMapsError occurring randomly with Google Maps Javascript API v3
问题描述
我的webapp像这样在html头中加载Google Maps JS API v3:
My webapp loads Google Maps JS API v3 in the html head like this:
<head>
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&libraries=places"></script>
</head>
一切正常，除了在每100次移动网页浏览中，大约有1次，Google Maps都会回调到全局 gm_authFailure ，根据Google的说法，这会在身份验证失败"时发生
Everything works fine, except in ~1 out of 100 mobile pageviews, Google Maps will make a callback to global gm_authFailure, which according to Google occurs when 'authentication fails' https://developers.google.com/maps/documentation/javascript/events#auth-errors
要调试，我将从文档加载中捕获整个控制台日志，并在我的全局 gm_authFailure 函数中捕获
To debug, I'm capturing the entire console log from document load, and within my global gm_authFailure function:
-
我正在打印日志，该日志在调用
gm_authFailure之前一直显示以下内容，根据文档显示，这是在Google确定未加载地图库时发生的来自 https://maps.googleapis.com/maps/api/js :
I'm printing the log, which just prior to
gm_authFailurebeing called, always shows the below, which according to the docs, happens when Google determines the maps library wasn't loaded from https://maps.googleapis.com/maps/api/js:
Google Maps JavaScript API error: NotLoadingAPIFromGoogleMapsError
https://developers.google.com/maps/documentation/javascript/error-messages#not-loading-api-from-google-maps-error
我还使用 new Error().stack 捕获了调用 gm_authFailure 的调用堆栈，该堆栈输出以下内容，表示一个.正在从maps.googleapis.com加载地图库，并且b.该错误发生在库身份验证时，而不是调用库以使用它.
I'm also capturing the call stack that called gm_authFailure, using new Error().stack which outputs the below, which suggests a. the Maps library IS being loaded from maps.googleapis.com, and b. the error occurs at library authentication, rather than calling the library to use it.
at gm_authFailure (https://EXAMPLE.COM/MY_PATH:3276:22)
at https://maps.googleapis.com/maps-api-v3/api/js/40/7/common.js:73:368
at Qp.o (https://maps.googleapis.com/maps-api-v3/api/js/40/7/common.js:149:177)
at Object.c [as _tj1nu1] (https://maps.googleapis.com/maps-api-v3/api/js/40/7/common.js:67:84)
at https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate?1shttps%3A%2F%EXAMPLE.COM%2FMY_PATH&4sMY_API_KEY&callback=_xdc_._tj1nu1&key=MY_API_KEY&token=18280:1:28
假设:
- Affected users have some app, browser extension, or cellular data saving feature that's blocking or caching the maps library and thus confusing the Maps library
- Is it strange that in the
gm_authFailurecallstack, the initiating 'https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate' URL has my API key listed twice?
我知道的事情:
-
调用
gm_authFailure时，该库将不再工作，例如我无法创建新地图:
When
gm_authFailureis called, the library won't work anymore, e.g. I'm not able to create a new map:
var test_map = new google.maps.Map(document.getElementById("test_google_map"), {"zoom":2})
console.log(test_map.zoom)
未定义，而不是2
推荐答案
我们通过以下方式解决了该错误:
We fixed the error by this way:
通常，您会像这样插入Google地图脚本:
Normally you insert the google maps script like this:
<script src="https://maps.googleapis.com/maps/api/js?v=quarterly&key=%YOUR_GOOGLE_MAPS_API_KEY%&libraries=geometry,places"></script>
更改后，将上述脚本标记替换为脚本:
After the change, replace the above script tag with a script:
<script>
(function () {
// Some browsers caches the google maps script for a long time, which makes the token expired.
// In order to solve this, we force the browser to refetch the script after 12 hours. This won't have too
// much impact on performance, because the content of the script changes every day, so the cache is invalidated
// anyway.
var GOOGLE_MAPS_INVALIDATE_INTERVAL = 12 * 3600 * 1000;
var timestamp = Math.floor(Date.now() / GOOGLE_MAPS_INVALIDATE_INTERVAL) * GOOGLE_MAPS_INVALIDATE_INTERVAL;
var src = "https://maps.googleapis.com/maps/api/js?v=quarterly&key=%YOUR_GOOGLE_MAPS_API_KEY%&libraries=geometry,places×tamp=" + timestamp;
// Must use document.write. If we use document.body.appendChild, the main code (which depends on google map) might be executed before google maps is executed
// TODO: we should finally make the geoUtils to be an async function, that only resolves when google maps is ready.
document.write('<script src="'+src + '">\u003c/script>'); // if not using unicode escape (\u003c), browser will think the outside script is closed.
})();
</script>
说明:
每次发生错误时，用户似乎都在一天或几天前访问了该页面.
Every time the error happens, the user seems to have visited the page one or several days ago.
根据 NotLoadingAPIFromGoogleMapsError，即使加载正确的网址，Google Maps api的会话持续24小时.会话期满后将发生NotLoadingAPIFromGoogleMapsError.
According to NotLoadingAPIFromGoogleMapsError even when loading correct URL, google maps api's session lasts for 24 hours. And NotLoadingAPIFromGoogleMapsError will happen after the session expires.
对 https://maps.googleapis.com/maps/的请求api/js/AuthenticationService.Authenticate 包含参数"token = xxx".如果令牌不正确，则会发生错误.
The request to https://maps.googleapis.com/maps/api/js/AuthenticationService.Authenticate contains a param "token=xxx". When the token is incorrect, the error happens.
令牌的值是根据请求url和一些幻数计算得出的，这些幻数是在 https://maps.googleapis.com/maps/api/js (用于加载Google地图的初始脚本).脚本中的魔术数字每天都会更改.
The token's value is computed out from the request url and some magic numbers, which are defined in the script loaded from https://maps.googleapis.com/maps/api/js (the initial script to load google maps). The magic numbers in the script is changed each day.
在用户离开页面并返回之后，浏览器似乎在进行快速恢复"，这将从缓存中加载脚本内容，而不是遵循缓存控制.但是缓存中的幻数已过期，因此会发生错误.
After the user left the page and came back, the browser seems to do a "fast recovery", which will load the script content from cache, instead of respecting cache-control. But the magic number in the cache is expired, so the error happens.
但是，如果我们用带有时间戳的代码替换脚本标签，则可以确保在快速恢复"之后重新加载脚本内容.
But if we replace the script tag with some code with timestamp, we can make sure the script content is reload after the "fast recovery".
这篇关于Google Maps Javascript API v3随机发生NotLoadingAPIFromGoogleMapsError的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
