(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>

Did you add pay method at your API Console?, now is the pay :O — Joel Garcia Nuño, Apr 08 '20 at 07:29
Hello Joel Garcia Nuño. Yes, I did! I added a credit card to my account — Alex Fong, Apr 08 '20 at 07:42
try to load : https://maps.googleapis.com/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 ) https://stackoverflow.com/questions/41889362/ — Joel Garcia Nuño, Apr 08 '20 at 07:52

score 1 · Answer 1 · answered Aug 31 '20 at 22:39

1

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.

answered Aug 31 '20 at 22:39

Kaushal Wagle

11
2

score 0 · Accepted Answer · answered Apr 08 '20 at 08:07

0

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>

answered Apr 08 '20 at 08:07

Joel Garcia Nuño

501
6
13

``Geocoding Service: You must use an API key to authenticate each request to Google Maps Platform APIs. For additional information, please refer to http://g.co/dev/maps-no-account For more information on authentication and Google Maps JavaScript API services please see: https://developers.google.com/maps/documentation/javascript/get-api-key`` This is the message i got and the result is still being denied... – Alex Fong Apr 08 '20 at 09:21
https://console.cloud.google.com/apis/credentials , green check ?; May is not active yet – Joel Garcia Nuño Apr 08 '20 at 09:29
I really want to end the topic but the reality is I still can't fix the problem... Thank you for your effort in helping me with this issue but I think maybe there is some kind of error on my webpage. Anyways, thank you very much! – Alex Fong Apr 11 '20 at 19:21
Are u at localhost? – Joel Garcia Nuño Apr 12 '20 at 01:22
Yes I am at localhost )= – Alex Fong Apr 12 '20 at 05:44
May that solve the problem, https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhost – Joel Garcia Nuño Apr 12 '20 at 09:05
1

Thank you very much for not leaving this noob ( which is me haha) alone T_T You are the best! – Alex Fong Apr 12 '20 at 10:05

score -1 · Answer 3 · answered Feb 13 '21 at 12:42

-1

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

answered Feb 13 '21 at 12:42

RedBud

1

1

Hey and welcome on SO! While your answer might be useful to some, it does not answer the question that was asked here. There might be many reasons why this user would like to use the specified API. Please consider instead adding a comment (once you have enough reputation) to ask for clarification from the author. – milo526 Feb 13 '21 at 19:24
I wont lie, being new to google maps api this made no sense to me. Could you be more detailed with an example? – AlThePal78 Dec 30 '21 at 22:53

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

3 Answers3