How to get the Google Maps API key?

Follow the steps below to generate your own API key.

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 plenty of API calls for free! Click here to learn more.

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

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

The most important thing to remember is that Google Maps API charges are completely separate from Shopify charges for our app. Google will provide plenty of free API calls each month, so until you exceed this free limits, you will not be charged by Google. For the majority of users, the free limits are more than enough to not be additionally charged, but your still need to activate billing to avoid any issues.

Learn more about Google Maps platform pricing here:

To activate billing, open the "Billing" section, click on the "Go to linked billing account" button, and add your credit card data. 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.

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

Installation Guide - Pic 2a

Thank you!