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=";callback=initMap"
    type="text/javascript"></script>

    <script async defer src=";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>

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./maps/api/js?key=APIkey&callback=initMap"
    type="text/javascript"></script>

    <script async defer src="https://maps.googleapis./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>

• javascript
• html
• google-maps
• button

• Did you add pay method at your API Console?, now is the pay :O – Joel Garcia Nuño Commented Apr 8, 2020 at 7:29
• Hello Joel Garcia Nuño. Yes, I did! I added a credit card to my account – Alex Fong Commented Apr 8, 2020 at 7:42
• 2 try to load : maps.googleapis./maps/api/js?key=APIKEY&libraries=places, and don't use 2 callbacks ( You have included the Google Maps JavaScript API multiple times on this page ) stackoverflow./questions/41889362 – Joel Garcia Nuño Commented Apr 8, 2020 at 7:52

3 Answers 3

Did you enable the Billing for API Key? Google Maps is no longer free. You have to associate a credit card so that you can get billed if your site has requests that exceed the $200 credit they give you monthly for free.

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./maps/api/js?key=APIKEY" type="text/javascript"></script>

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

Nead to enable geocoding api that convert address to coordinates and it is a bit pricier, use coordinates instead of address and no need for Geocoding API