View Product Page

Map settings

To configure the map settings, go to Store locator page -> Map tab and choose whether to show the map on your store locator page or not. By setting the option Show the map to ON, you will be able to configure the following options:

Map settings
  • Map position: define the position of the map and search results by showing the map on the right or on the left;
  • Map width (in %): set the width of the map as a percentage to calculate the list of search results automatically. Default value: 65;
  • Map height (in pixel): set the width of the map (px).
Default map settings
  • Default map position: define the default map position by using Google suggestions;
  • Default map type: select the map type to show. Options available: roadmap and satellite;
  • Default map zoom: this allows defining the default zoom for the store locator map;
Map scroll and default icon
  • Map scroll type: select how to scroll the map of the store locator (with Mouse wheel+ctrl or Mouse wheel);
  • Default icon for user’s position on the map: choose the icon to identify the user position in the map from the default one or by uploading a custom icon;
  • Default icon for store in the map: choose the icon to identify the store position in the map from the default one or by uploading a custom icon. This can be overridden if you want to use a different icon for each store;
  • Map style: here, you can use the JSON code provided by Google for your custom style. Go to https://mapstyle.withgoogle.com/ and click on Create style

Select the theme and click on Finish.

Now copy the JSON…

and paste it into Map style option.

Custom map style

Pin info modal settings

To set the store information that you want to show in the modal on the map, go to Store locator page > Map.

Firstly, you can choose whether to show the modal or not. By enabling the option Show the info modals, you will need to set the following options:

Pin info modal on the map
  • Open the modal at: choose if you want to show the modal when users Click on pin or Mouse hover;
  • Modal width: set the width of the modal (in px). Based on the value you insert, the height will apply dynamically;
  • Modal colors: choose the colors for the background and the text of the pin modal;
  • Border radius: set if you want to show a circle box rather than the rectangular box. For the latter, set to 0.
Pin info modal settings
  • Show store name: enable this option if you want to show the store name within the pin modal;
  • Show store description: enable this option if you want to show the store description within the pin modal;
  • Show store address: enable this option if you want to show the store address within the pin modal;
  • Show store contact info: enable this option if you want to show the store contact info within the pin modal;
  • Show get direction link: enable this option if you want to show the store direction link within the pin modal;
  • Show contact link: enable this option if you want to show the store contact link within the pin modal;
  • Show visit website link: enable this option if you want to show the store website link within the pin modal.
Pin info modal on the map

Radius circle

From the Store locator page -> Map tab in the plugin panel, you can also choose to show or hide the radius on the map and configure its colors and border weight through the options shown below.

Show radius circle on the map
Radius circle on the map