Google Maps Geocoding API "This service requires an API key"

Question

I am trying to use Google geocoding API. However I am getting following error even after mentioning API key This service requires an API key. For more information on authentication and Google Maps JavaScript API

Following is my HTML entry with API key:

<script src="//maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyAa7LqHyZpHtQBGR6415pYu1FnwWQBPcnY" type="text/javascript"></script>

and this is the angularjs code where I am getting REQEST_DENIED

    function geocode(dataset){
var coords = [];
var address = dataset.address;
var geocoder = new google.maps.Geocoder();
var defer = $q.defer();
geocoder.geocode({'address': address}, function( results, status ) {
        if (status === google.maps.GeocoderStatus.OK) {
            coords[0] = results[0].geometry.location.lat();
            coords[1] = results[0].geometry.location.lng();
            dataset["coordinates"]=results[0].geometry.location;
            defer.resolve(dataset);
        }
        else {
            coords = 'Could not retrieve coordinates for: ' + address;
            defer.reject();
        }
    });
return defer.promise;
}

Is there something I am missing? Thank you.

I guess you forgot to specify which service you're going to use "key=...&libraries=places". — DNM, Apr 03 '17 at 09:04
have look into this accepted answer http://stackoverflow.com/questions/38028630/google-places-api-key-error — , Apr 03 '17 at 09:05
@FadiAboMsalam I added this But this starts giving Google Maps API error: MissingKeyMapError — Amit Pamecha, Apr 03 '17 at 09:19
@SaE I have tried your link and kept this code at the bottom of my code (before body tag ends) But this also give same "This service requires an API key. " error. — Amit Pamecha, Apr 03 '17 at 09:26
Just to mention, I am not using async defer and callback as I am using angular directive and callback will not be possible from my index.html — Amit Pamecha, Apr 03 '17 at 09:27
sounds like the script has been loaded already elsewhere on the site? You say "Geocoding API is already enabled", does that mean you have google maps up and running already? You need to make sure you add the key to wherever google maps is first downloaded — Paul Thomas, Apr 03 '17 at 09:42
i tried you api key with simple js it worked fine the error is something with you angular code i believe check this simple jsfiddle https://jsfiddle.net/ges4vzsa/ — Fadi Abo Msalam, Apr 03 '17 at 09:58
@FadiAboMsalam yes it works fin on jsfiddle. Problem is something in angular code. — Amit Pamecha, Apr 03 '17 at 10:07
@PaulThomasGC Thanks. Looks same to me as I am working on an existing product. But I searched "maps.google" in the entire code base but didnt find any unrelated code. Any other way to identify same? — Amit Pamecha, Apr 03 '17 at 10:09
@AmitPamecha open up the network tab in chrome dev tools and see what is getting downloaded. You should be able to see the key parameter if it's the one you're enqueing. — Paul Thomas, Apr 03 '17 at 10:27
Thanks @PaulThomasGC. Fiddle shared by FadiAboMsalam is including api key in the request. But my request are without key & thats the reason for error. However looking at the code, both are similar and making use of geocoder.geocode({'address': address}, function(results, status) {.......} Fiddle request url: Request URL:https://maps.googleapis.com/maps/api/js/GeocodeService.Search?4sSydney%2C%20NSW&7sUS&9sen-US&key=AIzaSyAa7LqHyZpHtQBGR6415pYu1FnwWQBPcnY&callback=_xdc_._ok0yq9&token=129706 — Amit Pamecha, Apr 03 '17 at 10:51

Amit Pamecha · Answer 1 · 2017-04-03T11:50:15.053

So as per the comments above, when I checked network layer after executing fiddle from @FadiAboMsalam I could see the API key being sent into the request URL which was missing in my request. Am not sure why geocoder.geocode(....) is not sending api ley in my request. I changes this code to send $http request and it is giving proper repsonse. Here is the updated code:

  function geocode(dataset){
    var coords = [];
    var address = dataset.address;
    var geocoder = new google.maps.Geocoder();
    var defer = $q.defer();


 $http.get('https://maps.googleapis.com/maps/api/geocode/json?address=' + 
            address + '&key=xxxxxxxx')
    .then(function(results){
     if (results.status === 200) {
        var data = results.data.results;
            dataset["coordinates"]=data[0].geometry.location;
            defer.resolve(dataset);
         }
         else {
             coords = 'Could not retrieve coordinates for: ' + address;
             defer.reject();
         }
     },
     function error(_error){
        defer.reject();
     });

    return defer.promise;
}

Thanks @PaulThomasGC and @FadiAboMsalam for useful inputs and others for investing your precious time.

Cheers!

There is no need to manufacture a promise with `$q.defer` as the $http service already returns a promise. Some consider it an [anti-pattern](http://stackoverflow.com/questions/30750207/is-this-a-deferred-antipattern) — georgeawg, Apr 03 '17 at 16:05
Thanks @georgeawg for pointing this out. As code is now changed to use $http I can make these changes. — Amit Pamecha, Apr 03 '17 at 17:16

Google Maps Geocoding API "This service requires an API key"

1 Answers1