Source: https://developers.woosmap.com/products/widgets/store-locator-widget/full-configuration/

> For clean Markdown of any page, append `.md` to the page URL.

> For a complete documentation index, see https://developers.woosmap.com/llms.txt

# Configure the Woosmap Store Locator Widget



To match your preferences and website’s graphic style, all the properties of your Store Locator Widget can be customised client side. Here is an overview of the properties you’ll be able to set in your integration code (see [Store Locator Widget Reference](/products/widgets/store-locator-widget/store-locator-widget-reference/) for more details).

## How to Set Custom Configuration

To match your preferences and website’s graphic style, all the properties of your Store Locator Widget can be customised client side using `setConf()`.
Call this method before `render()` your Store Locator.

```html
<div id="HTMLElementID"></div>
<script type="text/javascript" src="//webapp.woosmap.com/webapp.js"></script>
<script type="text/javascript">
  const loadWebApp = function () {
    const storeLocator = new WebApp("HTMLElementID", "woosmap-public-key");
    const storeLocatorConfig = { theme: { primaryColor: "#FF66CC" } }; // set your config. here we modified the primary color.
    storeLocator.setConf(storeLocatorConfig);
    storeLocator.render();
  };
  loadWebApp();
</script>
```

## Define Languages, Unit Systems and Labels

The Store Locator Widget is currently available for the following languages : French, English, Spanish, German, Italian, Portuguese, Dutch, Catalan, Brazilian Portuguese, Russian, Chinese, Japanese, Ukrainian, Hebrew, Polish, Romanian, Croatian, Swedish, Greek, Slovenian, Hungarian, Czech and Slovak.
That means all default labels such as the localization button "Around you" or the text input placeholder "Search...", will be translated into the chosen language.

```js
const storeLocatorConfig = {
  internationalization: {
    lang: "en", //values available are [fr, en, es, de, it, pt, nl, ca, pt-br, ru, zh, ja, uk, he, pl, ro, hr, sv, el, sl, hu, cs, sk ]
    period: "en-US", //Hour system to display openning hours [‘fr’ (for 24h), ‘en-US’ (for 12h)].
    unitSystem: 1, //The unit system to display distances [0 (Metric), 1 (Imperial)].
  },
};
```

In addition to these default labels, you can specify custom translations for “More details” link and “Set as favorite” button that are displayed when a store is selected.

```js
const storeLocatorConfig = {
  internationalization: {
    customTranslations: {
      //Provides custom internationalization for given languages.
      en: {
        storeview: {
          visitStorePage: "Visit the Store Page",
        },
        favoritebuttonview: {
          setAsFavorite: "Define as my Store",
        },
      },
    },
  },
};
```

## Customize the Markers Style

To keep up with your brand identity and ensure the best possible readability and navigation, the map offers two types of display for stores, Simplified view with Dots Markers and Markers view with Image Markers.

### Dots Markers

Stores are displayed as colored dots on the map. Useful for the top zoom levels and to render large amount of stores keeping the map display clean and fast.
The size (in pixel) of the dots depends on the zoom level and vary based on `size` and `minsize` attributes. The higher the zoom level is, the thinner the dots are.
Dots colors can be set for different types of service you may have on your network (eg. drive, click and collect, etc).

```js
const storeLocatorConfig = {
  woosmapview: {
    tileStyle: {
      color: "#ef8900", //default color
      size: 11,
      minSize: 5,
      typeRules: [
        {
          type: "drive",
          color: "#bbb300", //color for drive store type
          zIndex: 2, // adjust zIndex to prioritize marker display when they overlap
        },
        {
          type: "click & collect", //color for click & collect store type
          color: "#733f00",
          zIndex: 1,
        },
      ],
    },
  },
};
```

### Images Markers

Stores are also displayed on the map as images. They are useful to render detailed markers (branding, logos, etc.) after a specific specific zoom level (`breakpoint` attribute).

