How do I get googlemaps api key to work on localhost?
I've created an API key and under referers 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 doesnt work and if I exclude the api key it doesnt work either?
1- first go to this address: https://console.developers.google.com/apis
2- create a api key for your project,
3- click on Library and
4- click on any api that you want,
5- click on Enable (top right),
6- click on Credentials, click edit key
7- in "Key restriction" select "HTTP referrers (web sites)"
8- then type your website address or "localhost"(for test in localhost) in textbox field and enter for add to list, (add "localhost", "127.0.0.1", "localhost:port" and etc)
9- then use key in your project..
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.
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.
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!
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.
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.
来源：https://stackoverflow.com/questions/39329874/googlemaps-api-key-for-localhost