Stores Search

Sample code for Woosmap Map JavaScript API author(s): Woosmap

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Stores Search</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <!-- jsFiddle will insert css and js -->
  </head>
  <body>
    <div id="container">
      <div class="search-panel" id="sidebar">
        <div id="search-container">
          <h3>Search Stores Nearby</h3>
          <div id="search-input-container">
            <input
              type="text"
              name="autocomplete"
              id="autocomplete-input"
              placeholder="Search an Address..."
              autocomplete="off"
            />
            <button class="btn" type="submit" id="submit-button">
              <span class="btnText" tabindex="-1">Search</span>
            </button>
          </div>
        </div>
        <div id="stores-panel">
          <div class="stores-list">
            <p style="padding: 0 0.8rem; font-size: 17px">
              Enter an address to geocode and search stores nearby or click on
              the map to reverse geocode and search around this location.
            </p>
          </div>
        </div>
      </div>
      <div id="map"></div>
    </div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-e1e5490b-19d1-34f8-9955-fd5cfc8c880f&callback=initMap"
      defer
    ></script>
  </body>
</html>

CSS

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
}

#container {
  height: 100%;
  display: flex;
}

#sidebar {
  flex-basis: 12rem;
  flex-grow: 1;
  max-width: 30rem;
  height: 100%;
  box-sizing: border-box;
  overflow: auto;
}

#map {
  flex-basis: 70vw;
  flex-grow: 5;
  height: 100%;
}

.btn {
  background: #3d5afe;
  border: 0;
  border-radius: 4px;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
  -webkit-transition: background 0.3s, color 0.3s;
  transition: background 0.3s, color 0.3s;
  box-sizing: border-box;
  font-size: 14px;
  color: #202124;
  cursor: pointer;
  display: inline;
  font-weight: 600;
  height: 40px;
  padding: 0 15px;
  position: relative;
  align-items: center;
}
.btn:hover {
  background: rgb(10.2615384615, 46.8461538462, 253.7384615385);
}

.btnText {
  color: #fff;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  line-height: 1.25rem;
}
.btnText:hover {
  text-decoration: none;
}

#sidebar {
  flex-basis: 25rem;
  box-shadow: 0 -2px 4px 0 rgba(0, 0, 0, 0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1;
}

#stores-panel {
  overflow: hidden;
  background: #fff;
  overflow-y: auto;
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
}
#stores-panel h3 {
  padding: 2rem 1.3rem 1.3rem;
  margin-bottom: 0;
  outline: 0;
}
#stores-panel ul {
  margin: 0 !important;
  padding: 0;
  list-style: none;
}
#stores-panel button {
  border: none;
}

#search-container {
  padding: 1rem 0.5rem;
  background: rgb(250, 251, 252);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
#search-container...

JavaScript

let map;
let activeLocation = null;
let storesOverlay;
const gestureMode = "greedy";
let storesService;
let localitiesService;
const storesStyle = {
  breakPoint: 21,
  rules: [],
  default: {
    color: "#008a2f",
    size: 8,
    minSize: 1,
    icon: {
      url: "https://images.woosmap.com/starbucks-marker.svg",
      scaledSize: {
        height: 40,
        width: 34,
      },
    },
    selectedIcon: {
      url: "https://images.woosmap.com/starbucks-marker-selected.svg",
      scaledSize: {
        height: 50,
        width: 43,
      },
    },
  },
};
const mapOptions = {
  center: { lat: 51.50940214, lng: -0.133012 },
  zoom: 12,
  styles: [
    {
      featureType: "poi.business",
      elementType: "labels",
      stylers: [
        {
          visibility: "off",
        },
      ],
    },
  ],
  gestureHandling: gestureMode,
};
const inputElement = document.getElementById("autocomplete-input");
const submitButton = document.getElementById("submit-button");

if (inputElement && submitButton) {
  inputElement.addEventListener("keydown", handleKeyPress);
  submitButton.addEventListener("click", handleGeocodeFromSubmit);
}

function handleKeyPress(event) {
  if (event.key === "Enter") {
    handleGeocode(null);
  }
}

function handleGeocodeFromSubmit() {
  handleGeocode(null);
}

function displayListStores(stores) {
  const storeTemplates = stores.map(createStoreTemplate);
  const storeList = document.querySelector(".stores-list");

  if (storeList) {
    storeList.innerHTML = storeTemplates.join("");
  }

  addClickListenerToStoreCards(stores);
}

function createStoreTemplate(store, indexStore) {
  const { name, address, contact, distance } = store.properties;
  const phoneHtml = contact.phone
    ? `<div class='store-contact'><a href='tel:${contact.phone}'>${contact.phone}</a></div>`
    : "";
  const distanceHtml = distance
    ? `<div class='store-distance'>${distance}</div>`
    : "";
  const websiteHtml = contact.website
    ? `<div...