Skip to main content

How to Add a Google Maps API Key to Your StoreRocket Account

Step-by-step guide to creating a Google Maps API key and connecting it to your StoreRocket store locator.

Setting up a Google Maps API key takes about 10 minutes. Once it's done, your store locator will load Google Maps with search, directions, and the "near me" feature your visitors love.

This guide walks you through every step, from creating the key to pasting it into StoreRocket.

The quickest way: Connect your map

StoreRocket can walk you through it, one step per screen, with a picture of each Google page and the button to click.

  1. Open Connect your map (in Store Locator > Customize > Map & markers, select No key yet? Set it up step by step)

  2. Select Set it up with me

  3. Follow the steps. When you paste your key, StoreRocket checks it with Google straight away

Already have a key? Select I already have a key on the same page and paste it.

The rest of this article covers the same setup by hand, plus fixes for common errors.

Before you start

You'll need:

  • A Google account (any Gmail will do)

  • A credit or debit card for Google Cloud (Google requires a billing account)

Don't want to deal with Google? You can use Mapbox instead. Mapbox offers a free monthly allowance. Accounts without a payment method have lower trial limits, so follow the Mapbox setup guide when adding your token. You can switch your mapping service anytime under Map & markers > Map connection in your Customize.

Will I have to pay Google?

Almost certainly not. Google gives you 10,000 free requests per month for each API we use. Each limit is counted separately, so using all your map loads won't eat into your geocoding allowance.

Beyond the free monthly allowance, Google charges per service:

Service

Price after free tier (per 1,000 requests)

Maps JavaScript API

About $7

Geocoding API

About $5

Places API (New) Autocomplete

About $2.83

Exact pricing can vary by volume, region, and currency. You can set up budget alerts in Google Cloud so there are never any surprises.

Google requires a billing method during setup, but think of it like saving a card on file. No charges unless you go over the limits.

Step 1: Open Google Cloud Console

Go to the Google Cloud Console and sign in with your Google account.

If this is your first time, Google may ask you to agree to their terms of service. Just accept and continue.

Step 2: Create a project

Every API key lives inside a "project." Think of it as a folder for your API settings.

  1. Click the project dropdown at the top of the page (it might say "My First Project" or "Select a project")

  2. Click New Project

  3. Name it something you'll recognize, like your company name

  4. Click Create

Make sure your new project is selected in the dropdown before moving on.

Step 3: Enable the required APIs

This is the step people skip or do halfway, and it's the number one reason maps don't load. Go to APIs & Services > Library and enable each of these:

  1. Maps JavaScript API: draws the map on your page

  2. Places API (New): suggests addresses as visitors type in the search bar

  3. Geocoding API: finds the place a visitor searches for

Optional: if your project also has Places API (the legacy one, without "New") available in the library, you can enable it too. Our widget uses Places API (New) by default and only falls back to the legacy one if the new one ever fails. New Google Cloud projects can no longer turn on the legacy Places API, and that's fine.

You don't need the Geolocation API. The "near me" button uses the visitor's browser.

Quick check: After enabling, go to APIs & Services > Enabled APIs and confirm you see all three listed.

Step 4: Set up billing

Google won't activate your APIs without a billing account, even though you're unlikely to be charged.

  1. Go to Billing

  2. Click Link a billing account (or Create account if this is your first time)

  3. Follow the prompts to add your payment info

Your free tier starts immediately.

Keep your map running after 90 days. A new Google Cloud account starts on Google's Free Trial. When the trial ends after 90 days, Google stops its projects, and your map stops with them. To avoid that:

  1. Click Upgrade at the top of Google Cloud

  2. Click Upgrade again in the window that opens

You still only pay for use above Google's free monthly allowance. No Upgrade button? Your account is already set, so carry on.

