Add a Google Maps API key to your store locator

CBmap Store Locator shows your stores on Google Maps using your own Google Maps API key. Without a key, the map can't load on your storefront. Creating a key takes about 10 minutes and is free to start.

1. Create a Google Cloud project

1. Sign in to your Google account (opens in a new tab), or create one (opens in a new tab) for free.
2. Open Google Maps Platform – Get started (opens in a new tab).
3. When asked which products you need, choose Maps and Places, then click Continue.

   Enlarge

4. Create a new project, give it any name you like, and click Next.

2. Set up billing

Google requires a billing account before it issues an API key, even if your usage stays within the free allowance.

1. If you don't have a billing account yet, click Create billing account.

   Enlarge

2. Choose your country, accept the Terms of Service and click Agree and continue.
3. Enter your details as an individual or a business, add a payment method and finish the sign-up. You'll land on the Google Cloud console.

3. Enable the four Maps APIs

Your store locator needs four APIs: Maps JavaScript API, Geocoding API, Geolocation API and Places API.

1. Open the menu in the top-left corner, choose APIs & Services and click Enable APIs and services.

   Enlarge

2. Search for Maps JavaScript API and open it.

   Enlarge

3. Click Enable.

   Enlarge

4. Go back to the library and repeat for the Geocoding API (opens in a new tab), the Geolocation API (opens in a new tab) and the Places API (opens in a new tab).

All four APIs now appear under Enabled APIs & services.

4. Create and restrict your API key

1. Open the menu, choose APIs & Services and click Credentials.

   Enlarge

2. Click Create credentials and choose API key.

   Enlarge

3. Your new key appears in a dialog. Before using it, restrict it so no one else can: open the key's settings.

   Enlarge

4. Under Application restrictions, choose Websites and add your store's domain in this format, with an asterisk at the start and /* at the end:
   Copy

   *yourstore.com/*

5. Also add these three entries, so the CBmap preview works and our team can help you troubleshoot:
   Copy

   *cleverbooster.com/*
   *myshopify.com/*
   *shopify.com/*

   Enlarge

6. Click Save, then copy the key.

5. Add the key to CBmap

1. In CBmap Store Locator, open Settings → Map keys.

   Enlarge

2. Paste the key into the Google Maps field and click Save.

That's it. Open your store locator page to check that the map loads.

Further reading

• Google: Use API keys with the Maps JavaScript API (opens in a new tab)
• Google: Set up in the Cloud console (opens in a new tab)