Source: https://developers.woosmap.com/products/localities/guides/store-locator-widget/

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

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

# Integrating Localities with the Store Locator Widget



## Overview

Beyond its standalone use, the **Woosmap Localities API** can be integrated to power the search functionality of other
Woosmap products. A primary example is configuring the **Store Locator Widget** to search for general localities (like
cities, postcodes, or train stations) instead of precise street addresses.

This guide shows you how to enable this integration.

## How it Works

By default, the Store Locator Widget's search bar the search bar uses the **Localities Geocode API**. It's designed to
take a complete query (like "10 Downing Street, London") and return a precise geographic coordinate upon submission.

To provide a more interactive experience, you can switch the widget to use the **Localities Autocomplete API**. This is
triggered by adding a `localities` object to your configuration. This changes the search bar into a suggestion tool that
provides a list of potential locations as the user types, helping them find what they're looking for faster.

## Configuration

To enable Localities search, add a `localities` object inside the `maps` property of your Store Locator Widget
configuration. This object allows you to pass any valid parameters from
the [Localities Autocomplete API](/products/localities/features/autocomplete/), such as `types` and
`componentRestrictions`.

Here is a complete example that configures the locator to search only for cities and postcodes within Great Britain.

```javascript
const storeLocatorConfig = {
    // Other Store Locator configurations go here...
    maps: {
        // The 'localities' object enables the integration.
        localities: {
            // Define the types of results to search for.
            // Full list available in the Localities API reference.
            types: ["locality", "postal_code"],

            // Restrict searches to a specific country.
            componentRestrictions: {
                country: "gb"
            }
        }
    }
};

// Initialize the Store Locator with the custom configuration
const storeLocator = new woosmap.storeLocator.StoreLocatorWidget(
    document.getElementById("my-store-locator"),
    storeLocatorConfig
);
```

With this configuration, when a user types "London" into the search bar, the widget will suggest the city of London and
its postcodes, centering the map on the selected area to display nearby stores.

For a complete list of all available widget settings, please refer to
the [Store Locator Widget Full Configuration Guide](/products/widgets/store-locator-widget/full-configuration/).

```