Search Stores Nearby Localities

Add the Localities Autocomplete Widget to your Store Locator

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);
    });