Map Styles

Store Locator Map: SE allows you to customize the visual appearance of the Google Map displayed in the store locator widget. You can choose from built-in themes for a quick setup or apply custom JSON styles for full control over every map element.

Built-in Themes

The app includes a set of professionally designed map themes that you can apply with one click.

Theme	Description
Standard	The default Google Maps appearance. Familiar and universally recognizable.
Silver	A subtle, desaturated style with muted colors. Ideal for clean, modern storefronts.
Dark	A dark-background map with light labels and roads. Pairs well with dark-themed websites.
Retro	A warm, vintage-inspired color palette with muted greens and yellows.
Night	A deep blue-black map optimized for low-light aesthetics. Roads and labels use high-contrast colors for readability.

Applying a Built-in Theme

1. Open the app and go to Settings > Map > Style.
2. Browse the available themes in the theme gallery.
3. Click on a theme to preview it on the sample map.
4. Click Apply to save your selection.

The theme is applied to the widget immediately.

Custom JSON Styles

For merchants who need precise control over the map's visual elements, Google Maps supports custom styling through a JSON style array. This allows you to modify the colors, visibility, and weight of individual map features such as roads, water, parks, labels, and points of interest.

Creating a Custom Style

The easiest way to generate a custom map style is to use one of the following tools:

• Google Maps Platform Styling Wizard -- https://mapstyle.withgoogle.com
• Snazzy Maps -- https://snazzymaps.com

These tools provide a visual editor and export the style as a JSON array.

Applying a Custom Style

1. Go to Settings > Map > Style.
2. Select Custom JSON from the theme options.
3. Paste your JSON style array into the code editor.
4. Click Preview to see the style applied to the sample map.
5. Click Save.

Example Custom Style

The following JSON style creates a minimal, grayscale map:

[
  {
    "elementType": "geometry",
    "stylers": [{ "color": "#f5f5f5" }]
  },
  {
    "elementType": "labels.icon",
    "stylers": [{ "visibility": "off" }]
  },
  {
    "elementType": "labels.text.fill",
    "stylers": [{ "color": "#616161" }]
  },
  {
    "elementType": "labels.text.stroke",
    "stylers": [{ "color": "#f5f5f5" }]
  },
  {
    "featureType": "road",
    "elementType": "geometry",
    "stylers": [{ "color": "#ffffff" }]
  },
  {
    "featureType": "water",
    "elementType": "geometry",
    "stylers": [{ "color": "#c9c9c9" }]
  }
]

Zoom Level Defaults

Control the default zoom behavior of the map.

Setting	Description	Default
Default zoom level	The initial zoom level when the widget loads (before any search). Range: 1 (world) to 20 (building).	4
Zoom after search	The zoom level applied after a search returns results. The map auto-fits to show all results, but this sets a maximum zoom level to prevent over-zooming on single-result searches.	14
Minimum zoom	The farthest the customer can zoom out.	2
Maximum zoom	The closest the customer can zoom in.	18

Configuring Zoom Levels

1. Go to Settings > Map > Zoom.
2. Adjust the zoom values using the sliders or input fields.
3. Click Save.

Map Controls Visibility

Google Maps displays several interactive controls (zoom buttons, fullscreen toggle, map type selector). You can show or hide each control.

Control	Description	Default
Zoom controls	The + / - buttons for zooming in and out.	Visible
Fullscreen control	A button that expands the map to fill the browser viewport.	Visible
Map type control	A toggle between Map and Satellite views.	Hidden
Street View control	The Pegman icon for activating Street View.	Hidden
Scroll wheel zoom	Whether the mouse scroll wheel zooms the map. Disabling this prevents accidental zooming while scrolling the page.	Disabled

Configuring Map Controls

1. Go to Settings > Map > Controls.
2. Toggle each control on or off.
3. Click Save.

Default Map Center

Set the geographic center of the map when it first loads (before the customer performs a search).

1. Go to Settings > Map > Default View.
2. Enter coordinates (latitude and longitude) or type an address to set the center point.
3. Alternatively, drag the map to the desired position and click Set Current View.
4. Click Save.

Common configurations:

• Center on your country for national businesses.
• Center on your headquarters or primary market area.
• Center on a midpoint if your locations span a wide region.

Next Steps

• Custom Markers -- Replace default pins with branded marker icons.
• Info Windows -- Customize the popup that appears when a marker is clicked.
• Google Maps API Setup -- Configure the API key that powers the map.