How I do know what is the cause of my Google map not showing on screen rather I get error message on console which says uncaught in promise

See more:

Javascript

I want to add a simple google map to a project I am working on, I used the documentation instruction step by step on developers.google.com/maps. I get an error which says .

index.html:1 Uncaught (in promise) pe {message: 'initMap is not a function', name: 'InvalidValueError', stack: 'Error\n    at new pe (https://maps.googleapis.com/mAPIkey&&callback=initMap:193:124'}

function initMap() {
  // The location of Uluru
  const ph = { lat:4.8472, lng:6.9746 };
  // The map, centered at Uluru
  const map = new google.maps.Map(document.getElementsByClassName("map"), {
    zoom: 4,
    center: ph,
  });
  // The marker, positioned at Uluru
  const marker = new google.maps.Marker({
    position: ph,
    map: map,
  });
}

the error message read initMap is not a function while it's actually a function you van take a look at the JVS code.

What I have tried:

I added this script tag to the bottom of my HTML

<script
    src="https://maps.googleapis.com/maps/api/js?key=APIKey&callback=initMap">
</script>