Javascript 谷歌地图错误：糟糕！出了些问题。此页面未正确加载 Google 地图
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38160006/
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
Google Maps error: Oops! Something went wrong. This page didn't load Google Maps correctly
提问by Tiikeri Design
First time asking on stackoverflow, so be patient if I break some rule, tried my best to solve by myself searching for a solution, but had no luck.
第一次在 stackoverflow 上提问，所以如果我违反了一些规则，请耐心等待，我尽力通过自己寻找解决方案来解决，但没有运气。
I used a tool to help me customize a google map with multiple markers location and styles (code below). I test it local and on my own domain and it's working good. When I publish it on the production site, it shows for a while then an error message appear
我使用了一个工具来帮助我自定义具有多个标记位置和样式的谷歌地图（下面的代码）。我在本地和我自己的域上对其进行了测试，并且运行良好。当我在生产站点上发布它时，它会显示一段时间然后出现错误消息
"Oops! Something went wrong. This page didn't load Google Maps correctly. See the >JavaScript console for technical details"
“糟糕！出了点问题。此页面未正确加载 Google 地图。有关技术详细信息，请参阅 >JavaScript 控制台”
Javascript console on Firefox just report an error, I think not related: "API Fullscreen is deprecated"
Firefox 上的 Javascript 控制台只报告一个错误，我认为不相关：“API Fullscreen is deprecated”
I tried also by getting a (new) API KEY from Google Developer Console and insert it in the API request link as described in Google documentation (no luck). I verified the ownership of the site on Google Search Console. Anyway I think this is not my case, cause domain is recent and console don't report any error about API KEY.
我还尝试通过从 Google Developer Console 获取（新）API KEY 并将其插入到 API 请求链接中，如 Google 文档中所述（不走运）。我在 Google Search Console 上验证了该网站的所有权。无论如何，我认为这不是我的情况，因为域是最近的，并且控制台不会报告有关 API KEY 的任何错误。
Really wondering what's wrong. Here is a demo not working: http://www.fastdirectlink.com/map.htmlHere is a demo working: http://tiikeridesign.com/map.html
真的很想知道怎么了。这是一个无法工作 的演示：http: //www.fastdirectlink.com/map.html这是一个工作演示：http: //tiikeridesign.com/map.html
Here is the code I used
这是我使用的代码
<script src='https://maps.googleapis.com/maps/api/js?key=&sensor=false&extension=.js'></script>
<script>
google.maps.event.addDomListener(window, 'load', init);
var map;
function init() {
var mapOptions = {
center: new google.maps.LatLng(45.0735671,7.67406040000003),
zoom: 2,
zoomControl: true,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.DEFAULT,
},
disableDoubleClickZoom: false,
mapTypeControl: true,
mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
},
scaleControl: true,
scrollwheel: true,
panControl: true,
streetViewControl: true,
draggable : true,
overviewMapControl: true,
overviewMapControlOptions: {
opened: true,
},
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: [
{
"featureType": "water",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#d3d3d3" }
]
},{
"featureType": "transit",
"stylers": [
{ "color": "#808080" },
{ "visibility": "off" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.stroke",
"stylers": [
{ "visibility": "on" },
{ "color": "#b3b3b3" }
]
},{
"featureType": "road.highway",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.local",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ffffff" },
{ "weight": 1.8 }
]
},{
"featureType": "road.local",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#d7d7d7" }
]
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#ebebeb" }
]
},{
"featureType": "administrative",
"elementType": "geometry",
"stylers": [
{ "color": "#a7a7a7" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#ffffff" }
]
},{
"featureType": "landscape",
"elementType": "geometry.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#efefef" }
]
},{
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": [
{ "color": "#696969" }
]
},{
"featureType": "administrative",
"elementType": "labels.text.fill",
"stylers": [
{ "visibility": "on" },
{ "color": "#737373" }
]
},{
"featureType": "poi",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "poi",
"elementType": "labels",
"stylers": [
{ "visibility": "off" }
]
},{
"featureType": "road.arterial",
"elementType": "geometry.stroke",
"stylers": [
{ "color": "#d6d6d6" }
]
},{
"featureType": "road",
"elementType": "labels.icon",
"stylers": [
{ "visibility": "off" }
]
},{
},{
"featureType": "poi",
"elementType": "geometry.fill",
"stylers": [
{ "color": "#dadada" }
]
}
],
}
var mapElement = document.getElementById('map-canvas');
var map = new google.maps.Map(mapElement, mapOptions);
var locations = [
['Headquarter', '<address>Via Ottavio Assarotti, 10 - Torino <br /> 10122 Italy</address>', 'Phone: +39 011 549444', 'undefined', 'undefined', 45.0735671, 7.67406040000003, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Offices - Europe', 'Str. del Redentore Alto, 157 Moncalieri TO\"<br />10024 Italy', 'Phone: +39 011 0603933 <br /> Mobile: +39 335 8291680', '[email protected] <br /> [email protected]', 'undefined', 45.026912, 7.735915, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['Russia', 'Alberto Fiocchi<br />16, Teterinskiy Pereulok <br />109004 Moscow (Russia)', 'Mobile: +7 985 8546283', '[email protected]', 'undefined', 55.7453888, 37.65318679999996, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['China', 'Ines Tammaro<br />Yangtze river international garden phase II<br />Shanghai China', 'Phone: +86 158 9648 1992 Mobile: +86 331 2166946', '[email protected]', 'undefined', 31.104447, 121.432655, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['USA', 'Jerry Yocum<br />835, Bunty Station Road,<br />43015 Delaware, OH – USA', 'Phone: +1 (614) 7361111', '[email protected]', 'undefined', 40.250594, -83.07493899999997, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png'],['ASIAN', 'Hubert Fournier<br />116, Middle Road, ICB Enterprise House,<br />#08-03/04, 188972 Singapore', 'Phone: (65) 63339833', '[email protected]', 'undefined', 1.2992375, 103.7835042, 'https://mapbuildr.com/assets/img/markers/solid-pin-blue.png']
];
for (i = 0; i < locations.length; i++) {
if (locations[i][1] =='undefined'){ description ='';} else { description = locations[i][1];}
if (locations[i][2] =='undefined'){ telephone ='';} else { telephone = locations[i][2];}
if (locations[i][3] =='undefined'){ email ='';} else { email = locations[i][3];}
if (locations[i][4] =='undefined'){ web ='';} else { web = locations[i][4];}
if (locations[i][7] =='undefined'){ markericon ='';} else { markericon = locations[i][7];}
marker = new google.maps.Marker({
icon: markericon,
position: new google.maps.LatLng(locations[i][5], locations[i][6]),
map: map,
title: locations[i][0],
desc: description,
tel: telephone,
email: email,
web: web
});
link = ''; bindInfoWindow(marker, map, locations[i][0], description, telephone, email, web, link);
}
function bindInfoWindow(marker, map, title, desc, telephone, email, web, link) {
var infoWindowVisible = (function () {
var currentlyVisible = false;
return function (visible) {
if (visible !== undefined) {
currentlyVisible = visible;
}
return currentlyVisible;
};
}());
iw = new google.maps.InfoWindow();
google.maps.event.addListener(marker, 'click', function() {
if (infoWindowVisible()) {
iw.close();
infoWindowVisible(false);
} else {
var html= "<div style='color:#000;background-color:#fff;padding:5px;width:150px;'><h4>"+title+"</h4><p>"+desc+"<p><p>"+telephone+"<p><a href='mailto:"+email+"' >"+email+"<a></div>";
iw = new google.maps.InfoWindow({content:html});
iw.open(map,marker);
infoWindowVisible(true);
}
});
google.maps.event.addListener(iw, 'closeclick', function () {
infoWindowVisible(false);
});
}
}
</script>
<style>
#map-canvas {
height:400px;
width:1024px;
}
.gm-style-iw * {
display: block;
width: 100%;
}
.gm-style-iw h4, .gm-style-iw p {
margin: 0;
padding: 0;
}
.gm-style-iw a {
color: #4272db;
}
</style>
<div id="map-canvas"/>
采纳答案by Datadimension
Quick F12 to developer console and reload gives:
快速 F12 到开发人员控制台并重新加载提供：
MissingKeyMapError and points to https://developers.google.com/maps/documentation/javascript/error-messagesfor reference.
MissingKeyMapError 并指向 https://developers.google.com/maps/documentation/javascript/error-messages以供参考。
回答by ashish
I encountered the same problem. My page suddenly started showing grey window and the error instead of the map which was working fine till some time back.
我遇到了同样的问题。我的页面突然开始显示灰色窗口和错误，而不是在一段时间之前工作正常的地图。
I looked for the solution. It turned out that the the google map API requires developer key since few days ago. Register for the Google Api key and mention it in your code.
我寻找解决方案。事实证明，谷歌地图 API 从几天前开始就需要开发人员密钥。注册 Google Api 密钥并在您的代码中提及它。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
Get YOUR_KEY from google api console. My map works good now.
从 google api 控制台获取 YOUR_KEY。我的地图现在很好用。
回答by Hassan Saeed
in google latest update you should add your key for each script for googleapis.com (otherwise google map will not working)i.e
在谷歌最新更新中，您应该为 googleapis.com 的每个脚本添加您的密钥（否则谷歌地图将无法工作）ie
<script src="http://maps.googleapis.com/maps/api/js?key=your_key"></script>
and if you want to use other features like places,geoloaction then add below line also
如果您想使用其他功能，例如地点、地理操作，请添加以下行
<script src="//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&key=your_key" async="" defer="defer" type="text/javascript"></script>
Note:for places,geolocation and other features you should enable it from google console for more detail about features enabling check this out
https://stackoverflow.com/a/41079098/6295712
注意：对于地点、地理位置和其他功能，您应该从谷歌控制台启用它以获取有关启用功能的更多详细信息，请查看
https://stackoverflow.com/a/41079098/6295712
回答by burf
In my case, it was a restriction related issue. I had used wildcards as suggested by the example in the "Website restrictions" in the Google console
就我而言，这是一个与限制相关的问题。我按照 Google 控制台中“网站限制”中的示例的建议使用了通配符
*example.com/*
the wildcard did not work! I had to use the complete address of the page on which the API was implemented.
通配符不起作用！我必须使用实现 API 的页面的完整地址。
mysite.com/contact-page/
I hope this is of help for someone.
我希望这对某人有帮助。
