Google Maps offers the familiar map interface many people know. This guide takes about 10 minutes and walks you through each step. Looking for a quicker setup? Try Mapbox instead (about 5 minutes).
Google offers free Maps usage each month, enough for most store locators. Check Google Maps Pricing for current limits.
Step 1: Create a Google Cloud Account
- Go to Google Cloud Console
- Sign in with your Google account (or create one)
- Accept the terms of service
Step 2: Create a New Project
- In the top navigation bar, click the project dropdown (it may say "Select a project")
- Click New Project
- Enter a name like "Store Locator" or your company name
- Click Create
- Wait a moment, then select your new project from the dropdown
Step 3: Turn On the Map Features
Your locator uses three Google Maps features. You'll turn each one on:
- Go to APIs & Services → Library
- Search for and enable each of these:
Maps JavaScript API
This displays the map on your page.
- Search for Maps JavaScript API
- Click on it, then click Enable
Places API (New)
This shows location suggestions as people type in the search bar.
- Search for Places API (New)
- Click on it, then click Enable
Geocoding API
This is used for pre-search via URL or embed snippet.
- Search for Geocoding API
- Click on it, then click Enable
Each one powers a different part of your locator. Enable all three so everything works on the first try.
Step 4: Set Up Billing
Google Cloud uses a billing account to track usage. There's a generous free tier, so most store locators don't incur any charges.
- Go to Billing in Google Cloud Console
- Click Link a billing account (or Create billing account if you don't have one)
- Follow the prompts to set up your billing account
- Link the billing account to your project
Step 5: Create Your API Key
- Go to APIs & Services → Credentials
- Click Create Credentials at the top
- Select API key
- Your new key will appear. Don't copy it yet! First, let's secure it.
Step 6: Secure Your API Key
Restrict the key so it only works on your website. Otherwise anyone who copies the key can use it on their own site.
- In the popup showing your new key, click Edit API key (or click the key name from the Credentials list)
- Under Application restrictions, select Websites
- Under Website restrictions, click Add
- Add your website URLs:
| URL | Why |
|---|---|
https://yourwebsite.com/* |
Your main website |
https://www.yourwebsite.com/* |
If you use the www version |
https://storelocator.page/* |
Allows preview in Storepoint dashboard (optional) |
- Scroll down to API restrictions
- Select Restrict key
- Check only these three APIs:
- Maps JavaScript API
- Places API (New)
- Geocoding API
- Click Save
Now copy your API key.
Adding https://storelocator.page/* lets you preview your locator in the Storepoint dashboard. If you skip this, the dashboard preview won't load the map, but your locator will still work perfectly on your actual website.
Step 7: Add the Key to Storepoint
- Go to Map Provider in your Storepoint dashboard
- Select Google Maps as your provider
- Paste your API key into the key field
- Click Save
Your locator is now connected to Google Maps. Preview it from the Embed page (if you added the storelocator.page URL) or check it on your live website.
Setting Up Budget Alerts (Optional)
For extra peace of mind, you can set up alerts to notify you if your usage approaches a certain amount:
- Go to Billing → Budgets & alerts
- Click Create Budget
- Select your billing account and project
- Set a budget amount (e.g., $50)
- Choose when to be notified (e.g., at 50%, 90%, 100%)
- Enter your email for notifications
- Click Finish
This won't automatically stop charges, but you'll get an email before any significant spending occurs.
Understanding Usage & Free Tier
Google Maps counts usage each time the map loads or someone searches.
What counts as usage?
| When this happens... | Google counts... |
|---|---|
| Your locator loads | Map load |
| Someone types in the search bar | Search suggestions |
| Pre-search via URL or embed snippet | Address lookup |
Free tier
Google currently offers around 10,000 free map loads per month, and a similar number of free search suggestions, which is enough for most store locators. Verify current limits on the Google Maps Pricing page.
Troubleshooting
The Fix Errors page in your dashboard usually shows the exact problem your locator is hitting. Check there first.
Map shows "For development purposes only" watermark or a gray overlay
Google Maps isn't fully set up yet. The common causes:
- Billing isn't linked yet. Enable Billing for your project.
- Maps JavaScript API isn't enabled. Open the API Library and turn it on.
- Wrong API key. Double-check you copied the key from the same project where you enabled the APIs.
Map isn't loading at all, or you're seeing "API key not valid" / "RefererNotAllowedMapError"
- Confirm all three APIs are on: Maps JavaScript API, Places API (New), Geocoding API.
- Check your API key has no extra spaces.
- Verify your site URL is in the key's allowed list, including the
www.version if you use it. - The Fix Errors page shows the exact referrer Google is seeing.
Search suggestions aren't appearing
The Places API (New) probably isn't enabled. Open the API Library and enable it. Make sure it's "Places API (New)", not the older "Places API".
Map works on your site but not in the Storepoint dashboard preview
Add https://storelocator.page/* to your API key's website restrictions.
Using Wix or another iframe-based builder
Some builders (especially Wix) load the locator inside an iframe with a different domain. Google sees the iframe's domain, not yours, so your URL restrictions won't match. The Fix Errors page shows the actual referrer to add. Of course, email us if you'd like a hand.
Still stuck? Email us with your website URL and we'll sort it out. Mapbox is also a simpler alternative if you'd rather try that.