Google Maps JS Api：无法读取 null 的属性“offsetwidth”[重复]答案

【问题标题】：Google Maps JS Api: Cannot read property 'offsetwidth' of null [duplicate]Google Maps JS Api：无法读取 null 的属性“offsetwidth”[重复]
【发布时间】：2016-11-12 12:07:56
【问题描述】：

我正在使用 Google Maps JS Api 在网站上显示地图。该网站向我展示了一张空卡片，在检查元素时，我发现了错误：无法读取 null 的属性“offsetwidth”。

如果有人能够帮助我，我将不胜感激！我已经在下面添加了所有相关的编码。

CSS

.content {
    position: fixed;
    top: 15%;
    width: 100%;
    height: 85%;
    overflow: auto;
}

.card {
    width: 85%;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 2px 6px #888888, 0 2px 6px #888888;
}

.card-map {
    width: 100%;
    height: 300px;
}

HTML

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="../style.css">
</head>

<body>
    <div class="content">
         <div class="card">
              <div class="card-map"></div>
              <script type="text/javascript" src="../google-maps.js"></script>
         </div>
    </div>
</body>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDb8GJ8wzza1nQyrYBUf4iKBzF1TcC6BXA&callback=initMap"></script>
</body>

function initMap() {
    var customMapType = new google.maps.StyledMapType([{
        "featureType": "administrative",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.attraction",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.business",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.government",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.medical",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.park",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.place_of_worship",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.school",
        "stylers": [
            { "visibility": "off" }
    ]},{
        "featureType": "poi.sports_complex",
        "stylers": [
            { "visibility": "off" }
     ]},{
        name: 'Custom Style'
     }]);
    var customMapTypeId = 'custom_style';

    var map = new google.maps.Map(document.getElementById("card-map"), {
        zoom: 12,
        center: {lat: 40.674, lng: -73.946},
        disableDefaultUI: true,
            mapTypeControlOptions: {
                mapTypeIds: [google.maps.MapTypeId.ROADMAP, customMapTypeId]
            }
        });

    var marker = new google.maps.Marker({
        position: {lat: 40.674, lng: -73.946},
        map: map,
    });

    map.mapTypes.set(customMapTypeId, customMapType);
    map.setMapTypeId(customMapTypeId);
    window.addEventListener("load",initMap, false);

}

【问题讨论】：

标签： javascript html css google-maps

【解决方案1】：

我认为问题在于您试图在页面完成加载之前（在创建 card-map 元素之前）初始化地图。

试试这个：

删除这一行

google.maps.event.addDomListener(window, "load", initialize);

来自initialize 函数

并将这个添加到该函数之外（在全局上下文中）。

window.addEventListener("load",initialize, false);

另外，删除对initialize 函数的所有其他调用。

【讨论】：

我仍然遇到同样的错误。我已经按照你提到的那样编辑了代码。
@user1911256 您能否编辑您的问题以反映您所做的更改？
是的，我已经编辑了问题，您应该可以看到更改。
@user1911256 window.addEventListener("load",initMap, false); 调用应该在initMap 函数之外，并确保您没有从代码中的其他任何地方调用initMap。
感谢您的帮助！

【解决方案2】：

我发现了问题：我使用的是类而不是 id。在 css 和 html 中将 class 更改为 id 确实可以解决问题。

【讨论】：