CODEWITHSUNDEEP
javascriptgoogle-mapsgoogle-maps-api-3
emersonthis
emersonthis

Reputation: 33398

Google Maps v3 API key won't work for local testing

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?

Upvotes: 12

Views: 62367

Answers (2)

shivangg
shivangg

Reputation: 601

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.

Upvotes: 4

Joyson
Joyson

Reputation: 3040

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

Upvotes: 26

Related Questions