How to Add a Google Maps Store Locator to Your Website

The quickest working route for a short list of places is a free Google map with a pin for each one. When visitors need to search by address and see the nearest location, paste one StoreRocket embed code into a page on your site: no map code to write, and Google Maps is one of the two map providers you can use.

This guide covers both, plus what building on the Google Maps API yourself involves, then the complete setup with StoreRocket. We make StoreRocket, so weigh our view with that in mind.

The short answer

A free map or app is enough when

You have a short list of locations that rarely changes.
Visitors only need to see where you are, not search by address or filter by service.
One embedded Google map with a pin for each place does the job.
You are comfortable editing the map by hand when something changes.

Use StoreRocket when

Visitors need to search by address or postcode and see the nearest location first.
You have many locations, or they change often, and the people updating them are not developers.
You want filters, opening hours and a phone layout that already work, styled to match your site.
You would rather not maintain the map code and the Google key setup yourself.

Only a few locations and no budget? You may not need a store locator at all. A free embedded map with a pin for each location is fine when the list is short, rarely changes and visitors only need to see where you are. Our guide to free store locator options compares them. If you want to create your locator with search and filters instead, the steps start below.

Why Your Website Needs a Store Locator

A store locator answers "where can I buy this?" on your own website, using the Google Maps interface your visitors already know. What it does for you:

Helps visitors who are ready to buy. Someone searching for the nearest place already knows what they want. They just need to know where to get it.

Answers a common question without a human. "Where can I buy this?" is a regular customer question for brands with physical retail. The locator answers it at any hour.

Shows what people search for. On plans with analytics, the searches your visitors make show which places they look for, including searches that found nothing nearby. That helps with distribution and expansion planning.

Gives you a page to link to. A locator page in your navigation gives visitors and search engines a clear place to find your locations. Learn more in our guide to Google Maps optimization.

Before you start, decide between two different approaches. This choice affects your budget and who maintains it afterwards.

Option 1: Build It Yourself with the Google Maps API

The Google Maps JavaScript API gives you raw building blocks: map rendering, geocoding, places search, and directions. You write the code that turns those building blocks into a store locator.

What's involved:

Set up a Google Cloud project and enable the Maps JavaScript API, Geocoding API, and Places API
Generate and manage API keys with proper domain restrictions
Write JavaScript to render the map, place markers, handle search input, and calculate distances
Build a server-side component to store and query location data
Handle geocoding (converting addresses to coordinates)
Build the UI for search results, location cards, and mobile responsiveness
Set up billing in Google Cloud Console and monitor usage
Keep it working as browsers, the map library and your list of locations change

Our guide to building a store locator with AI lists the parts and the checks to run before launch.

API cost: Google bills by SKU. Dynamic Maps, Geocoding, and Autocomplete Requests each include 10,000 free monthly billable events, with paid usage tiered separately.

Best for: Companies with dedicated development teams who need deep integration with proprietary systems, or very specific UX requirements that no off-the-shelf solution can handle.

For a deeper look at API costs, read our full Google Maps API pricing breakdown. And if cost is a concern, check out how to use the Google Maps API for free and Google Maps API alternatives.

A store locator widget is a ready-made solution you embed on your website with a code snippet. The widget handles map rendering, geocoding, search, filtering and the phone layout, and analytics depending on the plan. You manage your locations through a dashboard instead of writing code.

What's involved:

Sign up for an account
Add your locations (manually or via CSV import)
Copy a code snippet and paste it into your site
Customize colors, the locator style and settings through a visual interface

Realistic cost: a StoreRocket plan (see current plans). After you subscribe, you connect your own Google Maps or Mapbox key and the provider bills you directly.

Best for: Brands, retailers, CPG companies, franchises, and any business that wants a professional store locator running quickly without ongoing development costs.

For a full comparison of available tools, see our best store locator software roundup.

The Bottom Line

If you have a development team and custom requirements, building on the raw API may make sense. A widget packages the map, search, location management, and embed code into a managed product. The rest of this guide focuses on the widget path.

Step-by-Step: Adding a Google Maps Store Locator with StoreRocket

What You'll Need

A StoreRocket account (free trial available)
Access to your website's HTML or CMS admin panel
Your store location data (addresses, phone numbers, hours)

Step 1: Create Your Account

Head to storerocket.io/get-started and start a free trial, no credit card needed. StoreRocket supplies the map during the trial.

Once you sign up, you'll land in the StoreRocket dashboard. This is your command center for managing locations, configuring the widget, and reviewing analytics.

Step 2: Add Your Locations

Click Locations in the sidebar to open the locations manager. You have three ways to add locations:

Manual entry (best for under 20 locations):

Click Add a location and fill in the details. The address field suggests places as you type and places the pin for you; drag the pin to fine-tune it or type exact coordinates.

Required fields:

Location name
Street address (geocoded automatically)

Optional fields that make your locator more useful:

Phone number (tappable in the location's pop-up and details)
Website URL (drives traffic to location-specific pages)
Email address
Operating hours, plus a timezone (together they show an open-or-closed indicator)
Buttons, for example a booking or shop link
Custom fields (products carried, amenities, or a note such as "Holiday hours" that you clear afterwards)

CSV bulk import (best for 20+ locations):

Prepare a spreadsheet with columns for name, address, city, state, zip, country, phone, website, and any custom fields. Go to Locations > Import locations and upload your file (CSV, TSV, TXT, XLS or XLSX). Imports place each address on the map for you, and the review shows what will change before you publish, with the choice to add the rows or replace the current list.

This is how brands with hundreds or thousands of dealer/retailer locations get up and running fast.

Google Sheets sync (best for ongoing updates; depends on the plan, see pricing):

Create a linked Google spreadsheet from StoreRocket's Google Sheets Sync page. StoreRocket exports your current locations and emails you the link. Edit that sheet using its template columns, then run Sync from Sheets or enable automatic daily sync. To bring in an existing business sheet, import a CSV or Excel export first. See the Google Sheets setup guide.

Step 3: Set Up Filters

Filters let visitors narrow down results based on what matters to them. Go to Locations > Search Filters in the sidebar and create categories like:

Store type (flagship, outlet, authorized dealer, distributor)
Amenities (free parking, wheelchair accessible, EV charging)
Services (curbside pickup, in-store repair, product demos)
Products carried (specific product lines or brands)

Each filter gets assigned to relevant locations. When a visitor selects a filter, the map and results list update to show only matching locations.

Filters help most when your locations differ in what they offer. Results are already sorted by distance; filters let visitors narrow them to what they need instead of reading every card.

Copy the embed code shown on your StoreRocket Install page. It already carries your account ID, so paste it exactly as copied. Paste it into your website wherever you want the store locator to appear.

Platform-specific installation guides:

Every website platform handles HTML embedding slightly differently. We've written detailed guides for the most popular ones:

The embed code works on any platform that allows custom HTML or an embed block. If your platform isn't listed above, start with that.

Step 5: Customize the Appearance

Now that the widget is live, make it look like it belongs on your site. Open Widget Studio to configure:

Theme: Choose a locator style. Each style controls the overall look and feel: card layouts, font sizing, color palettes, and spacing.

Brand colour and font: Set your brand colour, which the locator uses for its buttons and highlights, and choose a font. Match your brand guidelines using hex codes.

Map style: Choose between Google Maps and Mapbox as your map provider (do it before you copy the embed code, since switching later means pasting the code again), and pick from the built-in map styles, such as light, dark or satellite on Mapbox. A custom Google Maps or Mapbox style depends on the plan. For a comparison of map providers, see Google Maps vs Mapbox.

Default view: Control what visitors see before they search. Show all locations on a zoomed-out map, center on a specific region, or prompt for location access to show nearby results immediately.

Search radius: Set how far the initial search extends. A 25-mile radius works for urban areas. Rural markets might need 50 or 100 miles. Pick a default that suits your sparsest region, because the search runs at the radius you set. You can also let visitors pick from distances you choose, or show the nearest locations when nothing is inside the radius. To find that number rather than guess it, measure the gap between your two most isolated stores with our free distance calculator.

Customization Options in Depth

One of the biggest advantages of using a dedicated store locator over a basic Google Maps embed is the customization depth. Here's what you can control:

Custom Map Markers

Default Google Maps pins are fine, but custom markers make your locator stand out. Upload your logo or a branded icon to use as the map pin. You can also give individual locations their own marker, so flagship stores stand out from authorized retailers at a glance.

For inspiration, check out our map marker generator tool.

Location Cards

Each location in the results list shows a card with the location's details. You control which fields appear: address, phone, hours, distance, directions link, website link, and any custom fields you've defined. Cards adapt to a phone layout, and directions open in Google Maps.

Operating Hours Display

Add weekly opening hours to your locations and the widget shows an open-or-closed status worked out in each location's own time zone. It is a status on each result, not a filter. This is especially valuable for restaurants, retail stores, and service businesses where hours vary by location.

Custom Fields

Need to show products carried, accepted payment methods, or language support? Custom fields let you attach any data to your locations and display it in the location cards. If visitors should be able to narrow the map by one of those, create a filter for it as well and tag the locations, because filters are what the search queries.

Translations

Operating in multiple countries? On any plan you can edit every word the locator shows. Showing it in each visitor's own language depends on the plan (see pricing), and it covers the locator's built-in text. The content of your locations is not translated.

Common Issues and Troubleshooting

Even with a widget-based approach, a few things can trip you up. Here's how to handle the most common problems:

Check the embed location. The code needs to go inside the <body> tag of your page, not the <head>. Most CMS platforms have a "Custom HTML" or "Embed Code" block specifically for this. If you're using WordPress, use a Custom HTML block in the Gutenberg editor. On Shopify, install the StoreRocket app from the Shopify App Store; it creates the Store Locator page for you.

Check for JavaScript conflicts. Some website builders or plugins load scripts that conflict with external widgets. Open your browser's developer console (F12 > Console tab) and look for red error messages. If you see a CORS or loading error, your platform might be blocking external scripts.

Check your plan status. If your free trial has ended and you haven't subscribed, the widget stops rendering. Log in to your StoreRocket dashboard to check your account status.

Locations Aren't Showing on the Map

Verify each pin. Open the location in the dashboard and check where its pin sits. If an address was placed in the wrong spot or not at all, fix the address, drag the pin or type exact coordinates.

Check visibility settings. A location set to Hidden does not show in the widget. Make sure the locations you expect to see are set to Visible.

Clear your cache. If you just added locations and they aren't showing, your browser or CDN might be serving a cached version. Hard refresh the page (Ctrl+Shift+R or Cmd+Shift+R) to force a fresh load.

Search Returns No Results

Check your search radius. If the default radius is 10 miles and your nearest location is 50 miles away, the search will return nothing. Increase the default search radius in Widget Studio, offer visitors a wider radius option, or turn on the option that shows the nearest locations when nothing is inside the radius. Our distance calculator will tell you how far apart two addresses actually are, which is usually faster than guessing twice.

Verify the search input. The widget geocodes the visitor's search query (city name, zip code, or address) and looks for locations within the radius. If someone types a vague or misspelled query, geocoding might place them far from any locations.

The Map Looks Broken on Mobile

Check for container constraints. The widget needs a container with a defined width. If your page layout uses overflow: hidden or has a narrow container, the map might render incorrectly. Make sure the parent element allows the widget to fill the available width.

Test on actual devices. Browser dev tools don't perfectly replicate mobile behavior, especially for touch interactions and GPS location access. Test on a real phone to confirm the experience is what you expect.

Slow Load Times

Check your page weight. Large images and third-party scripts can delay every page asset, including the locator. Optimize the surrounding page as well as the embed.

Large location datasets. Nearby pins can group into a cluster that shows their count. If you've turned clustering off, review that setting first.

After you install

Once the code is on your site, locations change in the StoreRocket dashboard and the locator updates itself. StoreRocket maintains the hosted locator and delivers updates through the embed already on your site.

StoreRocket gives businesses with several locations a store locator for their own website: import your locations from a spreadsheet, match it to your brand and paste one embed code. Create your locator with a free trial, no credit card needed.

Frequently Asked Questions

Do I need my own Google Maps API key?

Yes, after the free trial: you connect your own Google Maps or Mapbox key. During the free trial StoreRocket supplies the map. After you subscribe, the map provider bills your usage directly. For context on Google Maps costs, see our Google Maps API pricing guide.

Can I import locations from a spreadsheet?

Yes. StoreRocket supports CSV bulk import for one-time uploads and, depending on the plan, Google Sheets sync for daily or on-demand updates. Imports place each address on the map for you, so you only need addresses, not coordinates. In the dashboard, an import shows what will change before you publish it.

Does the store locator work on mobile devices?

The locator adapts from a desktop map to a phone layout. Visitors can use their location to find nearby results, and directions open in Google Maps. Test it on a real phone before you publish.

Can I use Mapbox instead of Google Maps?

Yes. StoreRocket supports both Google Maps and Mapbox as map providers. Choose one in your widget settings; if you change provider later, connect that provider's key and paste the updated embed code on your site. Each provider has different map styles available. Check out our Google Maps vs Mapbox comparison for help deciding.

What analytics come with the store locator?

On the plans that include analytics, you see locator views, the words visitors searched for, a map of where people searched, the searches that found nothing nearby, and clicks per location. Exports depend on the plan (see pricing). That shows where demand is and which locations draw the most attention.

Can I have multiple store locators on one website?

Paste the embed code on each page that needs one. To show different locations on different pages, use a filter or the pre-filtered embed option, so a page opens the locator already filtered, for example to one product line or retail channel.

Does it affect my website's SEO?

Google can render JavaScript, so an embedded locator is not bad for SEO. But the locations inside it are not separate pages that rank on their own: for that, publish a page per location on your own site. The store locator page you create (for example /store-locator or /find-a-store) can be optimized with a clear title, description and links from your navigation. Treat pages for individual locations as a separate SEO project.

E-commerce

Website Builders

Free Tools

Learn & Support

By industry