Map Styles

3 min read Updated

The Map Styles addon adds 23 ready-made styles to the SiteOrigin Google Maps widget. It also adds an option to center the map on the visitor’s location, and more design settings for the Google Maps consent prompt. For the widget’s other settings, see the Google Maps widget documentation.

View the Map Styles demo.

Requirements

Go to SiteOriginPremium Addons and activate Map Styles. This also activates the Google Maps widget.

Premium Styles

  1. Open a Google Maps widget and expand the Styles section.
  2. Set Map styles to Premium Styles. With the addon active, the options are Default, Premium Styles, Custom and Predefined Styles.
  3. In the Premium styles field, click a style.
  4. Click Done and save the page.

The Styles section of the Google Maps widget with Map styles set to Premium Styles and the Silver style selected

Premium styles
A picker with a preview of each style. The styles come from Snazzy Maps and the Google Maps Platform Styling Wizard. They are Apple Maps-esque, Aubergine, Avocado World, Blue Essence, Blue Water, Clean Cut, Cobalt, Dark, Lunar Landscape, Map, Midnight Commander, Neutral Blue, Night, Old Dry Mud, Purple Rain, Retro, Shades Of Grey, Silver, Subtle Grayscale, Two Tone, Ultra Light, Vintage Old Golden Brown and Wy. Shows only when Map styles is Premium Styles. Default: Silver.

The free Styled map name field also shows for Premium Styles. The name appears in the map type control of an Interactive map, next to Map and Satellite. If you leave it empty, the map uses the style name, for example “Silver”.

A Premium style works on Interactive and Static image maps. Like any map style, it replaces the Map ID: the widget uses the Map ID only when the map has no style.

Center on User’s Location

Center on user’s location
Centers the map on the visitor’s location. You’ll find it below Map center, above the Settings section. The browser asks the visitor for permission first. If the visitor says no, or the browser can’t find the location, the map stays on the Map center. When Show marker at map center is on, the marker moves to the visitor’s location. Requires HTTPS. Default: off.

The option shows for Static image maps too, but it works only on Interactive maps.

The Google Maps widget can show a consent prompt before it loads the Google Maps API. To turn it on, go to PluginsSiteOrigin Widgets, find the Google Maps widget, click Settings and enable Require consent before loading Maps API. The prompt shows on Interactive maps only. See the Google Maps widget documentation for the free prompt settings.

View the Google Maps API consent demo.

Map Styles adds two sections inside Consent prompt design, below the free Button section.

Premium consent settings for the Google Maps widget

Background

Consent Prompt Background Color
Meant to set the color of the band behind the prompt text. At the moment, this setting has no effect. The band stays a dark, 85% opaque black.

Consent Prompt Background Image
The image behind the prompt. Choose an image from the Media Library, or enter an External URL. Leave it empty to use the widget’s default map image.

Text

Consent Prompt Text Color
Default: #fff.

Consent Prompt Link Color
The color of links in the prompt text, such as the default Read more link. Default: #41a9d5.

Consent Prompt Link Color hover
The link color when a visitor hovers over the link. Default: #298fba.