Map settings

To configure the map settings, go to the Store locator page tab that you find in the plugin panel.

Configure map settings

Map settings

Now you can start setting the available options:

  • Show the map: with this option, you can decide whether to show the map on your store locator page or not. By setting this option to ON, you will be able to configure the following options…
  • Default map position: here, you can enter the longitude and latitude for the default position;
  • Default map type: select the type to show the map. Options available: roadmap or satellite;
  • Default map zoom: this allows defining the default zoom for the store locator map;
  • Map scroll type: select how to scroll the map of the store locator (with Mouse wheel+ctrl or Mouse wheel);
  • Default icon for user position in 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.

 

Pin info modal settings

To set the store information that you want to show in the modal on the map, go to YITH > Store Locator > Store locator page > Pin info modal settings.

First of all, you can choose to show the modal or not. By enabling the option Show the info modal, you will need to set the following options:

Configure info modal settings

  • Open the modal at: choose when to show the modal from Click on pin or Mouse hover;
  • Modal width: set the width of the modal (in px). According to the value you insert, the height will be applied dynamically;
  • Modal colors: choose the colors for the background and the text of the pin modal;
  • Rounded corners: set if you want to show rounded corners rather than the rectangular box;

  • 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 frontend

 

Radius circle

From the Store locator page 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.

Configure radius settings

Radius on frontend