Skip to main content

Theme a Google Map with presets or custom JSON

Map themes apply to Google Maps. Leaflet/OpenStreetMap uses its tile layer and does not consume Google style JSON.

Choose map type and visual style​

Open Store Locator → Settings → Map. Set Map type to Road map, Satellite, Hybrid, or Terrain, then click Map style.

The picker includes Google's familiar Standard, Silver, Retro, Dark, Night, and Aubergine styles plus a broad gallery including monochrome, dark, blue, green, earth, warm, pink, and purple palettes. Selecting a preset saves its key; the frontend resolves the matching style rules.

Use custom JSON​

  1. Choose Custom JSON in the Map-style picker.
  2. Paste a valid Google Maps JavaScript API style array.
  3. Save Settings.
  4. Reload the public locator without cache.

The value must be a JSON array such as:

[
  {"elementType":"geometry","stylers":[{"color":"#f5f3ff"}]},
  {"featureType":"water","elementType":"geometry","stylers":[{"color":"#c4b5fd"}]}
]

Invalid JSON safely falls back to no custom styling. Do not paste JavaScript variables, comments, a surrounding object, or CSS.

Preview thumbnails and Static Maps API​

The admin picker generates visual thumbnails with the Google Maps Static API and the configured browser key. If the public dynamic map works but picker thumbnails do not, enable Maps Static API and authorize it for the browser key; the saved preset can still apply to the public JavaScript map.

Override a theme for one locator​

Edit a Layout, select its Map widget, and choose a Map style there. The widget selection overrides the site default only for that Layout. Choose Site default when the Layout should follow Settings → Map.

What a theme does not style​

Google style JSON changes basemap geometry, roads, water, POIs, and labels. It does not change:

  • saved icon markers or HTML marker designs;
  • cluster style/color;
  • infobox typography and background;
  • search form, Store cards, or directions panel.

Choose where turn-by-turn directions appear​

Select the Map widget and use Map → Directions panel placement:

  • Inside map keeps the existing split-panel behavior. Opening directions reveals the instructions at the start edge of the Map and reduces the route canvas width.
  • Overlay Store List places the instructions over the first Store List in the same locator. The Store List retains its dimensions, its cards and controls are temporarily hidden, and closing directions restores the list exactly where the visitor left it. This is useful when the Map column is too narrow to split comfortably.

Overlay placement automatically falls back to Inside map when the locator has no Store List, when Map-only view is active, or while the Map is fullscreen.

Choose the starting point for directions​

A Directions button only starts routing immediately when the visitor has already shared an exact browser location. Otherwise the Map opens Choose your starting point instead of attempting a route from an IP estimate or unrelated search coordinate.

The visitor can either:

  • choose Use my location, which triggers the browser permission request; or
  • enter From address and choose a Google Places suggestion, then select Get directions.

If location permission is denied, the prompt stays open and explains that an address can be entered instead. A manually typed address is geocoded when submitted, so the field remains useful if a suggestion was not selected. Google Places suggestions require a configured Google Maps API key with Places API enabled; the typed-address fallback remains available without it.

The starting point entered here belongs only to the route. It does not populate the Layout's Location Search field, change the active radius, reorder Stores, or reload the Store List. Closing directions therefore returns the visitor to the exact search results they had before requesting the route.

Those are controlled by Marker records, Builder designs, Map widget cluster controls, and the plugin theme settings.