How to create Google API key in Google Maps Platform

All Google Maps Platform applications require authentication using an API key, you can refer to this article on how to create your Google API key https://developers.google.com/maps/documentation/javascript/get-api-key or follow the detailed steps below. This key has different creation steps compared to How to Create Google Geocoding key which is for import & geocoding.

1. Go to https://console.cloud.google.com/

2. Click the Select a Project or one of your Projects on the top left of your screen and then click New Project.

google-maps-new-project

3. Enter your Project name and click on the Create button

new-project-google-maps

4. Click on the 3 lines menu (top left) and click on API & Services

api-services

5. Click on the Library link

manage-api1

6. Click on View All

manage-api2

7. Enable Maps JavaScript API, GeoCoding API, Places API and Directions API as highlighted below. (DistanceMatrix is optional for standalone version to display distance values in result list, this might occur higher monthly cost from Google)

manage-api3

8. Once you’ve created your API key go to https://console.cloud.google.com/apis/dashboard and select your Project, then select Credentials (key icon) and click on the Create Credentials > API key

credential-create-api-key

9. Copy your Google API key. Follow this instruction on How To Use Google API key in Super Store Finder applications then click on Restrict Key to Restrict your API key or Go to API & Services > Credentials > Edit Your Key (pencil icon).

api-key-restrict-copy

10.Under Application Restrictions, select HTTPS referrers and enter your domain name format as below ( Please enter *.yoursite.com/* )

http-referrers

11. Add your domain names with /* to include all sub directory of your site. Follow the guidelines below:

a) www and without www matters
b) Subdomain may require *.yourwebsite.com/* format
c) The best way is also to add the exact url of your store locator page

* The steps above are important to ensure that your domain will be authorized to use the Google API key.

* For API restrictions, you can leave it as Don’t restrict key as screenshot below unless you wish to restrict the key to certain APIs

dontrestrict

* If you’re getting JavaScript error related to unauthorized use of key in the browser console (press f12 key to open console), you can select Restrict key and tick the 5 APIs, then Save.

restrict-key3

restrict

12. You can refer to this article on How to Use Google API key in Super Store Finder plugin.

13. Enable Billing by choosing your account and clicking on the 3 lines menu (top left) and click Billing

billing-google-maps

14. Here you can choose to Link a Billing Account or Manage Billing Accounts

manage-billing-google-maps

15. Enable your billing by clicking this link https://console.cloud.google.com/project/_/billing/enable

Important Notice: If you’ve received message Please Enable billing in the Javascript console on your store locator page, you can try to visit this link to enable your billing https://console.cloud.google.com/project/_/billing/enable. If you still see the error message, you may need to contact Google technical support as per Google support link below.

Enable Billing in Google Maps Platform

Google API key Usage Limits

Google will provide $200 free monthly credit which includes free number of monthly usage as listed below, more details available in this article here https://cloud.google.com/maps-platform/pricing/. If your users exceeded the usage listed below, you will be billed accordingly, details can be checked via your Google Dashboard. You can check your Google Billing Details here.

1. 100,000 static map web load
2. 28,500 dynamic map load
3. 25,000 static streeview web load
4. 40,000 directional calls
5. 40,000 distance matrix calls
6. 40,000 road calls
7. 11,500 places details calls
8. 10,000 autocomplete sessions
9. 10,000 find place calls
10. Unlimited Dynamic Maps mobile load
11. Unlimited Static Maps Mobile load

 

* Take note, that Google is providing 24/7 support which you can reach them here for further inquiries and support.

11+

Users who have LIKED this post:

  • Sofia Moss
  • Alex