How to get the Google Maps API key?

Follow the steps below to generate your own API key.

Table of Contents

Important: There are two key requirements for your API key:

  • Under the "APIs & Services" → "Enabled API & Services" section, enable the following APIs:
    • Maps JavaScript API
    • Geocoding API
    • Places API
  • Under "Billing" add your credit card information. Don’t worry, Google provides $200 of free credit each month!

If these requirements aren't met, the message "This page can't load Google Maps correctly" may appear on your maps.

Initial Setup and Enabling API Services

To begin, open the Google Cloud Console page: https://console.cloud.google.com/

If you don't have any Google Cloud Projects already, here you can create a new one (use any project name you want):

Article - Pic 0a

If you do have an existing Google Cloud Project that you want to use, simply activate it from the top menu:

Article - Pic 0b

Then, open "APIs & Services" → "Enabled API & Services" from the menu and on then click on the "Enable APIs and Services" button:

Article - Pic 0cArticle - Pic 0d

Here find and enable (activate) 3 APIs: "Maps JavaScript API", "Geocoding API", and "Places API".

Note: You will see "Places API" and "Places API (New)" in this area. You only need to activate the "Places API", and not the "Places API (New)".

Article - Pic 0eArticle - Pic 0fArticle - Pic 0gArticle - Pic 0h

When all 3 API services are activated, you can proceed to the next step.

Creating API key (Credentials)

Navigate to "APIs & Services" → "Credentials" section from the top menu:

Article - Pic 1a

Here, click on the "Create credentials" button and pick "API key" as a type of credential (not "OAuth client ID" and not "Service account key").

Article - Pic 1b

As a result, you will get the API key that you can use in our app:

Article - Pic 1c

You still have to set up key protection and project billing, so proceed to the next step.

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 "Websites", and add the following items to the "Website restrictions" option:

  • https://admin.shopify.com/* - this is needed so your maps can be rendered in Shopify Theme Editor when configuring your themes;
  • https://your-store-domain.myshopify.com/* — replace "your-store-domain.myshopify.com" with your Shopify domain (always ends with ".myshopify.com");
  • https://your-live-domain.com/* — replace "your-live-domain.com" with your live domain, for example, "mygoodstore.com" or "maps.develic.com".

Don't forget to add /* at the end of URLs just like in the examples (which means "allow maps usage on all pages of this domain").

Here is an example of a well-protected API key:

Article - Pic 2

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, click on the "Go to linked billing account" button, 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 a "This page can't load Google Maps correctly" message over your maps.

If you don't have linked Billing Accounts, you will need to create one (and link it to your Google Cloud Project).

The easiest way to activate billing is to 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:

  • Google Maps API charges are completely separate from Shopify charges for our app.
  • You will get $200 free monthly usage for the Google Maps platform.
  • Maps JavaScript API costs $7 per 1000 requests (1 map render - 1 request).
  • Geocoding API costs $5 per 1000 requests (1 address search ~ 3 requests) [only when Geocoding search is enabled in our app].
  • 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!

Now you can copy-paste your Google Maps API Key to "Step 2" of our app's dashboard:

Installation Guide - Pic 2

Thank you!