Setting up a Google Maps API key takes about 5 minutes. Once it's done, your store locator will load beautiful 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.

Before you start

You'll need:

A Google account (any Gmail will do)
A credit or debit card for Google Cloud (you almost certainly won't be charged)

Don't want to deal with Google? You can use Mapbox instead. Mapbox is free for up to 50,000 map loads per month and doesn't require a credit card. You can switch your map provider anytime in your Map Provider settings.

Will I have to pay Google?

Almost certainly not. Google gives you 10,000 free requests per month for each of these four services:

Service	What it does	Free monthly limit
Maps JavaScript API	Renders the map on your page	10,000 loads
Geocoding API	Turns addresses into map coordinates	10,000 requests
Places API	Powers the search bar suggestions	10,000 requests
Geolocation API	Enables "near me" searches	10,000 requests

Each limit is counted separately. Using all your map loads won't eat into your geocoding allowance.

For most StoreRocket users, this means Google Maps is completely free. If you do exceed the free tier, the rates are $5-7 per 1,000 extra requests. 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.

Click the project dropdown at the top of the page (it might say "My First Project" or "Select a project")
Click New Project
Name it something you'll recognize, like your company name
Click Create

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

Step 3: Enable the four required APIs

This is the step people skip or do halfway, and it's the number one reason maps don't load. Your store locator needs exactly four APIs. All four. Not one, not three. Four.

Go to APIs & Services > Library and search for each one. Click into it and hit Enable.

Maps JavaScript API. This renders the actual map on your page
Geocoding API. This converts your store addresses into latitude/longitude coordinates
Geolocation API. This powers the "near me" search so visitors can find stores close to them
Places API. This provides the address suggestions when visitors type in the search bar

Quick check: After enabling all four, go to APIs & Services > Enabled APIs and confirm you see all four listed. If any are missing, go back and enable them.

Step 4: Set up billing

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

Go to Billing
Click Link a billing account (or Create account if this is your first time)
Follow the prompts to add your payment info

That's it. Your free tier starts immediately.

Step 5: Create your API key

Go to APIs & Services > Credentials
Click Create Credentials at the top
Select API Key
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 should restrict your key first.

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 30 seconds to lock it down.

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

Under Application Restrictions:

Select HTTP referrers (websites)
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)

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
Check only the four APIs you enabled in Step 3
Click Save

Step 7: Paste the key into StoreRocket

Last step! Go to your Map Provider settings in StoreRocket, paste your API key into the Google Maps API Key field, and click Save.

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

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.

Map shows a gray box or won't load at all

Nine times out of ten, this means you're missing one or more of the four required APIs.

Fix: Go to Enabled APIs and check that all four are listed:

Maps JavaScript API
Geocoding API
Geolocation API
Places API

If any are missing, go to the API Library, search for the missing one, and click Enable.

"RefererNotAllowedMapError" or "API keys with referer restrictions cannot be used with this API"

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/*.

Map was working but suddenly stopped

A few things to check:

Did your domain change? If you moved to a new domain or switched from www to non-www, update your API key referrers
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
Did Google update their billing? Check that your billing account is still active at Google Cloud Billing

Map loads but search/directions don't work

This usually means the Places API or Geocoding API isn't enabled. Your map can render with just the Maps JavaScript API, but search and directions need the other APIs too.

Fix: Enable all four APIs as described in Step 3.