I recently encountered an issue while working on a node express application and integrating the google maps javascript api. The problem arose when I attempted to transfer the sample code from the google website, along with my API key, into a .ejs file. Surprisingly, the map failed to load on the screen even though it worked perfectly fine when placed in a regular html page. All the controllers on the same page functioned smoothly, except for the map that simply refused to show up. Below is the snippet of code that worked in the html file but failed to render in the .ejs file:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0">
<meta charset="utf-8">
<style>
#map {
height: 100%;
}
html, body {
height: 100%;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 8
});
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD3AC6WEEZVQiqTVJsfbObHG-Pj6wwQaIc&callback=initMap"
async defer></script>
</body>
</html>