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

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

}

Titus · Accepted Answer · 2016-07-10 12:29:04Z

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, 2016 at 12:29

Titus

22.6k1 gold badge26 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Anonymous Over a year ago

I'm still getting the same error. I've edited the code as you've mentioned.

Titus Over a year ago

@user1911256 Can you edit your question to reflect the changes that you've made ?

Anonymous Over a year ago

Yes I've edited the question, you should be able to see the changes.

Titus Over a year ago

@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.

Anonymous Over a year ago

Thank you for your help!

Anonymous · Accepted Answer · 2016-07-10 13:19:22Z

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, 2016 at 13:19

Anonymous

611 silver badge14 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

5 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Linked

Related