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

Question

我在 codepen 上使用 google 地图 api。错误是说： Ob {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ob (my api key is written here)}

我不确定我的 CDN 是否有误，或者 codepen 是否未针对使用 google 映射 api 进行优化。地图有时会出现，当我刷新页面时它会消失。然后它再次随机出现。当它出现时，它看起来很棒。它只是并不总是出现。我有一个 div id="map></div> 并按照 google 地图 API 的建议将其高度设置为 100%。

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

如有任何帮助，我们将不胜感激。

这是 link 到 pen

这是我的 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 中轻松同步，我会这样做：

加载函数后动态加载 Google 地图脚本。

为此，删除 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% 有效。

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

Why am I getting this error message? "Uncaught Initmap is not a function"

javascript

api

google-maps

codepen