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

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

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

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:

This displays the map on your page.

• Search for Maps JavaScript API
• Click on it, then click Enable

This shows location suggestions as people type in the search bar.

• Search for Places API (New)
• Click on it, then click Enable

This is used for pre-search via URL or embed snippet.

• Search for Geocoding API
• Click on it, then click Enable

Google Cloud uses a billing account to track usage. Google includes monthly free usage, and most store locators stay within it. Your usage is always visible in the console, and the budget alerts below add another layer of comfort.

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

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.

Restrict the key so it only works on your website. Otherwise anyone who copies the key can 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.

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

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.

---

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

Budget alerts email you before spending climbs, which gives you time to act. They track spending rather than cap it, so set the alert low enough to leave yourself room.

---

Google Maps counts usage each time the map loads or someone searches.

Google includes a monthly free usage allowance for each of these, and most store locators stay within it. Google sets the exact limits and pricing, so check the Google Maps Pricing page for current numbers. If you're expecting heavy traffic and want help estimating, email us.

---

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.

• Embed on your website: your map provider is connected, now add the locator to a page
• Widget Settings: map themes, markers, and search behavior
• Set up Mapbox: the quicker alternative if you'd rather switch