Step 5: Create your API key

  1. Click Create Credentials at the top

  2. Select API Key

  3. A popup will show your new key. Copy it (you'll paste it into StoreRocket in the next step)

Don't close this page yet. You need to restrict your key before using it.

Step 6: Restrict your key (important!)

An unrestricted API key is a security risk. Anyone who finds it could use it and rack up charges on your account. Takes about a minute to lock it down.

Click Edit API Key (or click the key name in the Credentials list).

Under Application Restrictions:

  1. Select HTTP referrers (websites)

  2. Click Add and enter these referrers one by one:

  • *yourdomain.com/* (replace with your actual website domain)

  • *www.yourdomain.com/* (the www version too)

  • *storerocket.io/* (required for StoreRocket to work)

  • *.storerocket.io/* (also required, note the dot before storerocket)

If Google's UI asks for full URL patterns, use https://*.yourdomain.com/* instead.

Platform-specific additions:

  • Shopify: also add *admin.shopify.com/*

  • Webflow: also add *webflow.io/* if you're testing on a webflow.io subdomain

  • Staging/dev sites: add your staging domain too, like *staging.yourdomain.com/*

Under API Restrictions:
Select Restrict key and check every API you enabled in Step 3:

  • Maps JavaScript API

  • Places API (New)

  • Geocoding API

  • Places API (if you enabled it)

Important: Enabling an API in your project (Step 3) is NOT the same as allowing it on your key. Both need to pass. If an API is enabled on the project but NOT checked here, it will still be blocked.

Click Save when done.

Step 7: Paste the key into StoreRocket

Last step! The easiest place is Connect your map: select I already have a key, paste it, and StoreRocket checks it in your browser the way your website loads it.

Or, in Customize:

  1. Go to Store Locator > Customize and choose Map & markers, or open Map connection directly

  2. Under Map connection, make sure Mapping service is Google Maps

  3. Paste your API key into the Google Maps API key field

  4. Select Save

StoreRocket checks the key as soon as you save it. Select Check connection any time to see each Google service marked Working or Check this service. The saved key stays hidden. Leave the field blank to keep it, or select Remove saved key to take it out.

If you restricted your key to your websites in Step 6, StoreRocket's own check can't test it from our servers. It may say "This key has website restrictions. Check it on a website allowed by your key." That is normal. Check your locator on your website instead.

If you switched from Mapbox, your install code changes with the mapping service. Your website keeps the old code until you replace it, so copy the new one from your Install page.

Your store locator should now display Google Maps. Give it a minute to kick in, then check the preview beside the settings.

Troubleshooting

"For development purposes only" watermark on the map

This is the most common issue and it means one thing: billing isn't set up on your Google Cloud project.

Fix: Go to Google Cloud Billing and make sure a billing account is linked to the project that contains your API key. You need an active billing account with a valid payment method, even though Google almost certainly won't charge you.

Gray, darkened, or blank map

Almost always points to one of:

  1. Billing isn't active on the project → Check billing

  2. Maps JavaScript API isn't enabled → Check enabled APIs

  3. Your domain isn't in the key's HTTP referrers list → Check credentials

  4. The API key is invalid or mistyped → Check your Map connection settings

Search bar shows no suggestions or "ApiTargetBlockedMapError"

If the map loads fine but the search bar returns no results, and you see an error like this in the browser console:

This API key is not authorized to use this service or API. Places API error: ApiTargetBlockedMapError

This means your API key's API restrictions list is blocking the Places API. It's a different setting from the APIs you enabled on your project.

Fix:

  1. Click your API key

  2. Scroll to API restrictions

  3. Make sure Places API (New) is checked in the allowed list. If your project also has the legacy Places API, check that one too

  4. Save and wait 5 minutes for Google to propagate

Why both? Our widget uses Places API (New) first but falls back to the legacy one if the new one ever fails. Having both in the allowed list makes that fallback work.

"LegacyApiNotActivatedMapError"

You might see this error in your browser console:

You're calling a legacy API, which is not enabled for your project.

Despite what the message suggests, the fix is to enable the legacy Places API (if your project supports it), not to remove it. Our widget tries to use the new API first, and this error only shows up when the fallback path needs the legacy API but it's not enabled.

Fix:

  1. Go to the API Library

  2. Search for "Places API" (the one without "New")

  3. If it's available, click Enable. If Google says it's no longer available for your project, that's OK, you'll rely on the new API only

  4. Wait 5 minutes, then hard refresh your site

Keep "Places API (New)" enabled either way.

"RefererNotAllowedMapError"

Your domain isn't in the allowed referrers list for your API key.

Fix: Go to Credentials, click your API key, and check that your referrers include:

  • *yourdomain.com/*

  • *www.yourdomain.com/*

  • *storerocket.io/*

  • *.storerocket.io/*

The most common mistake is forgetting the *.storerocket.io/* entry (with the dot). You need both *storerocket.io/* and *.storerocket.io/*.

"ApiNotActivatedMapError"

The Maps JavaScript API is not enabled on your Google Cloud project.

Fix: Go to the API Library, search for "Maps JavaScript API", and click Enable.

"MissingKeyMapError" or "InvalidKeyMapError"

Your API key is missing, mistyped, or doesn't exist in Google Cloud.

Fix: Go to your Map connection settings and re-paste the key. Make sure there are no extra spaces or line breaks. If you deleted the key in Google Cloud, create a new one.

"OverQuotaMapError"

You've exceeded the free tier or a budget cap.

Fix: Go to Google Cloud Billing and check your usage. You can raise your quota or increase your spending limit from the same dashboard.

Map was working but suddenly stopped

A few things to check:

  1. Did your domain change? If you moved to a new domain or switched from www to non-www, update your API key referrers

  2. Did you republish your site? Some platforms (Webflow, Squarespace) strip the embed code when you republish. Re-add the StoreRocket code from your Install page

  3. Did Google update their billing? Check that your billing account is still active at Google Cloud Billing

I see "This page can't load Google Maps correctly"

This is a catch-all error from Google. Check these in order:

  1. Is billing set up? → Check billing

  2. Are all required APIs enabled? → Check enabled APIs

  3. Is the API key pasted correctly? → Check your Map connection settings

  4. Are the referrer restrictions correct? → Check credentials

  5. Is the Places API in your key's API restrictions list? → Check credentials

Still stuck? Message us on live chat and we'll sort it out.

Did this answer your question?