"Map: Expected mapDiv of type Element but was passed null."
-The height of the div is set in the css.
Javascript (googleMaps.js):
function initMap() {
try {
const sportHall2 = { lat: 51.18310959584043, lng:
4.38829092697164 };
const map2 = new google.maps.Map(document.getElementById("map-2"),
{
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
const map2b = new google.maps.Map(document.getElementById("map-2b"), {
zoom: 13,
center: sportHall2,
disableDefaultUI: true,
zoomControl: true,
fullscreenControl: true,
streetViewControl: true,
});
} catch (error) {
console.log(error);
}
}
HTML Page 1:
<script src="/scripts/googleMaps.js"></script>
<div class="grid-card">
<h3>Pius X-instituut</h3>
<h5>Bekijk de sporthal hier.</h5>
<p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
<div id="map-2"></div>
</div>
<script src="/scripts/googleMaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=
initMap&libraries=&v=
weekly" async></script>
HTML Page 2 (error occurs and map won't display on this page):
<script src="/scripts/googleMaps.js"></script>
<div class="grid-card map-2b-container">
<h3>Pius X-instituut</h3>
<h5>Bekijk de sporthal hier.</h5>
<p>Adres: Hof Van Tichelen 28 2020 Antwerpen</p>
<div id="map-2b"></div>
</div>
<script src="/scripts/googleMaps.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?
key=YOUR_API_KEY&callback=
initMap&libraries=&v=weekly" async></script>
CSS:
#map-2{
height: 300px;
width: 100%;
}
#map-2b{
height: 300px;
width: 100%;
}
ERROR: Se {message: "Map: Expected mapDiv of type Element but was passed null.", name: "InvalidValueError", stack: "Error↵ at new Se (https://maps.googleapis.com/m… 6ho4&callback=initMap&libraries=&v=weekly:156:128"}