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:

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

Add a container for your Widget

<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

#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

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

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