Integrating Localities with the Store Locator Widget
Customize the Store Locator Widget’s search bar to provide interactive, as-you-type suggestions and filter the results.
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, such as types and
componentRestrictions.
Here is a complete example that configures the locator to search only for cities and postcodes within Great Britain.
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.
```