You can specify custom icon markers for the default view (`icon`), for when a store is **selected** (`selectedIcon`), or when a store is **displayed after a search** (`numberedIcon`). You can find a live example of this behavior right here in the [sample store locator widget](/products/widgets/store-locator-widget/sample-usage/#sample).

```js
const storeLocatorConfig = {
  woosmapview: {
    breakPoint: 10,
    style: {
      default: {
        icon: {
          url: "https://images.woosmap.com/mapin/default.svg",
        },
        selectedIcon: {
          url: "https://images.woosmap.com/mapin/selected.svg",
        },
        numberedIcon: {
          url: "https://images.woosmap.com/mapin/searched_result.svg",
        },
      },
      rules: [
        {
          type: "drive",
          icon: {
            url: "https://images.woosmap.com/mapin/drive_default.svg",
          },
          selectedIcon: {
            url: "https://images.woosmap.com/mapin/drive_selected.svg",
          },
          numberedIcon: {
            url: "https://images.woosmap.com/mapin/drive_default.svg",
          },
        },
      ],
    },
  },
};
```

An alternative display option allows you to display the image of a number (_from 1 to n_) of the closest stores from the searched location. To do, just put markers images in a dedicated path with a number filename (e.g. "/1.svg", "/2.svg") and specify the `numberedIcon` like below.

```js
const storeLocatorConfig = {
  woosmapview: {
    breakPoint: 10,
    style: {
      default: {
        icon: {
          url: "https://images.woosmap.com/mapin/default.svg",
        },
        selectedIcon: {
          url: "https://images.woosmap.com/mapin/selected.svg",
        },
        numberedIcon: {
          url: "https://images.woosmap.com/mapin/{number}.svg",
        },
      },
    },
  },
};
```

## Set Initial View

You can configure the initial zoom (`initialZoom`) and initial center (`initialCenter`) of the map.
You could also let us automatically adjust the viewport of the map and to fit your stores distribution by using the `fitBounds` parameter.

```js
const storeLocatorConfig = {
  woosmapview: {
    initialCenter: {
      // Configure the initial center of the map.
      lat: 48.967529,
      lng: 2.368438,
    },
    initialZoom: 5, // Configure the initial zoom on the map. Value is between 0 and 22.
    /* "fitBounds": true */ // If true, the widget will set the viewport of the map to fit all the displayed assets.
  },
};
```

If you wish to automatically center the maps to display an initial view you can set an initial search. It will be automatically geocoded to display stores around this location (the Google Geocode API has to be allowed for your Google Maps API Key).

```js
const storeLocatorConfig = {
  initialSearch: {
    text: "London",
  },
};
```

## Refine the Search Feature

When a user search for a location and select a prediction in the dropdown pick list, stores nearby this place are returned.
They are displayed ordered by estimated distance from this search. By default, Google DistanceMatrix API is used to compute the distance but you can disable this feature and order stores by distance as the crow flies.  
Number of stores fetched from a user search or geolocation can be set between 1 to 20.

```js
const storeLocatorConfig = {
  datasource: {
    maxResponses: 10,
    maxDistance: 10000, // in meters
    useDistanceMatrix: false,
  },
};
```

The standard search configuration relies on [Woosmap Localities](/products/localities/overview/).
This service returns predictions for addresses as well as other location types such as city names, suburbs, postal codes and points of interest. Configure the `types` parameter to control which location types are returned.

```js
const storeLocatorConfig = {
  maps: {
    localities: {
      types: ["locality", "postal_code", "address"],
      componentRestrictions: { country: "gb" },
    },
  },
};
```

In addition to the location predictions, you can have autocompletion on your stores names. Stores predictions will be added above the location predictions. You can set the max number of stores returned (default is 3).

```js
const storeLocatorConfig = {
  maps: {
    autocompleteStores: {
      maxStores: 3,
    },
  },
};
```

If you have a Google Maps Licence, you can configure Google Places to get predictions. (NB: Stores autocomplete cannot be used alongside Google Places because it's against its Terms Of Services)
You'll need to specify a Google API Key and enabled in your Google console the Places API. Take a look at this [blog post](https://blog.woosmap.com/implement-and-optimize-autocomplete-with-google-places-api#enable-the-places-api) to see how.

You can define through the property `places` the Google Places [AutocompletionRequest](https://developers.google.com/maps/documentation/javascript/reference/places-autocomplete-service#AutocompletionRequest) (restrict the search for a specific country for example) and set a `minLength` parameter to only trigger the Autocomplete when the text input reaches at least X characters.
The search can also be bounded to a given extent to take into account your store density.

```js
const storeLocatorConfig = {
  maps: {
    apiKey: "AKqsdlj19898s_qsdk",
    places: {
      types: ["geocode"],
      componentRestrictions: { country: "gb" },
    },
    minLength: 2,
  },
};
```

If you do not want to provide autocomplete capabilities to your store locator (for cost or UX reasons) you can choose to configure neither Localities nor Places services.
If so, depending on the Map Provider (defined below), the Geocoding API of your Map Provider will be used (either Woosmap Localities API or Google Maps Geocoding API).
The user will not be offered a prediction pick list and will need to press enter to geocode his input text.

```js
const storeLocatorConfig = {
  maps: {
    geocoder: {
      componentRestrictions: { country: "gb" },
    },
  },
};
```

## Change Map Provider

The default map provider is Google Maps so the widget loads the Google Maps JS Library and display the Google basemap.
You can choose from three map providers: Google Maps, Baidu and [Woosmap Map](/products/map-api/get-started/).
Set the desired `maps.provider` value from [available MapType](/products/widgets/store-locator-widget/store-locator-widget-reference/#MapType).

```js
const storeLocatorConfig = {
  maps: {
    provider: "woosmap", // for Woosmap Map or "google" or "baidu"
  },
};
```

## Change Distance and Route Provider

By default, the distance of nearby stores from a search position are computed using Google Distance Matrix API.
Alternatively, you may want to return the radial distance or use our built-in [Woosmap Distance API](/products/distance-api/overview/).

```js
const storeLocatorConfig = {
  datasource: {
    distanceMatrixProvider: "woosmap",
  },
};
```

By the same token, the driving direction feature can use the route endpoint of the Woosmap Distance API instead of Google Maps Directions API.

```js
const storeLocatorConfig = {
  datasource: {
    routeProvider: "woosmap",
  },
};
```

## Filter by Specific Types, Tags or using a Custom Query

You could configure your store locator widget to let your users filter the stores according to predefined criteria.
Depending on the `propertyType`, you are able to add filters based on `type`, `tag` or `custom` queries. You can add multiple filter groups of the same type.

You can control the order in which filters are rendered by enabling the `customOrder` configuration option. When this configuration is added, the filter groups will be rendered in the order defined in the filters array.

If `customOrder` configuration option is not specified or disabled, the filters will be rendered in their default order i.e. `type` followed by `tag` and lastly `custom`.

The example below illustrates how to specify the order on filters and enable the setting of multiple filter groups of the same type.

```js
const storeLocatorConfig = {
  filters: {
    customOrder: true,
    filters: [
      {
        propertyType: "custom", //based on any data associated to your stores
        title: {
          en: "Drive in Paris",
        },
        choices: [
          {
            key: '(type:"Drive" AND city:"Paris")', //build your query here
            en: "Drive in Paris",
            fr: "Drive à Paris",
          },
        ],
        innerOperator: "or",
      },
      {
        propertyType: "type", //based on Types
        title: {
          en: "Types",
        },
        choices: [
          {
            key: "click_and_collect",
            en: "Click & Collect",
          },
          {
            key: "drive",
            en: "Drive",
          },
        ],
        innerOperator: "and",
      },
      {
        propertyType: "tag", //based on Tags
        title: {
          en: "Services",
        },
        choices: [
          {
            key: "park",
            en: "Parking",
          },
          {
            key: "fuel",
            en: "Fuel Station",
          },
        ],
        innerOperator: "and",
      },
      {
        propertyType: "custom", //based on any data associated to your stores
        title: {
          en: "Region",
        },
        choices: [
          {
            key: 'user.region:="western europe"',
            en: "Western Europe",
          },
          {
            key: 'user.region:="northern europe"',
            en: "Northern Europe",
          },
        ],
        innerOperator: "or",
      },
    ],
    outerOperator: "and",
  },
};
```

Beside you have also the possibility to initiate the store locator with a predefined filter. But this will disallow the filtering interface capability.

```js
const storeLocatorConfig = {
  datasource: {
    baseFilter: '(type:"Drive" OR type:"Click & Collect") AND tag:"Fuel Station"',
  },
};
```

## Driving Directions to Store

If your visitor wants to pick up a product or visit your store, the store locator provides driving directions capability from his
current position (or current search) to the desired destination. It uses the Google Maps Direction API.
Instead, you could set the direction button ({% include svg/icons/direction.svg %}) to redirect the user to Google Maps (maps.google.com) by setting the `disableDirections` parameter to `true`.

```js
const storeLocatorConfig = {
  maps: {
    disableDirections: true,
  },
};
```

## what3words capabilities

You can activate what3words features in your Store Locator Widget and combine Woosmap and what3words capabilities for searching and describing your stores.
To do so, set `w3w` parameter to `true`

```js
const storeLocatorConfig = {
  maps: {
    w3w: true,
  },
};
```

Enabling what3words will:

- automatically display the 3 word addresses for every assets when left panel details are requested
- add what3words autocompletion in the search field in addition to the search services already set

For the latest, what3words suggestions will be displayed as soon as an input is starting with `///` and follows the 3 words address structure (e.g. ///firstword.secondword.thirdword).  
See for more details on [Woosmap for what3words](/products/w3w-api/overview/) here and get an example of it [here](/products/widgets/store-locator-widget/advanced-usages/#what3words).