第一次询问stackoverflow，所以请耐心等待我打破一些规则，尽我所能解决自己寻找解决方案，但没有运气。
我使用了一个工具来帮助我自定义带有多个标记位置和样式的谷歌地图（下面的代码）。我在本地和我自己的域上测试它并且它运行良好。 当我在生产站点上发布它时，会显示一段时间然后出现错误消息
＆＃34;糟糕！有些不对劲。此页面未正确加载Google地图。有关技术详细信息，请参阅＆gt; JavaScript控制台＆＃34;
Firefox上的Javascript控制台只报告错误，我认为不相关：＆＃34; API全屏已被弃用＆＃34;
我还尝试从Google Developer Console获取（新）API KEY并将其插入API请求链接中，如Google文档中所述（没有运气）。 我在Google Search Console上验证了该网站的所有权。 无论如何，我认为这不是我的情况，因为域名是最近的，并且控制台不会报告有关API KEY的任何错误。
真的想知道出了什么问题。 这是一个不起作用的演示：http://www.fastdirectlink.com/map.html 这是一个演示工作：http://tiikeridesign.com/map.html
这是我使用的代码
<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', 'fastdirectlink@legalmail.com <br /> g.manzo@fastdirectlink.com', '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', 'albe.fiocchi@gmail.com', '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', 'i.tammaro@fastdirectlink.com', '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', 'jerryyocum835@yahoo.com', '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', 'italia@optimconsulting.net', '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"/>
答案 0 :(得分：15)
我遇到了同样的问题。我的页面突然开始显示灰色窗口和错误，而不是地图，直到一段时间后工作正常。
我找了解决方案。事实证明，谷歌地图API几天前就需要开发人员密钥。注册Google Api密钥并在您的代码中提及。
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
从谷歌api控制台获取YOUR_KEY。我的地图现在运作良好。
答案 1 :(得分：7)
快速F12到开发者控制台并重新加载：
MissingKeyMapError并指向 https://developers.google.com/maps/documentation/javascript/error-messages 供参考。
答案 2 :(得分：3)
<script src="http://maps.googleapis.com/maps/api/js?key=your_key"></script>
如果您想使用其他功能，例如地方，地理位置，请添加以下行
<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>
注意：对于地点，地理位置和其他功能，您应该从谷歌控制台启用它，以获取有关功能的更多详细信息，以便查看此信息 https://stackoverflow.com/a/41079098/6295712
答案 3 :(得分：0)
就我而言，这是与限制有关的问题。我使用了Google控制台“网站限制”中示例所建议的通配符
*example.com/*
通配符不起作用！ 我必须使用实施API的页面的完整地址。
mysite.com/contact-page/
我希望这对某人有帮助。
答案 4 :(得分：0)
我有一个api键，所有地图都可以在计算机上正常加载网页...但是在移动设备上加载相同页面和地图时却无法加载，这适用于普通网页地图和移动网页地图。 。电脑很好，但是手机还不好意思！出了些问题。该页面未正确加载Google Maps！请参阅Javascript控制台...。但是javascript控制台不会返回任何错误！ 我检查了在iPhone和Samsung上加载地图的网页，它们返回错误，从计算机浏览器返回相同的页面，并且加载时没有错误，相同的URL！
所以最终我发现了错误： 我在网址为www.domain的Google Maps api帐户中添加了网址。...虽然这似乎不是我计算机上浏览器的问题，但在手机上确实存在问题...所以我发现在网址中添加了2个网址api www.domain.com/page和domain.com/page修复了该错误，并在移动设备和计算机上加载了地图！