How to get the Google Maps API key?

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):

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

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

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)".

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:

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").

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

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:

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.

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

Thank you!