Google Maps API v3 Key Stopped Working

Question

I am working on a website that uses Google Geocoding to get the lat/long for a location by search string. The application was working fine last week, but this week it has just stopped. I did not change anything on either the site or the Google API Console; it simply stopped working on it's own.

The site was built by someone else a long time ago and has been through many teams, so it is a bit of a mess. It actually uses both a JS geocoder and a Ruby geocoder gem. I created a new Google developer account for testing and created two Public API Access Keys: 1 for browser applications and 1 for server applications. I set the IPs of my local internet (for localhost) and my staging server for the server key, and I set the the referrers for the browser key to http://localhost:3000/* and https://staging.myserver.com/*. This was last Friday, and everything worked perfectly.

Yesterday I was working on the site and I noticed that the geocoder was no longer working. I get this error message when attempting to search for a location:

Google has disabled use of the Maps API for this application. This site is not authorized to use the Google Maps client ID provided. If you are the owner of this application, you can learn more about registering URLs here: https://developers.google.com/maps/documentation/business/clientside/auth#registering_authorized_urls

This is very confusing to me, because I am not passing any client ID. Here is the relevant JS function:

Locations.getNearbyLocationsFromAddress = function(address) {
  var deferred = $.Deferred();
  Locations.google_ready_deferred = $.Deferred();
  if (typeof(google) === "undefined") {
    $.getScript("https://maps.googleapis.com/maps/api/js?key=<%= KEYS['GOOGLE_MAPS_API_KEY'] %>&sensor=true&channel=Royalty&callback=RedRoyalty.Locations.googleReady");
  } else {
    Locations.google_ready_deferred.resolve();
  }

  Locations.google_ready_deferred.done(function() {
    var geocoder = new google.maps.Geocoder();

    geocoder.geocode({'address': address, 'region': 'us'}, function(results, status) {
     if (results.length == 0) {
       $(".js-locations-form input").addClass("error");
       $(".errors").html("Sorry, you've gotta enter a valid location. Mind trying again?");
       return;
     } else {
       $(".js-locations-form input").removeClass("error");
       $(".errors").empty();
     }

     var targetResult = -1;
     for (var i=0; i<results.length; i++) {
      for (var j=0; j<results[i].address_components.length; j++) {
        if ($.inArray('country', results[i].address_components[j].types) >= 0) {
          if (results[i].address_components[j].short_name == "US" || results[i].address_components[j].short_name == "CA") {
            targetResult = i;
            break;
          }
        }
      }
      if (targetResult !== -1) break;
     }

     if (targetResult === -1) targetResult = 0;

     Locations.getNearbyLocationsFromCoordinates({
       latitude: results[targetResult].geometry.location.lat(),
       longitude: results[targetResult].geometry.location.lng()
      }, deferred);
    });

  });

  return deferred;
};

The first thing I tried to fix this issue was to remove all of the IPs and referrers from my Public Access Keys. This did not work, so I created an entirely new Google Developer account with brand new keys (no IPs or referrers). I updated the keys on my site, restarted... and still nothing. I continued troubleshooting, but about 20 minutes later it just started working on it's own! Once again, without me changing anything.

This morning, however, I am getting the same error that I was getting yesterday. Looking at the Google API Console for the second account I created, I can see that it has exceeded it's quota of 0 requests per day... but then why did it work at all yesterday? Furthermore, why aren't the keys from the first account working? I actually enabled billing on that account so it has not exceeded any quotas.

The server key (used by the Ruby gem) has continued to work throughout all of this.

What am I doing wrong?

Edit: Might be worth noting that this also works when I do not use the API keys at all, although I don't think this is a permanent solution because the production site will get way too much traffic to stay within the unpaid quotas (right?).

Answer 1

I had enabled "Google Maps JavaScript API v3" under APIs in the Google API Console, but I needed to regenerate my keys after doing so. Kind of frustrating that only the first sentence of the error message from Google was any kind of correct, but it's working now. Hurray!