哎呀！出了些问题。此页面未正确加载 Google 地图。有关技术详细信息，请参阅 JavaScript 控制台
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37603847/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details
提问by Pisan Chueachatchai
Oops! Something went wrong. This page didn't load Google Maps correctly. See the JavaScript console for technical details.
哎呀！出了些问题。此页面未正确加载 Google 地图。有关技术详细信息，请参阅 JavaScript 控制台。
i don't know why
我不知道为什么
API error: RefererNotAllowedMapError
API 错误：RefererNotAllowedMapError
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
async defer></script>
</body>
</html>回答by AD.
Please take a look at Google maps api tutorial: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map
请看一下谷歌地图api教程：https: //developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map
When reading carefully, you will see that a key, YOUR_API_KEY, is needed
仔细阅读会发现需要一个键YOUR_API_KEY
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
</script>
To get your key go here: https://developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key
要获取您的密钥，请访问：https: //developers.google.com/maps/documentation/javascript/tutorials/adding-a-google-map#key
回答by PhysTutor
I had the same problem, trying to use Google Maps API. Got the same message to go look into JavaScript Console. What a waste of time!
我遇到了同样的问题，尝试使用 Google Maps API。得到了同样的消息去查看 JavaScript 控制台。真是浪费时间！
In my case the problem was that I mistyped the domain name (the referrer) when getting the Browser API key from Google.
就我而言，问题是我在从 Google 获取浏览器 API 密钥时输错了域名（引用者）。
Fixing the name of the referring domain (http://phystutor.com/*) inside Google API site solved the problem for me.
在 Google API 站点中修复引用域的名称 ( http://phystutor.com/*) 为我解决了这个问题。
回答by Webdrips
I had this same problem when going live with a site on a new host with a page that included an embedded map that had not been on the site previously. The map had worked on my development site, so this was a surprise to me as well.
当我在新主机上的网站上线时遇到了同样的问题，该网站的页面包含以前没有在该网站上的嵌入式地图。该地图在我的开发站点上工作过，所以这对我来说也是一个惊喜。
If you landed on this page doing a Google search, you'll want to start here: https://developers.google.com/maps/documentation/javascript/get-api-key.
如果您通过 Google 搜索登陆此页面，您需要从这里开始：https: //developers.google.com/maps/documentation/javascript/get-api-key。
If you wish to read the announcement about the API key requirement, read this: https://googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html
如果您想阅读有关 API 密钥要求的公告，请阅读：https: //googlegeodevelopers.blogspot.com/2016/06/building-for-scale-updates-to-google.html
Also note, in my case anyway, "&callback=initMap" caused an error.
另请注意，无论如何，在我的情况下，“ &callback=initMap”导致了错误。
回答by Nandam Mahesh
Replace your googleApi maps plugin with this...
用这个替换你的 googleApi 地图插件......
"https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
" https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false&callback=initMap"></script>
</body>
</html>Hope it works for you.
希望对你有效。
回答by dwerty
You can refer the Google Maps documentation for different error codes here : https://developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
您可以在此处参考不同错误代码的 Google 地图文档：https: //developers.google.com/maps/documentation/javascript/error-messages#deverrorcodes
The above error code is described in the documentation as below:
上述错误代码在文档中描述如下：
The current URL loading the Google Maps JavaScript API has not been added to the list of allowed referrers. Please check the referrer settings of your API key on the Google API Console.
加载 Google Maps JavaScript API 的当前 URL 尚未添加到允许的引用者列表中。请在 Google API 控制台上检查您的 API 密钥的引用设置。
Please check the link to the maps documentation for error messages for more details.
有关更多详细信息，请查看地图文档的链接以获取错误消息。
Google Maps now requires the use of a Google Maps API key to display a map on your site as per this article: https://googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-google.html.
谷歌地图现在需要使用谷歌地图 API 密钥才能根据本文在您的网站上显示地图：https: //googlegeodevelopers.blogspot.co.za/2016/06/building-for-scale-updates-to-谷歌.html。
回答by Lucky Chandra
<!DOCTYPE html>
<html>
<head>
<title>Simple Map</title>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map {
height: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=myAPI&callback=initMap"
async defer></script>
</body>
</html>