Google Maps - Cannot read property 'offsetWidth' of null

Question

I've read a few articles on this, but I just can't figure it out. This one I tried to initialize it but it killed the map, a white screen appeared.

The error appears in the console on any page except the Contact Page, which is the page with the map.

This is the code in my Javascript:

var latlng = new google.maps.LatLng(0, 0);
    var myOptions = {
        zoom: 14,
        center: latlng,
        scrollwheel: false,
        disableDefaultUI: true,
        draggable: false,
        keyboardShortcuts: false,
        disableDoubleClickZoom: false,
        noClear: true,
        scaleControl: false,
        panControl: false,
        streetViewControl: false,
        styles: [{"featureType":"landscape","stylers":[{"hue":"#FFBB00"},{"saturation":43.400000000000006},{"lightness":37.599999999999994},{"gamma":1}]},{"featureType":"road.highway","stylers":[{"hue":"#FFC200"},{"saturation":-61.8},{"lightness":45.599999999999994},{"gamma":1}]},{"featureType":"road.arterial","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":51.19999999999999},{"gamma":1}]},{"featureType":"road.local","stylers":[{"hue":"#FF0300"},{"saturation":-100},{"lightness":52},{"gamma":1}]},{"featureType":"water","stylers":[{"hue":"#0078FF"},{"saturation":-13.200000000000003},{"lightness":2.4000000000000057},{"gamma":1}]},{"featureType":"poi","stylers":[{"hue":"#00FF6A"},{"saturation":-1.0989010989011234},{"lightness":11.200000000000017},{"gamma":1}]}],
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("map"), myOptions);
    var geocoder_map = new google.maps.Geocoder();
    var address = '11681 King Fahd Road, Al Mohammadiyah, 4047, Riyadh, Riyadh Province Saudi Arabia';
    geocoder_map.geocode({
        'address': address
    }, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            map.setCenter(results[0].geometry.location);
            var image = "../wp-content/themes/rawafid-systems/assets/img/pin.svg";
            var marker = new google.maps.Marker({
                map: map,
                icon: image,
                position: map.getCenter()
            });
            var contentString = 'Tagline';
            var infowindow = new google.maps.InfoWindow({
                content: contentString
            });
            // google.maps.event.addListener(marker, 'click', function() {
            //  infowindow.open(map, marker);
            // });
        } else {
            alert("Geocode was not successful for the following reason: " + status);
        }
    });

HTML

<?php 
    $location = get_field('map_location');

    if( !empty($location) ):
    ?>
    <div id="map" class="acf-map featured-banner-container">
        <div class="marker" data-lat="<?php echo $location['lat']; ?>" data-lng="<?php echo $location['lng']; ?>"></div></div>
    <?php endif; ?>

The above code is being used on a template file that only my Contact page is using. I can only guess somehow it keeps looking to find it on other pages and that's why it errors. Not sure.

Nowhere in here mentions "offsetWidth". In the console it says it's coming from:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>

Any ideas what I need to modify in the javascript? I have this file loaded in the footer, if that matters.