Google Maps JS Api: Cannot read property 'offsetwidth' of null

Question

I'm using the Google Maps JS Api to display an map on a website. The website is showing me an empty card and when inspecting the elements, I found the error: Cannot read property 'offsetwidth' of null.

I would appreciate if someone would be able to help me! I've added all the related coding below.

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>

JS

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);

}

score 1 · Answer 1 · answered Jul 10 '16 at 12:29

1

I think the problem is that you're trying to initialise the map before the page finishes loading (before the card-map element is created).

Try this:

Remove this line

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

from the initialize function

and add this one outside of that function (in the global context).

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

Also, remove all other calls to the initialize function.

answered Jul 10 '16 at 12:29

Titus

22,031
1
23
33

I'm still getting the same error. I've edited the code as you've mentioned. – Anonymous Jul 10 '16 at 12:57
@user1911256 Can you edit your question to reflect the changes that you've made ? – Titus Jul 10 '16 at 12:59
Yes I've edited the question, you should be able to see the changes. – Anonymous Jul 10 '16 at 13:16
@user1911256 The `window.addEventListener("load",initMap, false);` call should be outside the `initMap` function and make sure you're not calling `initMap` from any were else in the code. – Titus Jul 10 '16 at 13:17
Thank you for your help! – Anonymous Jul 10 '16 at 13:24

score 1 · Accepted Answer · answered Jul 10 '16 at 13:19

1

I found the issue: I was using a class instead of a id. Changing the class to id in css and html does solve the problem.

answered Jul 10 '16 at 13:19

Anonymous

61
1
13

Google Maps JS Api: Cannot read property 'offsetwidth' of null

2 Answers2