Set Up Google Maps

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).

Step 1: Create a Google Cloud Account

1. Go to Google Cloud Console
2. Sign in with your Google account (or create one)
3. Accept the terms of service

Open Google Cloud Console

Step 2: Create a New Project

1. In the top navigation bar, click the project dropdown (it may say "Select a project")
2. Click New Project
3. Enter a name like "Store Locator" or your company name
4. Click Create
5. 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:

1. Go to APIs & Services → Library
2. 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

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.

1. Go to Billing in Google Cloud Console
2. Click Link a billing account (or Create billing account if you don't have one)
3. Follow the prompts to set up your billing account
4. Link the billing account to your project

Step 5: Create Your API Key

1. Go to APIs & Services → Credentials
2. Click Create Credentials at the top
3. Select API key
4. Your new key will appear. Don't copy it yet! First, let's secure it.

Step 6: Secure Your API Key

Before using your key, you'll restrict it to only work on your website. This is important because without restrictions, anyone could copy your key and use it on their own site.

1. In the popup showing your new key, click Edit API key (or click the key name from the Credentials list)
2. Under Application restrictions, select Websites
3. Under Website restrictions, click Add
4. Add your website URLs:

5. Scroll down to API restrictions
6. Select Restrict key
7. Check only these three APIs:
   • Maps JavaScript API
   • Places API (New)
   • Geocoding API
8. Click Save

Now copy your API key.

Step 7: Add the Key to Storepoint

1. Go to Map Provider in your Storepoint dashboard
2. Select Google Maps as your provider
3. Paste your API key into the key field
4. Click Save

Open Map Provider Settings

That's it! 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:

1. Go to Billing → Budgets & alerts
2. Click Create Budget
3. Select your billing account and project
4. Set a budget amount (e.g., $50)
5. Choose when to be notified (e.g., at 50%, 90%, 100%)
6. Enter your email for notifications
7. 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?

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

Map shows "For development purposes only" watermark or gray overlay?

This usually means Google Maps isn't fully set up. Make sure you're working in the correct Google Cloud project (the one linked to the API key you pasted into Storepoint), then check these common causes:

• Billing not enabled: Go to Enable Billing to link a billing account to your project
• Maps JavaScript API not enabled: Go to API Library and enable Maps JavaScript API
• Wrong API key: Double-check you copied the correct key from the project where you enabled the APIs

Map not loading at all?

• Make sure all three APIs are enabled: Maps JavaScript API, Places API (New), and Geocoding API
• Check that your API key is copied correctly with no extra spaces
• Verify your website URL is in the key's allowed list (see Step 6 above)
• Check the Fix Errors page for specific error messages

Using Wix or another iframe-based platform?

Some website builders (especially Wix) load the locator inside an iframe that uses a different domain than your website. In this case, restricting your API key to your website URL won't work because Google sees the iframe's domain, not yours. Check the Fix Errors page in your Storepoint dashboard to see the actual referrer being detected, and add that to your allowed URLs. If you're not sure, contact us for help.

Map works on your site but not in the Storepoint dashboard?

• Add https://storelocator.page/* to your API key's website restrictions

Search suggestions not appearing?

• The Places API (New) might not be enabled. Go to the API Library and enable it.
• Make sure you enabled "Places API (New)" specifically, not the older "Places API"

Getting "API key not valid" or "RefererNotAllowedMapError"?

• Your key may have been deleted or the website restrictions are blocking it
• Check that your website URL is in the allowed list (including both https://yoursite.com/* and https://www.yoursite.com/* if you use both)
• Check the Fix Errors page to see the exact referrer Google is receiving

Still stuck? Contact us with your website URL and we'll help you troubleshoot.

Finding Google Maps setup too complex? Mapbox is a simpler alternative that works just as well.