Googlemaps API Key for Localhost

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.

Solution 1:

1. Go to this address: https://console.developers.google.com/apis
2. Create new project and Create Credentials (API key)
3. Click on "Library"
4. Click on any API that you want
5. Click on "Enable"
6. Click on "Credentials" > "Edit Key"
7. Under "Application restrictions", select "HTTP referrers (web sites)"
8. Under "Website restrictions", Click on "ADD AN ITEM"
9. 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
10. SAVE and Use your key in your project

Solution 2:

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

in Credential page :

1. Select option with IP address ( option no. 3 ).

2. 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

3. Save it.

4. Change your google map link as follow between the scrip tag :

   https://maps.googleapis.com/maps/api/js?libraries=places&key=AIzxxxxxxxx"

5. Wait for about 5 minutes or more to let your API key to propagate.

Now your google map should works.

Solution 3:

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.

Solution 4:

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.

Solution 5:

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:

• Google Maps v3 API key won't work for local testing
• How to use google maps simple api on localhost
• Google Maps v3 api for localhost not working

Hope this helps!