Skip to main content

4️⃣ Google API Keys

Baltix uses two Google keys:

  • A browser key for map display in checkout/thank-you.
  • A server key for geocoding (address to coordinates).
Without a key

The pickup point selector still works without a Google Maps key — customers will see a list view instead of a map. Adding a key enables the map view for a better experience.

Step 1 — Create a Google Cloud project​

  1. Go to the Google Cloud Console

  2. Sign in with your Google account (or create one)

  3. Click Select a project in the top bar (1)

  4. Then New Project (2) Test

  5. Give it a name (e.g. My Shopify Store) (3) and click Create (4) Test

  6. Then go to the project by clicking on (1) and then (5)

Free tier

Google offers a $200/month free credit for Maps API usage. For most stores this means the map is effectively free.

Step 2 — Enable the required APIs​

Enable all three APIs

Baltix requires three Google Maps APIs. You must enable all three:

APIPurpose
Maps JavaScript APIInteractive map in the pickup point selector at checkout
Geocoding APIServer-side address geocoding for distance sorting
Maps Static APIGenerates the map image shown in the order confirmation

For each API, follow the same process:

  1. Search for apis and services (2) in the bar on the top (1)
  2. Click on APIs & Services

Test

  1. Then click on + Enable APIs and services

Test

  1. Search for the API name (e.g. Maps JavaScript API) in the search input

Test

  1. Click on it

Test

  1. Then click Enable

Test

Repeat steps 3–6 for Geocoding API and Maps Static API.

Billing required

Google requires a billing account to be linked to your project, even if you stay within the free tier. Go to Billing in the console to set it up.

Step 3 — Create the browser key (Maps)​

  1. Go back to APIs & Services
  2. Click Credentials (1)

Test

  1. Then + Create Credentials (2)
  2. Then API key (3)

Test

  1. (Optional) Give a name to your key (4)
  2. Under Application restrictions, select Websites (5)

Test

  1. Add website restrictions.
This step is mandatory

For security reasons, this protection step is mandatory because the API key will be exposed to all clients. This means that anyone will be able to see the API key. Without those restrictions, anyone copying this key will be able to use it.

To add a new website, click on Add (6). Add your Shopify domain, and your custom domain if you have one.

For example, if your store is baltic-fashion.myshopify.com with a custom domain www.baltic-fashion.com or baltic-fashion.com: You have to add exactly:

baltic-fashion.com/*
*.baltic-fashion.com/*
baltic-fashion.myshopify.com/*
shop.app/*
admin.shopify.com/*
Important for MyShopify domains

Do not use only *.baltic-fashion.myshopify.com/*. This does not match the root domain baltic-fashion.myshopify.com/* and causes RefererNotAllowedMapError.

Replace URLs

Replace the example URLs above with your own store domains.

Test

  1. Click Save (8)

Then set API restrictions for this key to:

  • Maps JavaScript API
  • Maps Static API

Step 4 — Create the server geocoding key​

Create a second key in APIs & Services > Credentials:

  1. Click + Create Credentials > API key
  2. Set Application restrictions to None
  3. Set API restrictions to Geocoding API only

Do not use HTTP referrer restrictions for this server key.

Step 5 — Set daily quotas (optional)​

To prevent unexpected charges, you can set a daily request limit:

  1. Go to APIs & Services > Maps JavaScript API
  2. Click the Quotas tab
  3. Set a daily limit (e.g. 1,000 requests/day is plenty for most stores)

Step 6 — Add keys in Baltix​

  1. Open the Baltix app in your Shopify admin
  2. Go to Settings > General
  3. Paste your browser key in Google Maps API Key
  4. Paste your server key in Geocoding API Key (Server)
  5. Click Save

Verify it works​

  1. Go to your store and add a product to the cart
  2. Proceed to checkout and select a shipping method linked to a carrier
  3. The pickup point selector should display with a map view

If you see the list view but no map, check the troubleshooting section below.

Troubleshooting​

ProblemSolution
Map doesn't appearMake sure all three APIs are enabled (Step 2)
Map shows but pickup points are not centered correctlyMake sure the Geocoding API is enabled and the Geocoding API Key (Server) is filled in Baltix
No map image in order confirmationMake sure the Maps Static API is enabled
"ApiNotActivatedMapError" in browser consoleEnable billing on your Google Cloud project
"RefererNotAllowedMapError"Check your HTTP referrer restrictions. Add the exact root domain (your-store.myshopify.com/*) and not only *.your-store.myshopify.com/*
Map loads but shows "For development purposes only"Link a billing account to your Google Cloud project
Key saved but map still not showingWait a few minutes — Google can take up to 5 minutes to propagate a new key