I'm facing an issue with displaying a map on my webpage where I want to set a marker.
What's the problem
Despite no errors in the console or from Google, the map data is not loading properly. All I see is the Google logo and a grey background, as shown in the image below. https://i.sstatic.net/Kv2ch.png
However, when I check the console in Google Chrome, it eventually loads the map data showing the correct map type.
https://i.sstatic.net/o8ULB.png
What I've tried
I have searched online for solutions to similar issues, but none of them seem to work in my case.
Currently, my code appears as follows:
<div id="map" style="width:100%;height:400px;"></div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap"></script>
<script>
function initMap() {
//Just some example coordinates
var lat = 47.8;
var lon = 8.9
var location = {lat: lat, lng: lon};
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 8,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
var marker = new google.maps.Marker({
position: location,
map: map
});
}
google.maps.event.addDomListener(window, 'load', initMap);
</script>
Any assistance would be greatly appreciated.