(Google Map API) Geocode was not successful for the following reason: REQUEST_DENIED

Question

I am new to this place and I desperately need help from experts here! D=

I tried to make a page that can generate dynamic numbers of google map. The webpage, however, keep showing Geocode was not successful for the following reason: REQUEST_DENIED.

I double checked my google API console and confirmed that the geocoding API and Javascript API are enabled. (I literally enabled all Google map API in the list...)

My Google Map API List

Can someone please take a look and tell me why? T_T

//------------------------------------------------\\

Below is my javascript and html button:

Javascript:

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIkey&callback=initMap"
    type="text/javascript"></script>

    <script async defer src="https://maps.googleapis.com/maps/api/js?key=APIKEY&callback=mapAddress"
    type="text/javascript"></script>
    <!-- &callback=mapAddress -->

        <script>
        function mapAddress(mapElement, address) {
        var geocoder = new google.maps.Geocoder();
        // alert(mapElement);
        // alert(address);
        geocoder.geocode({ 'address': address }, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                var mapOptions = {
                    zoom: 17,
                    center: results[0].geometry.location,
                    disableDefaultUI: true
                };
                var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
                var marker = new google.maps.Marker({
                    map: map,
                    position: results[0].geometry.location
                });
            } else {
                alert("Geocode was not successful for the following reason: " + status);
            }
        });
        }
        </script>

HTML(Supposed to be php variable):

<button type="button" class="button_mapAPI" id="address_<?php echo $case["id"]; ?>"  value="<?= $case['location_detail'] ?>" onclick="mapAddress('map1', 'Hong Kong')"/>Map Refresh</button>

Answer 1

First of all, the problem was loading the scripts as async, remove it..

try that jsfiddle with your API KEY

(function(){
	let mapElement = 'map';
	let address = 'SPAIN';
	geocoder = new google.maps.Geocoder();
   geocoder.geocode({ 'address': address }, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
      var mapOptions = {
          zoom: 17,
          center: results[0].geometry.location,
          disableDefaultUI: true
      };
      var map = new google.maps.Map(document.getElementById(mapElement), mapOptions);
      var marker = new google.maps.Marker({
          map: map,
          position: results[0].geometry.location
      });
    } else {
    	alert("Geocode was not successful for the following reason: " + status);
    }
  });
})();

#map {
  width: 100%;
  height: 350px;
}

<script src="https://maps.googleapis.com/maps/api/js?key=APIKEY" type="text/javascript"></script>

<div id="map"></div>