为什么我会收到此错误消息？ "Uncaught Initmap is not a function"

Question

我在代码笔上使用谷歌地图API。错误是说： Ob {message： "initMap is not a function"， name： "InvalidValueError"， stack： "Error↵ at new Ob (我的 api key 写在这里(}

我不确定我是否有错误的 CDN，或者代码笔是否没有针对使用谷歌地图 API 进行优化。地图有时会显示，当我刷新页面时，它就会消失。然后它再次随机出现。当它出现时，它看起来很棒。它只是并不总是出现。我有一个div id="map></div>，并按照谷歌地图API的建议使其高度达到100%。

我对控制台错误深信不疑，这一定是我编写 JS 的方式有问题。

任何帮助将不胜感激。

这是笔的链接

这是我的Javascript：

function initMap() {
var frogner = {
info: '<strong>Lucky Cup Frogner</strong><br>
Bygdøy allé 17<br> 0267 Oslo<br>
<a href="https://www.google.com/maps/place/Bygd%C3%B8y+all%C3%A9+17,+0262+Oslo/@5 9.9139519,10.728967,17z/data=!4m5!3m4!1s0x46416dd3446793cd:0x7273c747063 39df0!8m2!3d59.9160077!4d10.7133661?shorturl=1">Get Directions</a>',
lat: 59.916010,
long: 10.713385
};
var majorstuen = {
info: '<strong>Lucky Cup Majorstuen</strong><br>
Neuberggata 20<br> 0367 Oslo<br>
<a href="https://www.google.com/maps/place/Neuberggata+20,+0367+Oslo/@59.9275959, 10.7143379,17z/data=!3m1!4b1!4m5!3m4!1s0x46416dda68bbe857:0x45907dac0cbd fae9!8m2!3d59.9275932!4d10.7165266?shorturl=1">Get Directions</a>',
lat: 59.927557,
long: 10.716551
};
var vika = {
info: '<strong>Lucky Cup Vika</strong><br>
Haakon VIIs gate 5<br> 0161 Oslo<br>
<a href="https://www.google.com/maps/place/Haakon+VIIs+gate+5,+0161+Oslo/@59.9139 519,10.728967,17z/data=!3m1!4b1!4m5!3m4!1s0x46416e7e1b3dfd45:0xc77d49113 796fa12!8m2!3d59.9139492!4d10.7311557?shorturl=1">Get Directions</a>',
lat: 59.913833,
long: 10.731125
};
var locations = [
[frogner.info, frogner.lat, frogner.long, 0],
[majorstuen.info, majorstuen.lat, majorstuen.long, 1],
[vika.info, vika.lat, vika.long, 2],
];
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 13,
center: new google.maps.LatLng(59.921453, 10.718126),
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var infowindow = new google.maps.InfoWindow({});
var marker, i;
for (i = 0; i < locations.length; i++) {
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations[i][1], locations[i][2]),
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent(locations[i][0]);
infowindow.open(map, marker);
};
})(marker, i));
}
}

Answer 1

您的函数initMap用作回调。有时，Google 地图 API 似乎会在脚本运行和函数正确定义之前将其调用。

如果您明智地设置加载顺序，则在 CodePen 之外不会遇到问题。

为了在 CodePen 中轻松同步，我会这样做：

加载函数后，动态加载谷歌地图脚本。

为此，请删除 HTML 末尾的<script>标记，并在 JS 末尾添加以下内容：

const googleMapsScript = document.createElement('script');
googleMapsScript.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBorrLWWOEKylh4WCCBuNc4QF9QjX_n0Bw&callback=initMap';
document.head.appendChild(googleMapsScript);

它应该以这种方式工作 100% 的时间。