Googlemaps API Key for Localhost

Question

How do I get Google Maps API key to work on localhost?

I've created an API key and under referrers I add the following:

Accept requests from these HTTP referrers (websites) (Optional)

Use asterisks for wildcards. If you leave this blank, requests will be 
accepted from any referrer. Be sure to add referrers before using this key 
in production. 

localhost

This doesn't work and if I exclude the API key it doesn't work, either.

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

Sajad Mirzaei · Accepted Answer · 2021-02-11T10:33:57.177

212

Go to this address: https://console.developers.google.com/apis
Create new project and Create Credentials (API key)
Click on "Library"
Click on any API that you want
Click on "Enable"
Click on "Credentials" > "Edit Key"
Under "Application restrictions", select "HTTP referrers (web sites)"
Under "Website restrictions", Click on "ADD AN ITEM"
Type your website address (or "localhost", "127.0.0.1", "localhost:port" etc for local tests) in the text field and press ENTER to add it to the list
SAVE and Use your key in your project

edited Feb 11 '21 at 10:33

answered Jul 19 '17 at 04:56

Sajad Mirzaei

2,635
1
11
13

23

This is what I did as well, but I wonder: does this mean that ANYONE working locally (localhost / 127.0.0.1) might use my API KEY (and possibly infer costs for me after the new pricing on 2018-06-11 takes place?) – tmanolatos Jun 04 '18 at 11:30
58

@tmanolatos Yes, that is what it means. It is not good practice to give your production key localhost rights, since anyone can use your key while running locally. Instead you should maintain two keys. One for production which can be seen by anyone and hence should only be allowed on your domain. One for development which should be treated as credentials (do not share it) and allows access from localhost. – the_cheff Jun 06 '18 at 09:54
3

@tmanolatos Yes, but you must build two key, one to test app, and one for the main app, – Sajad Mirzaei Sep 24 '18 at 06:13
1

I am getting this response after following the above steps: { "error_message" : "API keys with referer restrictions cannot be used with this API.", "results" : [], "status" : "REQUEST_DENIED" } Here is the URL, where DEV_KEY is substituted with my api key: https://maps.googleapis.com/maps/api/geocode/json?key=DEV_KEY&address=1600+Amphitheatre+Parkway,+Mountain+View,+CA – rmutalik Jan 14 '20 at 19:49
It returns correct JSON when I use my PROD_KEY api key. – rmutalik Jan 14 '20 at 19:51
@tmanolatos well, if you put in your etc/host the matching 127.0.0.1 - domain,(or you use a local reverse proxy), you can use the key for that domain developing locally... – izio Jul 24 '20 at 13:18
Seems like the UI changed from step 5 onwards – Ben Carp Jul 27 '20 at 02:54
1

@the_cheff Anyone can set any referrer header. – Julius S. Jun 21 '21 at 10:05

score 15 · Answer 2 · edited Jul 27 '19 at 22:10

You can follow this way. It works at least for me :

in Credential page :

Select option with IP address ( option no. 3 ).
Put your IP address from your provider. If you don't it, search your IP address by using this link : https://www.google.com/search?q=my+ip
Save it.
Change your google map link as follow between the scrip tag :

https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx"
Wait for about 5 minutes or more to let your API key to propagate.

Now your google map should works.

score 15 · Answer 3 · answered May 09 '19 at 11:02

If you are working on localhost, create a separate APIkey for your development and then remove restrictions on that key so that your localhost can use it. Remember to not use this key on production, so you don't expose your key to hunters online.

I had the same issue and all attempts to get the restrictions working on my localhost environment was not successful until I created a separate apikey specifically for development and then removed its restrictions. However I don't use that key on production environment, and once am done with developments, I will delete the API key immediately.

I Know this post is late, but for people that will likely face this issue in the future, this is the best route to go.

score 7 · Answer 4 · answered Dec 17 '19 at 19:31

Guess I'm a bit late to the party, and although I agree that creating a seperate key for development (localhost) and product it is possible to do both in only 1 key.

When you use Application restrictions -> http referers -> Website restricitions you can enter wildcard urls.

However using a wildcard like .localhost/ or .localhost:{port}. (when already having .yourwebsite.com/* ) don't seem to work.

Just putting a single * does work but this basicly gives you an unlimited key which is not what you want either.

When you include the full path withhout using the wildcard * it also works, so in my case putting:

http://localhost{port}/
http://localhost:{port}/something-else/here

Makes the Google maps work both local as on www.yourwebsite.com using the same API key.

Anyway when having 2 seperate keys is also an option I would advise to do that.

score 3 · Answer 5 · edited Feb 10 '21 at 08:55

3

It didn't work for me when I used

http://localhost{port}/
http://localhost:{port}/something-else/here

However, removing the http did the trick for me. I just added localhost:8000 without prefixing it with the http.

edited Feb 10 '21 at 08:55

Dharman

30,962
25
85
135

answered Feb 10 '21 at 08:49

M.Z.

424
5
12

score 2 · Answer 6 · edited May 23 '17 at 10:31

You can follow this tutorial on how to use Google Maps for testing on localhost.

Click this link and follow the process (create new project, API key > Browser key, register 'localhost' domain): https://console.developers.google.com//flows/enableapi?apiid=maps_backend&keyType=CLIENT_SIDE&reusekey=true

Generate the key

Deploy Google Maps widget as described here: http://www2.microstrategy.com/producthelp/10/GISHelp/Lang_1033/GIS_Integration.htm

Add your Google Maps API key to googleConfig.xml (as desribed in the previous link) ENTER_YOUR_KEY_HERE

Restart Web Server

Check these related SO threads:

Hope this helps!

score 1 · Answer 7 · answered Jan 24 '18 at 10:02

You have to check the specific error within the javascript console (e.g. Ctrl + Shift + K in Firefox for Windows).

According to Steven Gliebe (2016), there are four common cases for this problem. If I may summarize it, as this:

MissingKeyMapError >> Get Google Maps API Key (but also consider alternative no.2)
RefererNotAllowedMapError >> Register your localhost:port in your google developer dashboard.
ApiNotActivatedMapError >> Enabling the Google Maps API in Google API Library page
InvalidKeyMapError >> Add your key to your scripts/ codes properly

After doing some code modification, please clear your browser cache as necessary.

In case there are other errors, you can check Google Maps API Error Codes Documentation page.

score 1 · Answer 8 · answered Apr 13 '20 at 19:19

1

Typing 'my IP' in google search I got my public IP address and pasted it in IP address (the third option). It works for me.

answered Apr 13 '20 at 19:19

Alaa ma

21
1

score 0 · Answer 9 · answered Sep 05 '16 at 14:53

Where it says "Accept requests from these HTTP referrers (websites) (Optional)" you don't need to have any referrer listed. So click the X beside localhost on this page but continue to use your key.

It should then work after a few minutes.

Changes made can sometimes take a few minutes to take effect so wait a few minutes before testing again.

score -1 · Answer 10 · answered Sep 30 '21 at 21:58

Go to this address: https://console.developers.google.com/apis

Create new project and Create Credentials (API key) Click on "Library" Click on any API that you want Click on "Enable" Click on "Credentials" > "Edit Key" Under "Application restrictions", select "HTTP referrers (web sites)" Under "Website restrictions", Click on "ADD AN ITEM"

Add * and hit an enter SAVE and Use your key in your project

Googlemaps API Key for Localhost

10 Answers10

Linked

Related