How to get the Google Maps API key?
Follow the steps below to generate your own API key.
There are 2 major requirements for your API keys:
1. Under "APIs & Services" section, you must enable "Maps JavaScript API", "Geocoding API", and "Places API".
2. Under "Billing" you must add your credit card information (don't worry, Google provides you with $200 free credit each month).
If any of the requirements are not met, you may see the message "This page can't load Google Maps correctly" on your maps. Please, follow the steps below to configure your key correctly.
Initial Setup and Enabling API Services
To begin the generation, open the Google Cloud Console page in a new tab: https://console.cloud.google.com/
If you don't have a Google Cloud Project there, please create a new one (with any name you want):
Now, open "APIs & Services" and on Dashboard click on the button "Enable APIs and Services".
Then find and enable 3 APIs: "Maps JavaScript API", "Geocoding API", and "Places API".
When both API services are activated, you can proceed to create your API key (credentials).
Creating API key (Credentials)
Navigate to "Credentials" section under "APIs & Services" and click on "Create credentials" button. Pick "API key" as a type of credential (not "OAuth client ID" and not "Service account key"). Eventually, you will get the API key that you can use in our app.
You've just created your own Google Maps API key but you yet have to set up protection and billing.
Protecting your API key
If you're creating your second key for the CSV Import feature, please skip this section, as the key for import must be unprotected. Just don't share it with anybody, and don't use it as your main (first) key for the map!
To protect your key, please click on the "Edit API key" button for your API key, set the "Application restrictions" option to "HTTP referrers (websites)", and add the following items to the "Website restrictions" option:
- https://yourstore.myshopify.com/* (replace "yourstore" with your actual domain, so your key will work on your shopify domain);
- https://yourstore.com/* (replace "yourstore" with your actual domain, so your key will work on your live domain);
Don't forget to add /* at the end of URLs just like in the examples.
Here is an example of a well-protected API key:
It may take a few minutes for Google servers to refresh this restriction, so don't worry if your key doesn't work immediately!
Activating Billing
Open the "Billing" section and add your credit card data. Google will provide free $200 credit each month, so until you exceed this free credit, you will not be charged by Google. If you don't add your billing information, Google will show "This page can't load Google Maps correctly" alert over your maps.
Or you can just open https://console.cloud.google.com/project/_/billing/enable and follow Google's guidance there.
Learn more about Google Maps platform Pricing here: https://cloud.google.com/maps-platform/pricing
To calculate the projected expenses, please consider the following points:
1. Google Maps API charges are completely separate from Shopify charges for our app.
2. You will get $200 free monthly usage for the Google Maps platform.
3. Maps JavaScript API costs $7 per 1000 requests (1 map render - 1 request).
4. Geocoding API costs $5 per 1000 requests (1 address search ~ 3 requests) [only when Geocoding search is enabled in our app].
5. Places API costs about $3 per 1000 requests [only when Geocoding + Places API search mode is enabled in our app].
So in general, your $200 free monthly credit will get you more than 28000 map renders (if you're not using Geocoding search), which is more than enough for the majority of the stores.
Still, if the page with the map will get significant traffic, you may be charged by the Google Maps platform!
Done!!! Now you can use your API key in our application!