June 19, 2024

Search Stores Nearby Localities

Add the Localities Autocomplete Widget to your Store Locator

1. Add Localities Autocomplete Widget
2. Configure the Widget
3. Init and Search Stores on User Selected Locality

Add Localities Autocomplete Widget

Set up the document by adding Woosmap localities Widget to your head:

HTML

        <script src="https://sdk.woosmap.com/localities/localitieswidget.js?key=woos-81a699ca-5082-3ffd-9f54-a684a4b82853"></script>

    

Add a container for your Widget

HTML

        <div id="main">
  <div id="my-map-container">
    <div id="my-map">MAP</div>
  </div>
  <div id="sidebar-container">
    <div id="sidebar">
      <div id="search-container">
        <input id="search-input" type="search" placeholder="Search for Postcode Or Locality..." autocomplete="off" role="combobox">
      </div>
      <section id="listing-stores-container">
      </section>
      <section id="selected-store-container">
      </section>
    </div>
  </div>
</div>

    

Add custom style

CSS

        #search-container {
    display: flex;
    position: relative;
    box-shadow: none;
    width: 100%;
    flex-shrink: 0;
    z-index: 1;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
input[type=search] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none
}

input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}
#search-input {
    height: 48px;
    width: 100%;
    border: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 2rem;
    padding-left: .6em;
    font-size: 17px !important;
    border-bottom-color: transparent;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
    border-radius: 3px;
}
.localities-input-wrapper, .localities-input-container{
  width: 100%;
}
.localities-input-wrapper{
  padding: 10px;
}

    

Configure the Widget

Set the widget to search for different places and only for Country GB

JavaScript

        const localitiesOptions = {
    components: {"country": ["gb"]},
    types: ["locality", "postal_code", "admin_level", "airport", "metro_station", "train_station", "museum", "zoo", "amusement_park", "art_gallery", "tourist_attraction"]
};

    

Init and Search Stores on User Selected Locality

JavaScript

        let localitiesWidget = new woosmap.localities.Autocomplete('search-input', localitiesOptions);
    localitiesWidget.addListener('selected_suggestion', () => {
        let locality = localitiesWidget.getSelectedSuggestionDetails();
        search(locality.location);
    });