12

I have an API key. It's a "Key for browser apps (with referers). It works fine, but I'm not authorized when I try to use it on my local development server. I use MAMP and my local URL looks like this: http://mysite.dev.

In "Referers" section I have:

mysite.com/*
mysite.dev/*

The production one (.com) works fine, so I'm pretty sure my syntax is correct. But no matter what I try for the local version, I get the authorization error popup from Google telling me:

Google has disabled use of the Maps API for this application. The provided key is not a valid Google API Key, or it is not authorized for the Google Maps Javascript API v3 on this site. If you are the owner of this application, you can learn about obtaining a valid key here: https://developers.google.com/maps/documentation/javascript/tutorial#api_key

Surely there is a way to get this working! What is it?

ekad
  • 14,436
  • 26
  • 44
  • 46
emersonthis
  • 32,822
  • 59
  • 210
  • 375
  • Are you sure you're using exactly that URL without a www part? The permission referrer is being used quite literally: `code`*.yoursite.com/*`code` won't work for yoursite.com/ and `code`yoursite.com/*`code` won't work for www.yoursite.com/. – Mantriur Apr 16 '14 at 19:41
  • I'm literally copy/pasting the URL out of the browser... In chrome the `http://` is hidden but I don't think that should be included ever. And remember, there's no chance of a missing `www` because it's a local site (so there is no www). – emersonthis Apr 16 '14 at 19:48
  • Possible duplicate of [How to set Google API key restriction - HTTP referrers](https://stackoverflow.com/questions/41993276/how-to-set-google-api-key-restriction-http-referrers) – viktorianer Jan 26 '18 at 14:40

2 Answers2

26

UPDATE :

As of June 22, 2016 Google Maps V3 no longer support keyless access (any request that doesn't include an API key).

You can register for the key : https://developers.google.com/maps/documentation/javascript/get-api-key

and add it to your URL :

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

I have faced a similar issue with my application. I use the url without the client key for testing purposes and add the key before putting the code onto the production server. This is a workaround more than a solution and I am assuming that your usage for local testing will be low.

Testing server

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

Production Server 

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

URL : https://developers.google.com/maps/documentation/javascript/examples/

If you check the following site and go to the basic map example you will find that the examples do not use a key. This was one of the differences between v2 and v3 of the maps that the key is not mandatory.

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

Keep in mind that omitting the key falls under the free Google Maps API licensing. If you need to track usage, you must supply at least the key. If you need more traffic, you need to supply your client ID (Google Maps for Work).

https://developers.google.com/maps/licensing

Joyson
  • 3,025
  • 1
  • 20
  • 34
  • Interesting. It works without the key?? Can you direct me to any documentation for how that works? – emersonthis Apr 17 '14 at 20:21
  • I checked under the code examples -> simple maps. Just click on javascript+HTML They have used the following in the example : – Joyson Apr 21 '14 at 11:14
  • Yup. I've started doing it and it works. But I still don't understand why. I'm curious to know if they publish and specific details about it. – emersonthis Apr 21 '14 at 12:02
  • 1
    I think this question answers the question about key much better than I would be able to. http://stackoverflow.com/questions/2769148/whats-the-api-key-for-in-google-maps-api-v3 – Joyson Apr 21 '14 at 12:08
4

As suggested in the official documentation:

Tip: During development and testing, you can register a project for testing purposes in the Google API Console and use a generic, unrestricted API key. When you are ready to move your app or website into production, register a separate project for production, create a browser-restricted API key, and add the key to your application.

You should register a different project and use its unrestricted API for developmental testing.

juffel
  • 1,045
  • 15
  • 21
shivangg
  • 521
  • 8
  • 15