Getting ApiNotActivatedMapError when trying to use embed map API despite the API being activated

Question

I'm embedding a map in a webpage but I keep getting a ApiNotActivatedMapError for some reason, I'm looking at it and it is activated. I'm just at a loss here.

<div id="map" style="width:100%;height:400px">My map will go here</div>

<script>
// Initialize and add the map
function initMap() {
    var mapProp= {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
    };
    var map=new google.maps.Map(document.getElementById("map"),mapProp);
}
</script>
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&callback=initMap">
</script>

Does anybody have any experience with this problem? Am I missing something simple? Thanks

Answer 1

Go to console.cloud.google.com and follow the following steps:

1) APIs & Services

2) Dashboard

3) + Enable APIS and Services

4) Maps JavaScript API

5) hit Enable button