Перейти к основному содержимому

Google Maps API Setup

Store Locator Map: SE uses the Google Maps Platform to render interactive maps, geocode addresses, and provide search autocomplete. To use these features, you need a Google Maps API key with the required APIs enabled. This guide walks you through the setup process.

Overview​

The Google Maps Platform is a paid service operated by Google. Google provides a free monthly credit of $200, which is sufficient for most small to mid-size Shopify stores. You are responsible for any charges beyond the free tier.

Store Locator Map: SE requires the following Google Maps APIs:

APIPurpose
Maps JavaScript APIRenders the interactive map in the store locator widget.
Geocoding APIConverts addresses to geographic coordinates (used when adding locations and when customers search).
Places APIPowers the search autocomplete feature (optional but recommended).

Step 1: Create a Google Cloud Project​

If you do not already have a Google Cloud account:

  1. Go to https://console.cloud.google.com.
  2. Sign in with your Google account or create a new one.
  3. Click Select a project at the top of the page, then click New Project.
  4. Enter a project name (e.g., "Store Locator") and click Create.
  5. Make sure the new project is selected in the project dropdown.

Step 2: Enable Billing​

Google Maps APIs require a billing account, even if you stay within the free tier.

  1. In the Google Cloud Console, go to Billing in the left sidebar.
  2. Click Link a billing account or Create account.
  3. Follow the prompts to add a payment method.
  4. Link the billing account to your project.
примечание

Google provides $200 in free monthly usage credits for the Maps Platform. For most store locators, this covers thousands of map loads and geocoding requests per month at no cost. You will only be charged if usage exceeds the free tier.

Step 3: Enable the Required APIs​

  1. In the Google Cloud Console, go to APIs and Services > Library.
  2. Search for and enable each of the following APIs:

Maps JavaScript API​

  • Search for "Maps JavaScript API."
  • Click on it and click Enable.
  • This API is required. The map will not render without it.

Geocoding API​

  • Search for "Geocoding API."
  • Click on it and click Enable.
  • This API is required for address-to-coordinate conversion when adding locations and processing customer searches.

Places API​

  • Search for "Places API" (or "Places API (New)" if available).
  • Click on it and click Enable.
  • This API is optional but recommended. It powers the search autocomplete feature in the widget. If not enabled, autocomplete will be disabled.

Step 4: Create an API Key​

  1. Go to APIs and Services > Credentials.
  2. Click Create Credentials > API Key.
  3. A new API key will be generated and displayed. Copy it.
  4. Click Close.

Step 5: Configure API Key Restrictions​

Restricting your API key is strongly recommended to prevent unauthorized use and unexpected charges.

Application Restrictions​

Set an application restriction to control which websites can use your API key.

  1. In the Credentials page, click on your API key to edit it.
  2. Under Application restrictions, select HTTP referrers (websites).
  3. Add your Shopify store's domain(s):
https://your-store.myshopify.com/*
https://www.your-domain.com/*

If you have a custom domain, add both your .myshopify.com domain and your custom domain.

  1. Click Save.

API Restrictions​

Limit the key to only the APIs your store locator needs.

  1. Under API restrictions, select Restrict key.
  2. Select the following APIs from the dropdown:
    • Maps JavaScript API
    • Geocoding API
    • Places API
  3. Click Save.
предупреждение

Do not leave your API key unrestricted. An unrestricted key can be used by anyone who discovers it, potentially resulting in significant charges to your Google Cloud billing account.

Step 6: Add the API Key to Store Locator Map: SE​

  1. Open the Store Locator Map: SE app from your Shopify admin.
  2. Go to Settings > Google Maps.
  3. Paste your API key into the Google Maps API Key field.
  4. Click Verify and Save.

The app will verify that the key is valid and that the required APIs are enabled. If any APIs are missing, the app will display a message indicating which ones need to be enabled.

Troubleshooting​

Common Issues​

IssueCauseResolution
Map shows "For development purposes only" watermarkBilling is not enabled or the API key is invalid.Verify that billing is linked to your Google Cloud project and that the API key is correct.
Map does not render (blank area)Maps JavaScript API is not enabled, or the API key is missing or incorrect.Enable the Maps JavaScript API and verify the key in the app settings.
Geocoding fails when adding locationsGeocoding API is not enabled.Enable the Geocoding API in the Google Cloud Console.
Search autocomplete does not appearPlaces API is not enabled.Enable the Places API, or disable autocomplete in the widget settings if you do not need it.
"RefererNotAllowedMapError" in browser consoleThe API key's HTTP referrer restriction does not include your store's domain.Add your store's domain to the API key's referrer list.
"ApiNotActivatedMapError" in browser consoleOne or more required APIs are not enabled.Check the error details for the specific API and enable it.
Unexpected charges on Google Cloud billingHigh traffic or unrestricted API key usage.Review usage in the Google Cloud Console under APIs and Services > Dashboard. Tighten API key restrictions.

Verifying API Key Configuration​

To check your API key status:

  1. Go to the Google Cloud Console > APIs and Services > Credentials.
  2. Click on your API key.
  3. Review the restrictions and enabled APIs.
  4. Check the Metrics tab to see usage statistics.

Billing and Usage Estimates​

Google Maps Platform pricing is based on usage. Below are approximate costs for the APIs used by the store locator (as of the current pricing model; refer to Google's official pricing page for the latest rates).

APIFree Tier (Monthly)Cost Beyond Free Tier
Maps JavaScript API~28,000 map loads$7.00 per 1,000 loads
Geocoding API~40,000 requests$5.00 per 1,000 requests
Places API (Autocomplete)~11,000 sessions$2.83 per session

The $200 monthly free credit is applied across all Maps Platform usage. For most Shopify stores, the free tier is sufficient.

Reducing Costs​

  • Cache geocoding results -- The app automatically caches geocoded coordinates for your locations, so each address is geocoded only once.
  • Limit autocomplete -- Restrict autocomplete to specific countries to reduce session costs.
  • Set billing alerts -- In the Google Cloud Console, go to Billing > Budgets and alerts to set spending notifications.

API Key Security Best Practices​

  • Never share your API key publicly or commit it to source control.
  • Always apply both HTTP referrer restrictions and API restrictions.
  • Rotate your API key periodically by creating a new key, updating the app, and then deleting the old key.
  • Monitor usage in the Google Cloud Console and investigate unexpected spikes.

Next Steps​