Question

我在Codepen上使用了Google Map API。错误是在说： Ob {消息：“ initMap不是函数”，名称：“ InvalidValueError”，堆栈：“在新Ob处出现Error↵（我的api键写在这里）}

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

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

任何帮助将不胜感激。

这里是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 Maps API会在运行脚本和正确定义函数之前对其进行回调。

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

要在CodePen中轻松同步，这是我要做的：

在加载函数后动态加载Google Maps脚本。

为此，请删除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％地起作用。

为什么会收到此错误消息？ “未捕获的Initmap不是函数”

1 个答案: