Google Maps Integration
Store Locator Map: SE is powered by the Google Maps Platform. This guide covers every Google Maps feature the app uses and how to configure each one.
Required Google APIs
The following APIs must be enabled in your Google Cloud Console project for the store locator to function correctly.
| API | Purpose | Required |
|---|---|---|
| Maps JavaScript API | Renders the interactive map on your storefront. | Yes |
| Geocoding API | Converts addresses to latitude/longitude coordinates when you add locations. | Yes |
| Places API | Powers the autocomplete search bar so customers can type a city, zip code, or address and see suggestions. | Recommended |
| Directions API | Generates turn-by-turn directions when a customer clicks "Get Directions." | Optional |
| Street View Static API | Displays Street View imagery in the location detail panel. | Optional |
Enabling APIs
- Open the Google Cloud Console.
- Select your project (or create a new one).
- Navigate to APIs & Services > Library.
- Search for each API listed above and click Enable.
- Go to APIs & Services > Credentials and copy your API key.
- In the Store Locator Map: SE app, navigate to Settings > Google Maps and paste the key.
Restrict your API key to your Shopify domain(s) under Application restrictions in the Google Cloud Console. This prevents unauthorized usage and protects your billing account.
Places API -- Autocomplete Search
When the Places API is enabled, the search bar on your store locator provides real-time autocomplete suggestions as customers type. This improves the search experience by reducing typos and helping customers find locations faster.
Configuration Options
| Setting | Description | Default |
|---|---|---|
| Autocomplete Enabled | Toggle the autocomplete feature on or off. | On |
| Country Restriction | Limit autocomplete suggestions to one or more countries (ISO 3166-1 alpha-2 codes). | None (worldwide) |
| Types | Restrict suggestions to specific place types (e.g., geocode, address, (cities)). | geocode |
These options are available in Settings > Search > Autocomplete within the app.
How It Works
- The customer begins typing in the search bar.
- After two or more characters, the Places API returns matching suggestions.
- The customer selects a suggestion (or presses Enter).
- The app geocodes the selected place and re-centers the map on that location.
- Store markers within the configured search radius are displayed.
Directions API -- Get Directions
Each location card includes a Get Directions link. When clicked, one of the following occurs:
- In-app directions (if the Directions API is enabled): The app displays a route summary with estimated travel time directly within the locator panel.
- External directions (default fallback): The link opens Google Maps in a new browser tab with the destination pre-filled.
You can choose the preferred behavior in Settings > Directions.
| Setting | Description | Default |
|---|---|---|
| Directions Mode | inline (in-app panel) or external (new tab). | external |
| Travel Mode | driving, walking, bicycling, or transit. | driving |
Street View
When the Street View Static API is enabled, the location detail panel can display a Street View image of the storefront. This gives customers a visual preview before visiting.
Enable this feature in Settings > Appearance > Street View.
Street View imagery is not available for every address. If no imagery exists for a location, the app gracefully hides the Street View panel for that entry.
Map Embed Options
Map Type
| Type | Description |
|---|---|
| Roadmap | Standard street map view. Default and most commonly used. |
| Satellite | Aerial imagery. |
| Terrain | Topographic map with elevation shading. |
| Hybrid | Satellite imagery overlaid with street labels. |
Set the default map type in Settings > Appearance > Map Type.
Custom Map Styles
You can apply a custom JSON style array to change the map's visual appearance -- muting colors, hiding labels, or matching your brand palette. Paste a style JSON (generated with tools like Snazzy Maps or the Google Maps Styling Wizard) into Settings > Appearance > Custom Map Style.
Map Controls
Toggle the following native Google Maps controls:
| Control | Description | Default |
|---|---|---|
| Zoom Controls | Plus/minus buttons for zooming. | Shown |
| Fullscreen | Button to expand the map to fullscreen. | Shown |
| Street View Pegman | Drag-and-drop figure for entering Street View. | Hidden |
| Map Type Selector | Dropdown to switch between Roadmap, Satellite, etc. | Hidden |
Billing Considerations
Google Maps Platform usage is billed based on API calls. Google provides a monthly credit of $200, which covers moderate usage for most merchants. Monitor your usage in the Google Cloud Console under Billing > Reports.
For high-traffic stores, consider enabling caching and viewport-based loading to minimize unnecessary API calls.
Next Steps
- Shopify Integration -- Understand how the app integrates with your Shopify theme.
- Analytics -- Measure how customers interact with your map.