I am currently utilizing the Google Maps JS API to showcase a map on my website. However, I am encountering an issue where the website is displaying an empty card and upon inspecting the elements, I came across the error message: Cannot read property 'offsetwidth' of null.
Any assistance in resolving this matter would be greatly appreciated! Provided below is all the relevant code snippets.
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);
}