Tii*_*ign 10 javascript google-maps google-maps-api-3
第一次询问stackoverflow,所以请耐心等待我打破一些规则,尽我所能解决自己寻找解决方案,但没有运气.
我使用了一个工具来帮助我自定义带有多个标记位置和样式的谷歌地图(下面的代码).我在本地和我自己的域测试它,它工作得很好.当我在生产站点上发布它时,它会显示一段时间,然后会显示一条错误消息
"糟糕!出了点问题.此页面未正确加载Google地图.请参阅> JavaScript控制台了解技术详情"
Firefox上的Javascript控制台只报告错误,我认为没有关系:"API Fullscreen已弃用"
我还尝试从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"/>
小智 15
我遇到了同样的问题.我的页面突然开始显示灰色窗口和错误,而不是地图,它工作正常,直到一段时间后.
我寻找解决方案.事实证明,谷歌地图API几天前就需要开发人员密钥.注册Google Api密钥并在您的代码中提及.
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY&callback=initMap" async defer></script>
从谷歌api控制台获取YOUR_KEY.我的地图现在很好用.
快速F12到开发人员控制台和重新加载给出:
MissingKeyMapError并指向 https://developers.google.com/maps/documentation/javascript/error-messages 以供参考.