Appearance
Add Google Maps API to Store Locator
When you choose Google Maps as your map provider, Store Locator uses your Google Maps API key for customer-facing maps. This key renders maps, geocodes addresses, and powers search features.
INFO
Google Maps Platform pricing and free-usage thresholds vary by API and change periodically. See Google's pricing overview for current details.
Step 1: Create a Google account
- If you don't already have one, go to Create a Google Account and follow Google's sign-up steps.
- If you already use Gmail or another Google product, you already have a Google account and can skip this step.
Step 2: Create a new project
- Go to the Google Cloud console and sign in.
- Click the menu button and select IAM & Admin > Create a Project.
- Enter a project name and click Create. (Or select an existing project if you already have one.)
Step 3: Create a billing account
Google Maps APIs require billing to be enabled. New Google Cloud customers get an introductory free-trial credit — see Google's free trial details for current terms and eligibility. See Google's pricing overview for current free-usage thresholds and costs.
- Click the menu button and select Billing.
- Choose Add billing account if this is your first one, or Manage billing accounts if you already have one.
Step 4: Verify the billing account
- Click the menu button and select Billing.
- In the left-hand menu, select Payment method.
- Confirm your card or other payment method is valid.
- Check that your account status shows Active.
Step 5: Select your APIs
- Click the menu button and go to APIs & Services > Library.
- Search for each required API below, open it, then click Enable.
| API | What it does | Required? |
|---|---|---|
| Maps JavaScript API | Shows the interactive map on your storefront | Yes |
| Geocoding API | Turns addresses into coordinates so locations appear in the right place | Yes |
| Routes API | Finds the best route from a customer to one of your locations (newer) | Yes — enable this or Directions API |
| Directions API | Provides directions from a customer to one of your locations (older) | Alternative to Routes API |
| Places API (New) | Helps customers search for places and look up location details (newer) | Yes — enable this or Places API |
| Places API | Same job as Places API (New) (older) | Alternative to Places API (New) |
For directions and places, enable the newer API when you can. Store Locator still works with the older ones if your store already uses them.
INFO
After you save your key in Step 6, API checks appears under the key field on Apps > Store Locator > Settings > Map provider (with Google Maps selected). The heading is API checks, with the line Status of the Google Maps APIs required for your store locator. Refresh on the right runs the checks again.
Each row is one API your store requires. The name in the row is the API to enable in Google Cloud. The icon on the left is the status:
- Green check (Operational) — that API is enabled and your key can use it.
- Caution icon (Needs attention) — the check failed. Uncollapse the row to see the Error returned by Google, then click Open in Google Cloud Console. That option opens the Google Cloud page for the API that needs attention.
- Info icon (Cannot check due to referer restrictions) — the key has website restrictions, so this check cannot run from Store Locator's servers. Open the row for the steps: website restrictions are recommended for your storefront. To run the checks, temporarily remove the referrer restrictions, finish setup, then restrict the key again.
If your store is still on an older implementation, using the Directions API or Places API there will be a link to upgrade to the new implementations.
Upgrading is optional. After you upgrade, enable the newer API in the Library, then click Refresh. Once that row shows a green check, you can disable the older API.
Step 6: Add Google Maps API key to Store Locator
- Click the menu button and go to APIs & Services > Credentials.
- Click Create Credentials > API key.
- Copy the generated API key.
- Optionally click Restrict key to add HTTP referrer restrictions (recommended). See Adjusting Google API key restrictions.
- From your Shopify admin, go to Apps > Store Locator > Settings > Map provider, select Google Maps, then add the key and save.
- Review API checks under the key field. It lists the APIs your store requires. Fix any that need attention. If a row offers Upgrade to Routes API or Upgrade to Places API (New), you are on the older implementation and can upgrade if you want.
Deleting or replacing the API key
If a key is already saved, a Delete button appears next to the field on Settings > Map provider when Google Maps is selected.
- Click Delete and confirm.
- Enter your new key.
- Save changes.