To display navigation routes on your tracking page, you need to provide your own Google Maps API key.
Follow the steps below to create and copy your API key.
Step 1: Sign in to Google Cloud
Go to Google Cloud Console
Sign in with your Google account.
Step 2: Create or Select a Project
At the top of the page, click the project selector.
Choose an existing project, or click New Project to create one.
Enter a project name and click Create.
Step 3: Enable Required APIs
(1) To enable the APIs that power your maps, from the main menu, navigate to APIs & Services → Enabled APIs & Services.
(2) Click the "Enable APIs and Services" button at the top of the page. This will open the API Library where you can search for and enable services.
(3) You'll need to enable three essential APIs. Search for each one individually and click the "Enable" button:
Maps JavaScript API – required to display the map on your tracking page
Directions API – required to draw shipping and navigation routes
Geocoding API – required to convert addresses into map coordinates
Step 4: Create an API Key
Go to APIs & Services → Credentials.
Click Create Credentials → API key.
Google will generate an API key for you. A dialog will appear displaying your new key - this is the string of characters you'll copy into your application.
But your key is currently unrestricted, which poses a security risk. Let's secure it in the next step!
Step 5: Restrict the API Key (Strongly Recommended)
An unrestricted API key can be used by anyone who finds it, potentially racking up charges on your account. Let's lock it down to only work on your specific domains.
Click the "Edit API key" button (or find your key in the Credentials list and click the edit icon). This opens the API key configuration page.
Under "Application restrictions", select the "Websites" option. This ensures your key only works when called from specific web domains.
Now, under "Website restrictions", add the following URLs (click "+ Add an item" for each entry):
Replace your-store-domain with your actual Shopify store name. This URL always ends with .myshopify.com.
Replace this with your custom domain if you have one (e.g., mystore.com or shop.mybrand.com).
The /* at the end of each URL is crucial - it means "allow usage on all pages of this domain". Without it, the key might only work on the homepage!
Step 6: Activating Billing
Google Maps API charges are completely separate from your Shopify subscription or any app fees. However, Google provides a generous free tier that will be more than enough for majority of small and medium-sized users.
To learn more about pricing, check out these resources:
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 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.
Once billing is set up, your API key is ready to use.
Step 7: Copy and Paste the API Key
Copy the API key from Google Cloud.
Paste it into the Google Maps API Key field in your app’s map settings.
Save your settings.
Common Issues
The map does not display
Make sure the Maps JavaScript API is enabled.
Check that your API key is valid and saved correctly.
Verify that billing is enabled in Google Cloud (Google requires billing even for free usage).
Location names are missing from the tracking details, the map will not display when Current Package Location or Navigation Route is selected.
“API key cannot be verified” error
Confirm your domain restriction is correct.
Try removing restrictions temporarily to test, then re-apply them.
If you need help, please contact our support team. We’re happy to assist you.