Community Forum

Store Locator Widget Advanced Usage

Listen to advanced user events and customize your widget with your own style.
  1. Events
  2. Custom renderer
  3. Custom Filters
  4. what3words
  5. Baidu Map

Events

The Store Locator Widget provides events you can listen to. Whenever a user triggers an existing event from the HANDLED_EVENT object, the Store Locator Widget will fire a callback function with dedicated parameters.

For example, the Widget will fire a SELECT_STORE event when the user selects a Store either by clicking on a store from the side panel or by clicking a marker on the map. The fired callback function for this event has the store_id parameter.

Supported Events

We mainly focus on User Events. Here is the full list of supported events and the parameters that are passed to the callback function. Check reference for more details.

Event Name Descripition Parameters
FAVORITED Triggered when a store is set as favorite id_store
SELECT_STORE Triggered when a store is selected id_store
PHONE_CLICK Triggered when the phone number of a selected store is clicked id_store, phone
EMAIL_CLICK Triggered when the email of a selected store is clicked id_store, email
LOCATION_SELECTED Triggered when the user select a suggestion from the search results LatlngLocation
GEOCODE Triggered when a geocode request succeeds querystring
AUTOCOMPLETE Triggered when an autocomplete request is sent querystring
GET_DIRECTIONS Triggered when retrieving directions id_store, startLatlng, endLatlng
SELECT_DIRECTION Triggered when an itinerary is selected from the directions list id_store, SelectedDirection

Handling Events

To register for event notifications, use the methods listenOn or listenOnce, event handler. That method takes an event to listen for, and a function to call when the specified event occurs.

JavaScript
        const webapp = new WebApp('storeContainerID', 'your-woosmap-public-key');
webapp.listenOn(webapp.HANDLED_EVENT.SELECT_STORE, function(storeId) {
    console.log("store has been selected " + storeId);
});

Use the favorite store button

The FAVORITED event has a special behavior: the event must be listened to (see the Handling events part) for the Favorited button to be displayed in the detailed store view. To apply a translation to the button label, use the store locator config.

JavaScript
        const webapp = new WebApp('storeContainerID', 'your-woosmap-public-key');
webapp.listenOn(webapp.HANDLED_EVENT.FAVORITED, function(storeId) {
  console.log("Favorite store has been set:" + storeId);
});

Example

The below sample will show you what events are triggered by the Woosmap Store Locator Widget as you interact with it.

Store Locator Widget Events
        const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialCenter: {
      lat: 51.50940214,
      lng: -0.133012,
    },
    initialZoom: 15,
    breakPoint: 16,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 5,
    },
    style: {
      default: {
        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 events = [
  "AUTOCOMPLETE",
  "EMAIL_CLICK",
  "FAVORITED",
  "GEOCODE",
  "GET_DIRECTIONS",
  "LOCATION_SELECTED",
  "PHONE_CLICK",
  "SELECT_DIRECTION",
  "SELECT_STORE",
];

function populateTable(): void {
  const eventsTable = document.getElementById("sidebar") as HTMLElement;
  eventsTable.innerHTML = events
    .map((event) => `<div class="event" id="${event}">${event}</div>`)
    .join("");
}

function setupListener(name: string) {
  const eventRow = document.getElementById(name) as HTMLElement;
  eventRow.classList.remove("inactive");
  eventRow.classList.add("event", "active");
  window.setTimeout(() => {
    eventRow.classList.remove("active");
    eventRow.classList.add("inactive");
  }, 1000);
}

function isMobileDevice(): boolean {
  return window.innerWidth < 500;
}

function initStoreLocator(): void {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  populateTable();
  webapp.listenOn(webapp.HANDLED_EVENT.SELECT_STORE, (storeId) => {
    console.log(storeId);
    setupListener("SELECT_STORE");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.PHONE_CLICK, (storeId, phone) => {
    console.log(storeId, phone);
    setupListener("PHONE_CLICK");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.EMAIL_CLICK, (storeId, email) => {
    console.log(storeId, email);
    setupListener("EMAIL_CLICK");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.LOCATION_SELECTED, (location) => {
    console.log(location);
    setupListener("LOCATION_SELECTED");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.GEOCODE, (query) => {
    console.log(query);
    setupListener("GEOCODE");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.AUTOCOMPLETE, (query) => {
    console.log(query);
    setupListener("AUTOCOMPLETE");
  });
  webapp.listenOn(
    webapp.HANDLED_EVENT.GET_DIRECTIONS,
    (storeId, start, end) => {
      console.log(storeId, start, end);
      setupListener("GET_DIRECTIONS");
    },
  );
  webapp.listenOn(webapp.HANDLED_EVENT.SELECT_DIRECTION, (storeId) => {
    console.log(storeId);
    setupListener("SELECT_DIRECTION");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.FAVORITED, (storeId) => {
    console.log(storeId);
    setupListener("FAVORITED");
  });
  webapp.setConf(configLocator);
  webapp.render(isMobileDevice());
}

initStoreLocator();

declare global {
  // currently, the WebApp typings are not exported, so we use `any` here
  interface Window {
    WebApp: new (elementId: string, projectKey: string) => any;
  }
}

    
        const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialCenter: {
      lat: 51.50940214,
      lng: -0.133012,
    },
    initialZoom: 15,
    breakPoint: 16,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 5,
    },
    style: {
      default: {
        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 events = [
  "AUTOCOMPLETE",
  "EMAIL_CLICK",
  "FAVORITED",
  "GEOCODE",
  "GET_DIRECTIONS",
  "LOCATION_SELECTED",
  "PHONE_CLICK",
  "SELECT_DIRECTION",
  "SELECT_STORE",
];

function populateTable() {
  const eventsTable = document.getElementById("sidebar");

  eventsTable.innerHTML = events
    .map((event) => `<div class="event" id="${event}">${event}</div>`)
    .join("");
}

function setupListener(name) {
  const eventRow = document.getElementById(name);

  eventRow.classList.remove("inactive");
  eventRow.classList.add("event", "active");
  window.setTimeout(() => {
    eventRow.classList.remove("active");
    eventRow.classList.add("inactive");
  }, 1000);
}

function isMobileDevice() {
  return window.innerWidth < 500;
}

function initStoreLocator() {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  populateTable();
  webapp.listenOn(webapp.HANDLED_EVENT.SELECT_STORE, (storeId) => {
    console.log(storeId);
    setupListener("SELECT_STORE");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.PHONE_CLICK, (storeId, phone) => {
    console.log(storeId, phone);
    setupListener("PHONE_CLICK");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.EMAIL_CLICK, (storeId, email) => {
    console.log(storeId, email);
    setupListener("EMAIL_CLICK");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.LOCATION_SELECTED, (location) => {
    console.log(location);
    setupListener("LOCATION_SELECTED");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.GEOCODE, (query) => {
    console.log(query);
    setupListener("GEOCODE");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.AUTOCOMPLETE, (query) => {
    console.log(query);
    setupListener("AUTOCOMPLETE");
  });
  webapp.listenOn(
    webapp.HANDLED_EVENT.GET_DIRECTIONS,
    (storeId, start, end) => {
      console.log(storeId, start, end);
      setupListener("GET_DIRECTIONS");
    },
  );
  webapp.listenOn(webapp.HANDLED_EVENT.SELECT_DIRECTION, (storeId) => {
    console.log(storeId);
    setupListener("SELECT_DIRECTION");
  });
  webapp.listenOn(webapp.HANDLED_EVENT.FAVORITED, (storeId) => {
    console.log(storeId);
    setupListener("FAVORITED");
  });
  webapp.setConf(configLocator);
  webapp.render(isMobileDevice());
}

initStoreLocator();

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

/*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
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;
}

.events {
  font-family: "Droid Sans Mono", monospace;
}

.event {
  transition: background-color 0.5s ease-out;
  padding: 0.5em;
  overflow: hidden;
  font-size: 14px;
}

.active {
  background-color: #ffdd00;
  color: #000;
}

.inactive {
  background-color: white;
}


    
        <html>
  <head>
    <title>Store Locator Widget - Events</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <script src="https://webapp.woosmap.com/webapp.js"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="container">
      <div id="map"></div>
      <div class="events" id="sidebar"></div>
    </div>

    <script
      src="https://sdk.woosmap.com/map/map.js?key=woos-48c80350-88aa-333e-835a-07f4b658a9a4&callback="
      defer
    ></script>
  </body>
</html>

Custom renderer

Left store panel is fully customizable using setSummaryStoreRenderer setFullStoreRenderer

A more detailed article is available on the Woosmap blog.

The two following examples can be useful for those who want to customize the Store Locator Widget. The simple example is sort of a default theme that you can edit it to add or remove informations. The advanced example has all previous informations plus pictures and ratings.

Example of store custom renderers

Store Locator Widget Custom Renderer
        const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialZoom: 15,
    breakPoint: 16,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 5,
    },
    style: {
      default: {
        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,
          },
        },
      },
    },
  },
};

function getPhone({ properties }: woosmap.map.stores.StoreResponse) {
  const phone = properties.contact?.phone;
  return phone
    ? `<li id='store-phone'><span class='marker-image'></span><p><a class='text-black' href='tel:${phone}'>${phone}</a></p></li>`
    : "";
}

function getWebSite({ properties }: woosmap.map.stores.StoreResponse) {
  const website = properties.contact?.website;
  return website
    ? `<li id='store-website'><span class='marker-image'></span><a class='text-black' href='${website}' target='_blank'>More Details</a></li>`
    : "";
}

function getDistanceAndTime({ properties }) {
  const distanceLabel =
    (properties.distance_text || "") +
    (properties.duration_text ? ` (${properties.duration_text})` : "");
  return `<p class='summary-distance'>${distanceLabel}</p>`;
}

function formatAddress(properties: woosmap.map.stores.Store): string {
  return properties && properties.address
    ? `${properties.address.lines || ""}, ${properties.address.zipcode || ""} ${properties.address.city || ""}`
    : "";
}

function getAddress({ properties }: woosmap.map.stores.StoreResponse): string {
  const address = formatAddress(properties);
  return `
    <li id='store-address'>
      <span class='marker-image'></span>
      <div>
        <p>${address}</p>
        <p>${getDistanceAndTime({ properties })}</p>
      </div>
    </li>`;
}

function getSummaryAddress({
  properties,
}: woosmap.map.stores.StoreResponse): string {
  const address = formatAddress(properties);
  return `<p class='summary-address'>${address}</p>`;
}

function getSummaryPhone({
  properties,
}: woosmap.map.stores.StoreResponse): string {
  const phone =
    properties && properties.contact ? properties.contact.phone || "" : "";
  return `<p class='summary-address'>${phone}</p>`;
}

function getFullSchedule({
  properties,
}: woosmap.map.stores.StoreResponse): string {
  const weeklyOpening = properties.weekly_opening;
  const dayLabels = {
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday",
    7: "Sunday",
  };

  if (!weeklyOpening) {
    return "";
  }

  const daysHoursHTMLTable = Object.keys(dayLabels)
    .map((day) => {
      const hours = weeklyOpening[day]?.hours || [];
      let daysHours = "";

      if (hours.length === 0) {
        daysHours = "Closed";
      } else {
        const hoursStrings = hours.map((hour) => {
          if (hour["all-day"]) {
            return "24h/24";
          }
          return `${hour.start}-${hour.end}`;
        });
        daysHours = hoursStrings.join(", ");
      }

      return `<li><span class='day'>${dayLabels[day]}</span><span class="hours">${daysHours}</span></li>`;
    })
    .join("");

  return `<ul class='store-opening-hours-list'>${daysHoursHTMLTable}</ul>`;
}

function getHours(store: woosmap.map.stores.StoreResponse) {
  return `<li id='store-hours'><span class='marker-image'></span>${getFullSchedule(
    store,
  )}</li>`;
}

function getOpeningLabel({
  properties,
}: woosmap.map.stores.StoreResponse): string {
  if (!properties.open) {
    return "";
  }

  let openLabel: string;
  if (properties.open.open_now) {
    openLabel = `Open now until ${properties.open.current_slice?.end}`;
  } else {
    // @ts-ignore - TODO next_opening is wrongly spelled `nextOpening` in @types/woosmap.map
    openLabel = `Closed until ${convertTime(Date.parse(properties.open.next_opening?.day || "") / 1000)} at ${properties.open.next_opening?.start}`;
  }

  return `<p class='summary-hours'>${openLabel}</p>`;
}

function convertTime(UNIX_timestamp: number): string {
  const date = new Date(UNIX_timestamp * 1000);
  return date.toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

function createDetailedStoreCard(
  store: woosmap.map.stores.StoreResponse,
): HTMLElement {
  const myCustomContent = document.createElement("ul");
  myCustomContent.id = "myCustomContentID";
  myCustomContent.innerHTML = [
    getWebSite(store),
    getAddress(store),
    getHours(store),
    getPhone(store),
  ].join("");
  return myCustomContent;
}

function createSummaryStoreCard(
  store: woosmap.map.stores.StoreResponse,
): HTMLElement {
  const mySummaryContent = document.createElement("div");
  mySummaryContent.className = "store-summary";
  mySummaryContent.innerHTML = [
    `<p class='store-name'>${store.properties.name}</p>`,
    getSummaryAddress(store),
    getSummaryPhone(store),
    getOpeningLabel(store),
    getDistanceAndTime(store),
  ].join("");
  return mySummaryContent;
}

function isMobileDevice(): boolean {
  return window.innerWidth < 500;
}

function initStoreLocator(): void {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  webapp.setFullStoreRenderer(createDetailedStoreCard);
  webapp.setSummaryStoreRenderer(createSummaryStoreCard);

  webapp.setConf(configLocator);
  webapp.setInitialStateToSelectedStore("12003");
  webapp.render(isMobileDevice());
}

initStoreLocator();

declare global {
  // currently, the WebApp typings are not exported, so we use `any` here
  interface Window {
    WebApp: new (elementId: string, projectKey: string) => any;
  }
}

    
        const configLocator = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
  },
  datasource: {
    max_responses: 5,
    max_distance: 0,
  },
  theme: {
    primary_color: "#00754a",
  },
  woosmapview: {
    initialZoom: 15,
    breakPoint: 16,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 5,
    },
    style: {
      default: {
        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,
          },
        },
      },
    },
  },
};

function getPhone({ properties }) {
  const phone = properties.contact?.phone;
  return phone
    ? `<li id='store-phone'><span class='marker-image'></span><p><a class='text-black' href='tel:${phone}'>${phone}</a></p></li>`
    : "";
}

function getWebSite({ properties }) {
  const website = properties.contact?.website;
  return website
    ? `<li id='store-website'><span class='marker-image'></span><a class='text-black' href='${website}' target='_blank'>More Details</a></li>`
    : "";
}

function getDistanceAndTime({ properties }) {
  const distanceLabel =
    (properties.distance_text || "") +
    (properties.duration_text ? ` (${properties.duration_text})` : "");
  return `<p class='summary-distance'>${distanceLabel}</p>`;
}

function formatAddress(properties) {
  return properties && properties.address
    ? `${properties.address.lines || ""}, ${properties.address.zipcode || ""} ${properties.address.city || ""}`
    : "";
}

function getAddress({ properties }) {
  const address = formatAddress(properties);
  return `
    <li id='store-address'>
      <span class='marker-image'></span>
      <div>
        <p>${address}</p>
        <p>${getDistanceAndTime({ properties })}</p>
      </div>
    </li>`;
}

function getSummaryAddress({ properties }) {
  const address = formatAddress(properties);
  return `<p class='summary-address'>${address}</p>`;
}

function getSummaryPhone({ properties }) {
  const phone =
    properties && properties.contact ? properties.contact.phone || "" : "";
  return `<p class='summary-address'>${phone}</p>`;
}

function getFullSchedule({ properties }) {
  const weeklyOpening = properties.weekly_opening;
  const dayLabels = {
    1: "Monday",
    2: "Tuesday",
    3: "Wednesday",
    4: "Thursday",
    5: "Friday",
    6: "Saturday",
    7: "Sunday",
  };

  if (!weeklyOpening) {
    return "";
  }

  const daysHoursHTMLTable = Object.keys(dayLabels)
    .map((day) => {
      const hours = weeklyOpening[day]?.hours || [];
      let daysHours = "";

      if (hours.length === 0) {
        daysHours = "Closed";
      } else {
        const hoursStrings = hours.map((hour) => {
          if (hour["all-day"]) {
            return "24h/24";
          }
          return `${hour.start}-${hour.end}`;
        });

        daysHours = hoursStrings.join(", ");
      }
      return `<li><span class='day'>${dayLabels[day]}</span><span class="hours">${daysHours}</span></li>`;
    })
    .join("");
  return `<ul class='store-opening-hours-list'>${daysHoursHTMLTable}</ul>`;
}

function getHours(store) {
  return `<li id='store-hours'><span class='marker-image'></span>${getFullSchedule(store)}</li>`;
}

function getOpeningLabel({ properties }) {
  if (!properties.open) {
    return "";
  }

  let openLabel;

  if (properties.open.open_now) {
    openLabel = `Open now until ${properties.open.current_slice?.end}`;
  } else {
    // @ts-ignore - TODO next_opening is wrongly spelled `nextOpening` in @types/woosmap.map
    openLabel = `Closed until ${convertTime(Date.parse(properties.open.next_opening?.day || "") / 1000)} at ${properties.open.next_opening?.start}`;
  }
  return `<p class='summary-hours'>${openLabel}</p>`;
}

function convertTime(UNIX_timestamp) {
  const date = new Date(UNIX_timestamp * 1000);
  return date.toLocaleString("en-US", {
    month: "short",
    day: "numeric",
    year: "numeric",
  });
}

function createDetailedStoreCard(store) {
  const myCustomContent = document.createElement("ul");

  myCustomContent.id = "myCustomContentID";
  myCustomContent.innerHTML = [
    getWebSite(store),
    getAddress(store),
    getHours(store),
    getPhone(store),
  ].join("");
  return myCustomContent;
}

function createSummaryStoreCard(store) {
  const mySummaryContent = document.createElement("div");

  mySummaryContent.className = "store-summary";
  mySummaryContent.innerHTML = [
    `<p class='store-name'>${store.properties.name}</p>`,
    getSummaryAddress(store),
    getSummaryPhone(store),
    getOpeningLabel(store),
    getDistanceAndTime(store),
  ].join("");
  return mySummaryContent;
}

function isMobileDevice() {
  return window.innerWidth < 500;
}

function initStoreLocator() {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  webapp.setFullStoreRenderer(createDetailedStoreCard);
  webapp.setSummaryStoreRenderer(createSummaryStoreCard);
  webapp.setConf(configLocator);
  webapp.setInitialStateToSelectedStore("12003");
  webapp.render(isMobileDevice());
}

initStoreLocator();

    
        /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
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;
}

#myCustomContentID {
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  position: absolute;
  padding: 0;
}
#myCustomContentID > li {
  display: flex;
  align-items: flex-start;
  list-style: none;
  min-height: 32px;
  line-height: 24px;
  padding-bottom: 10px;
  padding-left: 5px;
}
#myCustomContentID p {
  margin: 0;
}

.marker-image {
  height: 24px;
  width: 24px;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  flex: 0 0 20px;
  margin-right: 10px;
}

#store-hours .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='m612-292 56-56-148-148v-184h-80v216l172 172ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-400Zm0 320q133 0 226.5-93.5T800-480q0-133-93.5-226.5T480-800q-133 0-226.5 93.5T160-480q0 133 93.5 226.5T480-160Z'/%3E%3C/svg%3E");
}

#store-address .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M0 0h24v24H0V0z%27 fill=%27none%27/%3E%3Cpath d=%27M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zM7 9c0-2.76 2.24-5 5-5s5 2.24 5 5c0 2.88-2.88 7.19-5 9.88C9.92 16.21 7 11.85 7 9z%27/%3E%3Ccircle cx=%2712%27 cy=%279%27 r=%272.5%27/%3E%3C/svg%3E");
}

#store-website .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M0 0h24v24H0V0z%27 fill=%27none%27/%3E%3Cpath d=%27M17 7h-4v2h4c1.65 0 3 1.35 3 3s-1.35 3-3 3h-4v2h4c2.76 0 5-2.24 5-5s-2.24-5-5-5zm-6 8H7c-1.65 0-3-1.35-3-3s1.35-3 3-3h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-2zm-3-4h8v2H8z%27/%3E%3C/svg%3E");
}

#store-phone .marker-image {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 height=%2724%27 viewBox=%270 0 24 24%27 width=%2724%27%3E%3Cpath d=%27M0 0h24v24H0V0z%27 fill=%27none%27/%3E%3Cpath d=%27M6.54 5c.06.89.21 1.76.45 2.59l-1.2 1.2c-.41-1.2-.67-2.47-.76-3.79h1.51m9.86 12.02c.85.24 1.72.39 2.6.45v1.49c-1.32-.09-2.59-.35-3.8-.75l1.2-1.19M7.5 3H4c-.55 0-1 .45-1 1 0 9.39 7.61 17 17 17 .55 0 1-.45 1-1v-3.49c0-.55-.45-1-1-1-1.24 0-2.45-.2-3.57-.57-.1-.04-.21-.05-.31-.05-.26 0-.51.1-.71.29l-2.2 2.2c-2.83-1.45-5.15-3.76-6.59-6.59l2.2-2.2c.28-.28.36-.67.25-1.02C8.7 6.45 8.5 5.25 8.5 4c0-.55-.45-1-1-1z%27/%3E%3C/svg%3E");
}

.summary-address {
  opacity: 0.6;
}

.store-summary p {
  margin: 0;
}

.store-name {
  font-size: 1rem !important;
  margin-right: 20px;
}

.text-black {
  color: black;
  text-decoration: none;
}

.text-black:hover {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.store-opening-hours-list {
  display: flex;
  flex-direction: column;
  padding: 0;
  list-style: none;
  width: 100%;
}
.store-opening-hours-list > li {
  flex: 1;
  line-height: 24px;
  display: flex;
  padding-bottom: 5px;
  justify-content: space-between;
  max-width: 245px;
}

.padding-right {
  padding-right: 15px !important;
}


    
        <html>
  <head>
    <title>Store Locator Widget - Custom Renderer</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <script src="https://webapp.woosmap.com/webapp.js"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

Custom Filters

You are also able to change the default filters block by applying your own style and creating filters based on search query.

Custom filter based on Search Query

Filtering capabilities of your Store Locator can be based on 3 different properties:

As well as default filters (types and tags), add to your Filters configuration object a new filter like this (sample using the country code of your store data):

JavaScript
        const storeLocatorConfig = {
    filters: {
        filters: [{
            propertyType: "custom",
            title: {en: "Country"},
            choices: [{
                key: "country:=\"US\"",
                en: "United States",
            }]
        }]
    }
}

You can add multiple filter groups of the same type (type, tag, custom) and override the default sort order (type->tag->custom) for rendering the filters by enabling the 'customOrder': true configuration option. When this configuration is added, the filter groups will be rendered in the order defined in the filters array.

JavaScript
        const storeLocatorConfig = {
    filters: {
        filters: [{
            propertyType: "custom",
            title: {en: "Country"},
            choices: [{
                key: "country:=\"US\"",
                en: "United States",
            }]
        },
        {
            propertyType: "custom",
            title: {en: "Region"},
            choices: [
            {
              key: 'user.region:="Northeast"',
              en: "Northeast"
            },
            {
              key: 'user.region:="Southwest"',
              en: "Southwest",
            }
          ]
        }
      ]
    }
}

Custom Filters Renderer

To define your own content and style for the filters panel, use the setFilterPanelRenderer in combination with setFilterRenderer.

JavaScript
        webapp.setFilterPanelRenderer(function (title, children) {
  const divPanel = document.createElement('div')
  divPanel.className = "filters-panel"
  divPanel.innerHTML = "<div class='filter-group'>"+title+"</div>";
  children.forEach(item => div.appendChild(item));
  return divPanel;
});
webapp.setFilterRenderer(function (key, label, selected) {
  const divFilterItem = document.createElement('div');
  divFilterItem.className = selected ? "active": '';
  divFilterItem.innerHTML = "<button>" +
      "<div class='icon-service icon-"+className+"'></div>" +
      "<div class='flex-grow'>"+label+"</div>" +
      "<div class='active-icon-wrapper'>" +
      "</div></button>"
  return divFilterItem;
});

Example of Custom Filters

Store Locator Widget Custom Filters
        const availableServices = [
  { key: "WF", en: "Wireless Hotspot" },
  { key: "CD", en: "Mobile Payment" },
  { key: "DT", en: "Drive-Thru" },
  { key: "DR", en: "Digital Rewards" },
  { key: "hrs24", en: "Open 24 hours per day" },
  { key: "WA", en: "Oven-warmed Food" },
  { key: "LB", en: "LaBoulange" },
  { key: "XO", en: "Mobile Order and Pay" },
  { key: "VS", en: "Verismo" },
  { key: "NB", en: "Nitro Cold Brew" },
  { key: "CL", en: "Starbucks Reserve-Clover Brewed" },
];

const storeLocatorConfig = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
      componentRestrictions: { country: "gb" },
    },
  },
  filters: {
    filters: [
      {
        propertyType: "tag",
        title: {
          en: "Amenities",
        },
        choices: availableServices,
        innerOperator: "or",
      },
      {
        propertyType: "custom",
        title: {
          en: "Country",
        },
        choices: [
          {
            key: 'country:="US"',
            en: "United States",
          },
          {
            key: 'country:="GB"',
            en: "United Kingdom",
          },
          {
            key: 'country:="DE"',
            en: "Germany",
          },
          {
            key: 'country:="FR"',
            en: "France",
          },
        ],
        innerOperator: "or",
      },
    ],
    outerOperator: "and",
  },
  theme: {
    primary_color: "#008248",
  },
  woosmapview: {
    initialCenter: {
      lat: 54,
      lng: -3,
    },
    initialZoom: 7,
    breakPoint: 11,
    style: {
      default: {
        icon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        numberedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        selectedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker-selected.svg",
          scaledSize: {
            height: 71,
            width: 61,
          },
        },
      },
    },
    tileStyle: {
      color: "#008248",
      size: 15,
      minSize: 6,
    },
  },
};

function isMobileDevice(): boolean {
  return window.innerWidth < 500;
}

function createDiv(className = "", innerHTML = ""): HTMLDivElement {
  const div = document.createElement("div");
  div.className = className;
  div.innerHTML = innerHTML;
  return div;
}

function filterPanelRenderer(
  title: string,
  children: HTMLElement[],
): HTMLDivElement {
  const div = createDiv(
    "filters-list",
    `<div class='filter-group'>${title}</div>`,
  );
  children.forEach((item: HTMLElement) => {
    div.appendChild(item);
  });
  return div;
}

function filterRenderer(
  key: string,
  label: string,
  selected: boolean,
): HTMLDivElement {
  const className = key.startsWith("country")
    ? `${key.split("=").pop()?.replace(/[",]+/g, "")} country`
    : key;
  return createDiv(
    selected ? "active" : "",
    `<button><div class='icon-service icon-${className}'></div><div class='flex-grow'>${label}</div><div class='active-icon-wrapper'></div></button>`,
  );
}

function initStoreLocator(): void {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  webapp.setConf(storeLocatorConfig);
  webapp.setFilterPanelRenderer(filterPanelRenderer);
  webapp.setFilterRenderer(filterRenderer);

  webapp.render(isMobileDevice());
}

initStoreLocator();

declare global {
  // currently, the WebApp typings are not exported, so we use `any` here
  interface Window {
    WebApp: new (elementId: string, projectKey: string) => any;
  }
}

    
        const availableServices = [
  { key: "WF", en: "Wireless Hotspot" },
  { key: "CD", en: "Mobile Payment" },
  { key: "DT", en: "Drive-Thru" },
  { key: "DR", en: "Digital Rewards" },
  { key: "hrs24", en: "Open 24 hours per day" },
  { key: "WA", en: "Oven-warmed Food" },
  { key: "LB", en: "LaBoulange" },
  { key: "XO", en: "Mobile Order and Pay" },
  { key: "VS", en: "Verismo" },
  { key: "NB", en: "Nitro Cold Brew" },
  { key: "CL", en: "Starbucks Reserve-Clover Brewed" },
];
const storeLocatorConfig = {
  maps: {
    provider: "woosmap",
    localities: {
      types: [],
      componentRestrictions: { country: "gb" },
    },
  },
  filters: {
    filters: [
      {
        propertyType: "tag",
        title: {
          en: "Amenities",
        },
        choices: availableServices,
        innerOperator: "or",
      },
      {
        propertyType: "custom",
        title: {
          en: "Country",
        },
        choices: [
          {
            key: 'country:="US"',
            en: "United States",
          },
          {
            key: 'country:="GB"',
            en: "United Kingdom",
          },
          {
            key: 'country:="DE"',
            en: "Germany",
          },
          {
            key: 'country:="FR"',
            en: "France",
          },
        ],
        innerOperator: "or",
      },
    ],
    outerOperator: "and",
  },
  theme: {
    primary_color: "#008248",
  },
  woosmapview: {
    initialCenter: {
      lat: 54,
      lng: -3,
    },
    initialZoom: 7,
    breakPoint: 11,
    style: {
      default: {
        icon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        numberedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker.svg",
          scaledSize: {
            height: 47,
            width: 40,
          },
        },
        selectedIcon: {
          url: "https://demo.woosmap.com/storelocator/images/markers/starbucks-marker-selected.svg",
          scaledSize: {
            height: 71,
            width: 61,
          },
        },
      },
    },
    tileStyle: {
      color: "#008248",
      size: 15,
      minSize: 6,
    },
  },
};

function isMobileDevice() {
  return window.innerWidth < 500;
}

function createDiv(className = "", innerHTML = "") {
  const div = document.createElement("div");

  div.className = className;
  div.innerHTML = innerHTML;
  return div;
}

function filterPanelRenderer(title, children) {
  const div = createDiv(
    "filters-list",
    `<div class='filter-group'>${title}</div>`,
  );

  children.forEach((item) => {
    div.appendChild(item);
  });
  return div;
}

function filterRenderer(key, label, selected) {
  const className = key.startsWith("country")
    ? `${key.split("=").pop()?.replace(/[",]+/g, "")} country`
    : key;
  return createDiv(
    selected ? "active" : "",
    `<button><div class='icon-service icon-${className}'></div><div class='flex-grow'>${label}</div><div class='active-icon-wrapper'></div></button>`,
  );
}

function initStoreLocator() {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  webapp.setConf(storeLocatorConfig);
  webapp.setFilterPanelRenderer(filterPanelRenderer);
  webapp.setFilterRenderer(filterRenderer);
  webapp.render(isMobileDevice());
}

initStoreLocator();

    
        /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
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;
}

button {
  color: #1d1d1d;
  margin: 6px 0;
  align-items: center;
  border-radius: 32px;
  cursor: pointer;
  display: flex;
  height: 32px;
  padding: 0 12px;
  border: 1px solid #dadce0;
  font: inherit;
  list-style: none;
  outline: 0;
  overflow: visible;
  vertical-align: baseline;
  background: #fff;
}

.filter-group {
  padding: 0.8rem 10px;
  font-size: 0.8rem;
  background: #008248;
  text-transform: uppercase;
  color: white;
}

.title-filters {
  font-size: 1.1rem;
}

.filters-list button {
  position: relative;
  text-align: left;
  width: 100%;
  border-radius: 0;
  padding: 1.5rem 10px;
  margin: 0;
  border: none;
}

.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862' %3E%3C/path%3E%3C/svg%3E");
}

.active button {
  background: rgba(0, 168, 98, 0.15);
}

.active .active-icon-wrapper {
  display: block;
}

.flex-grow {
  flex-grow: 1;
}

.active-icon-wrapper {
  width: 21px;
  height: 21px;
  display: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' focusable='false' style='width: 21px;height: 21px;'%3E%3Cpath d='M4.29 12.104c-.277-.308-.75-.332-1.06-.054-.306.278-.33.752-.053 1.06l4.485 4.963c.29.322.795.33 1.096.017L20.414 6.003c.288-.298.28-.773-.02-1.06-.297-.288-.772-.28-1.06.02L8.237 16.47 4.29 12.105z' fill='%2300a862' %3E%3C/path%3E%3C/svg%3E");
}

.icon-service {
  width: 28px;
  height: 28px;
  margin-right: 12px;
  vertical-align: middle;
  position: relative;
}

.icon-WF {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M8.874 18.09c1.727-1.726 4.53-1.726 6.257 0 .196.197.512.197.708 0 .195-.194.195-.51 0-.706-2.12-2.118-5.553-2.118-7.672 0-.195.196-.195.512 0 .707.196.197.512.197.708 0zM5.234 14.447c3.74-3.74 9.804-3.74 13.544 0 .195.196.512.196.707 0 .195-.195.195-.51 0-.707-4.13-4.13-10.827-4.13-14.96 0-.194.196-.194.512 0 .707.197.196.513.196.71 0z'%3E%3C/path%3E%3Cpath d='M1.594 10.81c5.748-5.747 15.068-5.747 20.816 0 .195.197.512.197.707 0 .196-.194.196-.51 0-.706-6.138-6.14-16.09-6.14-22.23 0-.196.196-.196.512 0 .707.195.197.51.197.707 0z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-CD {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M18.9,9.5c0,0.8-0.6,1.4-1.4,1.4S16,10.3,16,9.5s0.6-1.4,1.4-1.4S18.9,8.7,18.9,9.5z M20,7.9v8.6 c0,0.5-0.4,0.9-0.9,0.9H5C4.5,17.4,4,17,4,16.5V7.9C4,7.4,4.5,7,5,7H19C19.5,7,20,7.4,20,7.9z M15,10.3H4.5v3.9H15V10.3z M19.4,7.9 c0-0.2-0.2-0.4-0.5-0.4h-3.4v9.4h3.4c0.3,0,0.5-0.2,0.5-0.4V7.9z M12.3,13.6h0.5v-1.7h-0.1v-0.5v-0.6h-0.5v0.6V12h0.1V13.6z M11.7,10.8h-0.5v1.7h0.5V10.8z M10.6,11.4h0.5v-0.6h-0.5h-0.5v1.1h0.5V11.4z M14.4,10.8h-1.1v2.8h1.1V10.8z M6.2,10.8H5.1v2.8h1.1 V10.8z M7.3,13H6.8v0.6h0.5V13z M12.2,13.1v-0.6h-0.5v0.6H12.2z M10.5,13.6V13H10v0.6H10.5z M11.1,12.5h-0.5v0.6h0.5v0.5h0.5V13 h-0.5V12.5z M10,11.9H9.5V13H10V11.9z M8.4,11.9v0.6H7.8v0.6h0.6v0.5h0.5h0.5V13H8.9v-0.5V12h0.5v-0.6H8.9v0.5H8.4z M7.8,12h0.5 v-0.6h0.6v-0.6H7.8H7.3v1.7h0.5V12z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-DT {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M7.23 15.46c-.618 0-1.12-.503-1.12-1.12 0-.617.502-1.12 1.12-1.12.618 0 1.12.503 1.12 1.12 0 .617-.502 1.12-1.12 1.12M12.9 13H8.86c-.39-.472-.972-.78-1.63-.78-1.17 0-2.12.95-2.12 2.12 0 1.17.95 2.12 2.12 2.12 1.17 0 2.12-.95 2.12-2.12 0-.117-.016-.23-.034-.34H12.9c.276 0 .5-.224.5-.5s-.224-.5-.5-.5'%3E%3C/path%3E%3Cpath d='M15.687 15.46c-.618 0-1.12-.503-1.12-1.12 0-.617.502-1.12 1.12-1.12.618 0 1.12.503 1.12 1.12 0 .617-.502 1.12-1.12 1.12m4.995-2.18l-.11-.72c-.105-.31-.226-.57-.42-.747l-.6-.886c-.19-.19-.388-.388-.727-.414l-2.618-.715-.1-.063C14.482 8.3 12.5 7.54 10.378 7.54h-1.89c-.086 0-.167 0-1.648.47l-1.37.536-.86.428c-.342.228-.604.576-.752 1.034l-.45 2.164c-.13.64.21 1.305.86 1.697.236.14.544.065.687-.172.143-.236.066-.544-.17-.686-.286-.17-.442-.425-.4-.64l.437-2.104c.032-.098.082-.19.135-.265l9.55 1.947c.034.007.067.01.1.01.233 0 .44-.163.49-.4.055-.27-.12-.535-.39-.59L6.412 9.278l.76-.326c.592-.187 1.273-.394 1.315-.412h1.89c1.875 0 3.627.673 5.047 1.925.144.142.393.287.624.32l2.646.708c.026.016.093.086.087.065l.604.885c.108.108.163.21.218.347l.095.657c.04.208-.095.426-.325.52-.035.013-.068.03-.098.05-.026.003-.06.003-.077.003h-1.422c-.156-1.017-1.03-1.8-2.088-1.8-1.17 0-2.12.95-2.12 2.12 0 1.17.95 2.12 2.12 2.12.93 0 1.713-.606 1.998-1.44h1.512c.125 0 .395 0 .62-.158.63-.29.992-.954.865-1.583'%3E%3C/path%3E%3C/svg%3E");
}

.icon-WA {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M13.0855488,13.9416667 C16.8673874,6.98142857 9.99511648,4.125 9.99511648,4.125 C10.9658715,5.29045238 10.8404945,7.46414286 7.95829063,10.325 C2.99086977,16.6327619 11.5326341,19.625 11.5326341,19.625 C10.5428159,16.6888571 12.3464846,15.13 13.0855488,13.9416667 L13.0855488,13.9416667 Z M13.037488,19.6563859 C13.0298004,19.6278299 13.0198064,19.5946432 13.0098125,19.5606846 C12.9882871,19.6409502 13.037488,19.6563859 13.037488,19.6563859 L13.037488,19.6563859 Z M15.6535868,9.78475104 C16.0366632,10.485147 15.2609518,13.5405607 14.1109872,14.875895 C12.2779555,17.1298172 12.8610258,18.7226179 13.056608,19.3677386 C13.0985184,19.2091858 13.4374786,18.7786205 15.1440437,17.6287493 C19.3799426,14.704978 15.6535868,9.78475104 15.6535868,9.78475104 L15.6535868,9.78475104 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-DR {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M14.45 5.517c.09-.26.237-.256.326 0l.263.75.8.017c.276.006.32.146.102.31l-.64.48.233.762c.08.262-.04.346-.265.192l-.658-.455-.66.455c-.225.156-.343.067-.264-.192l.232-.762-.638-.48c-.22-.166-.17-.305.102-.31l.802-.016.263-.75z'%3E%3C/path%3E%3Cpath d='M13.6 16.6c0-.884-.716-1.6-1.6-1.6-.884 0-1.6.716-1.6 1.6 0 .884.716 1.6 1.6 1.6.884 0 1.6-.716 1.6-1.6zm1 0c0 1.436-1.164 2.6-2.6 2.6-1.436 0-2.6-1.164-2.6-2.6 0-1.436 1.164-2.6 2.6-2.6 1.436 0 2.6 1.164 2.6 2.6z'%3E%3C/path%3E%3Cpath d='M8.598 12.7l.644 8.628c.005.094.083.167.176.167h5.17c.093 0 .17-.073.176-.174l.643-8.62h-6.81zm7.812 0l-.648 8.688c-.037.622-.552 1.107-1.175 1.107h-5.17c-.62 0-1.136-.485-1.173-1.1L7.596 12.7H7.25c-.298 0-.53-.258-.497-.554l.177-1.598c.122-.527.458-1.048.983-1.048h8.18c.525 0 .86.522.992 1.106l.168 1.54c.032.296-.2.554-.497.554h-.346zm-.21-1l-.1-.927c-.016-.07-.062-.18-.112-.26-.005-.006-.007-.01-.004-.013H8.022c.002.002 0 .007-.005.014-.05.078-.096.188-.103.2l-.107.986H16.2z'%3E%3C/path%3E%3Cpath d='M16.547 1.39c.183-.522.48-.518.663 0l.262.75.798.015c.557.01.645.294.204.626l-.636.48.23.76c.163.53-.08.7-.535.386l-.655-.452-.656.452c-.46.316-.698.14-.538-.387l.232-.76-.636-.48c-.444-.334-.347-.614.196-.625l.81-.016.26-.75z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-XO {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M19.14 14.65c0 1.43-1.17 2.59-2.613 2.59-1.445 0-2.615-1.16-2.615-2.59 0-1.432 1.17-2.593 2.615-2.593 1.444 0 2.614 1.16 2.614 2.592m1 0c0-1.986-1.618-3.593-3.613-3.593-1.996 0-3.615 1.607-3.615 3.592 0 1.984 1.62 3.59 3.615 3.59s3.614-1.606 3.614-3.59'%3E%3C/path%3E%3Cpath d='M21.823 8.325h-11.29l.124-.682c.047-.197.234-.486.186-.486h11.18c-.048 0 .14.29.19.51l.12.658h-.51zM20.39 22.04c-.013.226-.198.4-.424.4H12.9c-.226 0-.41-.174-.425-.395l-.896-12.72h9.707L20.39 22.04zm2.803-14.574c-.154-.664-.572-1.31-1.17-1.31h-11.18c-.598 0-1.016.646-1.165 1.285l-.234 1.296c-.056.307.18.59.492.59h.64l.9 12.785c.046.745.67 1.33 1.424 1.33h7.066c.753 0 1.378-.585 1.423-1.334l.9-12.78h.64c.312 0 .547-.283.492-.59l-.23-1.27z'%3E%3C/path%3E%3Cpath d='M10.615 20.338h-7.2c-.384 0-.694-.308-.694-.685V2.283c0-.377.31-.685.695-.685h9.103c.384 0 .694.308.694.685v2.523c0 .276.223.5.5.5.276 0 .5-.224.5-.5V2.283c0-.93-.76-1.685-1.694-1.685H3.415c-.935 0-1.694.754-1.694 1.685v17.37c0 .93.76 1.685 1.695 1.685h7.2c.276 0 .5-.224.5-.5s-.224-.5-.5-.5'%3E%3C/path%3E%3Cpath d='M4.31 15.345V3.415l7.493.002V4.83c0 .277.224.5.5.5s.5-.223.5-.5V2.917c0-.277-.224-.5-.5-.5H3.81c-.277 0-.5.223-.5.5v12.928c0 .275.223.5.5.5h6.435c.276 0 .5-.224.5-.5 0-.277-.224-.5-.5-.5H4.31zM8.482 18.426c0 .315-.26.572-.58.572-.322 0-.58-.257-.58-.572 0-.315.258-.572.58-.572.32 0 .58.257.58.572m1 0c0-.87-.708-1.572-1.58-1.572-.873 0-1.58.703-1.58 1.572 0 .87.707 1.572 1.58 1.572.872 0 1.58-.703 1.58-1.572'%3E%3C/path%3E%3C/svg%3E");
}

.icon-NB {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M12.2117247,15.2225464 C10.8125947,15.2225464 9.67870268,14.1212139 9.67870268,12.7629135 C9.67870268,11.4043205 10.8125947,10.3029879 12.2117247,10.3029879 C13.6108547,10.3029879 14.7447467,11.4043205 14.7447467,12.7629135 C14.7447467,14.1212139 13.6108547,15.2225464 12.2117247,15.2225464 M18.7160816,5.39689239 C18.7151774,5.38020996 18.7136703,5.36382022 18.7109577,5.34743047 C18.7085464,5.33367479 18.7052309,5.32021178 18.7016141,5.30674877 C18.6973944,5.29152972 18.6928733,5.27660334 18.687448,5.26196964 C18.6820226,5.2487993 18.6762959,5.23592165 18.6699664,5.22333666 C18.663034,5.20987365 18.6558002,5.19670332 18.6476623,5.18382566 C18.6401271,5.17153335 18.6316877,5.16011906 18.6226455,5.14870477 C18.6136033,5.13699781 18.6039583,5.12558352 18.5937105,5.1144619 C18.583764,5.10421831 18.5732148,5.09456007 18.5623642,5.08490182 C18.5509107,5.0749509 18.5394573,5.06529266 18.5270996,5.05651244 C18.5150433,5.04802489 18.502987,5.04041536 18.4900266,5.03309851 C18.4770661,5.02548899 18.4638042,5.01817213 18.4499395,5.0117333 C18.4360748,5.00558715 18.4219086,5.00002634 18.4074411,4.99505088 C18.3929736,4.99007542 18.3788075,4.98568531 18.3640385,4.98217322 C18.3486668,4.97836846 18.3326923,4.97573439 18.3167177,4.973393 C18.3073741,4.9722223 18.2989347,4.96929556 18.2895911,4.96841754 C18.2832616,4.96812487 18.2772334,4.96929556 18.2712053,4.96900289 C18.2639715,4.96871021 18.2573406,4.96695417 18.2504082,4.96695417 L5.96868744,4.96695417 C5.96115227,4.96695417 5.95421992,4.96871021 5.94698616,4.96900289 C5.94035521,4.96929556 5.93402567,4.96841754 5.92739472,4.96871021 C5.91865393,4.96958824 5.91081735,4.9722223 5.90237796,4.973393 C5.88549919,4.97573439 5.86922322,4.97866113 5.85294726,4.9824659 C5.83878115,4.98597799 5.82491644,4.9903681 5.81135314,4.99505088 C5.7962828,5.00031901 5.78181528,5.00587982 5.76734776,5.01261133 C5.75408586,5.01875748 5.74112537,5.02578166 5.72846629,5.03309851 C5.7155058,5.04070804 5.70284672,5.04890291 5.69048904,5.05768313 C5.67843277,5.06617068 5.66728073,5.07524358 5.65643008,5.08490182 C5.64497663,5.09485274 5.63412599,5.10509633 5.62387816,5.11592527 C5.61393174,5.12646154 5.60488954,5.13729048 5.59614874,5.14870477 C5.58680513,5.16070441 5.57806434,5.17270405 5.56992636,5.1855817 C5.56239119,5.19758134 5.55576024,5.21016633 5.54912929,5.22275131 C5.54249835,5.23650699 5.53616881,5.24997 5.53074348,5.26431103 C5.52561957,5.27777404 5.52139988,5.29182239 5.51748159,5.30587075 C5.5135633,5.32050445 5.50994642,5.33484548 5.50753517,5.35006453 C5.50512391,5.36499091 5.50391829,5.37991729 5.50301407,5.39542902 C5.50241125,5.40420924 5.5,5.41269679 5.5,5.42176968 C5.5,5.42908653 5.50180844,5.43552536 5.50241125,5.44254954 C5.50271266,5.44898837 5.50150703,5.4554272 5.50210985,5.46186603 L5.61121908,6.66065904 C5.63261895,6.8971397 5.83697271,7.07537821 6.07689245,7.07537821 C6.09075716,7.07537821 6.10492327,7.07479286 6.11878798,7.07362216 C6.37649072,7.05167161 6.56697977,6.83070268 6.54407286,6.58046635 L6.48017463,5.8765852 L17.7410309,5.8765852 L17.6126316,7.36424752 L9.92374634,7.36424752 C9.39507896,8.23787963 10.7625612,10.584833 8.8983607,10.584833 C7.03416017,10.584833 8.15207768,8.23787963 7.8612202,7.36424752 L6.12089783,7.36424752 C5.98194934,7.36424752 5.85053601,7.42424571 5.76131962,7.52785233 C5.67240464,7.63116628 5.63533161,7.76784507 5.66004697,7.90042643 L5.76252525,8.44919032 L6.81624312,20.6569187 C6.86265975,21.4102617 7.50797153,22 8.28499804,22 L15.9395229,22 C16.7165495,22 17.3612584,21.4102617 17.4073736,20.6680403 L18.5129335,7.85740334 C18.5135363,7.84891579 18.5120292,7.84101359 18.5123307,7.83252604 L18.7169858,5.45981731 C18.7175886,5.45308581 18.716383,5.44635431 18.7166844,5.4396228 C18.7169858,5.43347665 18.7184928,5.42791584 18.7184928,5.42176968 C18.7184928,5.41328213 18.716383,5.40537993 18.7160816,5.39689239 Z M5.82096801,4.59484835 C6.03888506,4.7286004 6.32823551,4.6653828 6.4668826,4.45407212 C6.47652761,4.43885307 7.47147117,2.94621529 8.99206805,2.94621529 C9.77421847,2.94621529 10.0840646,3.16103806 10.44304,3.41010369 C10.8381842,3.68404663 11.286376,3.9948665 12.2116946,3.9948665 C13.0670868,3.9948665 13.4902618,3.69487557 13.8637048,3.43029821 C14.2416688,3.16250143 14.5985343,2.90963103 15.5856413,2.90963103 C17.3235524,2.90963103 17.8877858,4.30246695 17.9134054,4.36831862 C17.9830303,4.55182526 18.1620659,4.66596815 18.3528564,4.66596815 C18.4059039,4.66596815 18.4598557,4.65689525 18.5129033,4.63816411 C18.7561385,4.55241061 18.8815237,4.29163801 18.7932116,4.05545003 C18.7615639,3.97174524 17.9959908,2 15.5856413,2 C14.2932093,2 13.7488688,2.38545176 13.3115277,2.6953936 C12.9802817,2.93011821 12.7614604,3.0849428 12.2116946,3.0849428 C11.586577,3.0849428 11.3352038,2.91080172 10.9873805,2.66963828 C10.5804814,2.38750048 10.0741181,2.03658426 8.99206805,2.03658426 C6.94853053,2.03658426 5.72542208,3.8897965 5.67418294,3.9688185 C5.53704289,4.18100721 5.60274955,4.46080362 5.82096801,4.59484835 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-hrs24 {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M20.947 19.25c0 2.068-1.68 3.75-3.748 3.75l-10.786.004c-2.067 0-3.75-1.68-3.75-3.748l-.002-7.666c0-2.066 1.68-3.748 3.747-3.75l10.785-.002c2.067 0 3.75 1.68 3.75 3.747l.002 7.666zM14.61 1.01c.305 0 .555.25.555.555 0 .307-.25.557-.556.557-.308 0-.558-.25-.558-.556 0-.307.25-.557.557-.557zm4.07 6.09c-.03-.056-.07-.107-.12-.15l-4.733-3.895.098-.098c.207.102.438.165.684.165.858 0 1.556-.7 1.555-1.557 0-.858-.698-1.557-1.557-1.556-.858 0-1.556.697-1.556 1.556 0 .246.063.477.166.684l-1.703 1.704c-.195.195-.195.512 0 .707.098.1.226.147.354.147.126 0 .254-.05.352-.146l.895-.894 3.73 3.072-10.09.003 5.362-4.42c.212-.175.242-.49.066-.704-.177-.21-.49-.243-.704-.067L5.045 6.954c-.05.042-.09.093-.12.148-1.89.627-3.264 2.39-3.263 4.488l.002 7.667c0 2.618 2.132 4.748 4.75 4.747L17.2 24c2.618 0 4.748-2.13 4.747-4.75l-.002-7.665c0-2.097-1.377-3.86-3.266-4.486z'%3E%3C/path%3E%3Cpath d='M10.71 19.48H7.372l2.638-3.703c1.237-1.502 1.355-3.59.24-4.9-.72-.82-1.796-1.085-2.81-.697-1.14.438-1.87 1.533-1.855 2.79l.007.638c.003.275.227.495.5.495h.005c.276-.002.498-.23.495-.505l-.007-.64c-.01-1.014.646-1.626 1.212-1.844.623-.24 1.26-.082 1.728.45.757.893.63 2.463-.308 3.605l-3.223 4.52c-.108.153-.123.354-.037.52.086.166.257.27.445.27h4.308c.277 0 .5-.224.5-.5 0-.277-.224-.5-.5-.5M15.607 17.125h-2.62l2.62-4.7v4.7zm2.198-.002l-1.197.002-.003-6.623c0-.228-.154-.427-.373-.485-.223-.056-.45.043-.563.242l-3.972 7.123c-.087.154-.084.344.006.495.09.154.253.247.43.247h3.473l.002 1.854c-.002.274.223.497.498.497.276 0 .5-.223.5-.5v-1.852l1.197-.002c.276 0 .5-.223.5-.5 0-.276-.224-.5-.5-.5z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-CL {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M3.23090951,11.311021 L20.5802026,11.311021 L20.5802026,12.2564529 L3.23090951,12.2564529 L3.23090951,11.311021 Z M11.8109044,7.09288379 L9.40506834,8.67561832 L10.2148873,5.96913845 L7.91817991,4.24084231 L10.8245116,4.15088028 L11.8109044,1.5 L12.7972971,4.15088028 L15.7036288,4.24084231 L13.4069214,5.96913845 L14.2167404,8.67561832 L11.8109044,7.09288379 Z M9.21349903,22.0059765 L10.4329217,22.0059765 L10.4329217,19.6718073 L11.9398505,19.6718073 L11.9596785,19.6718073 L13.6648875,22.0059765 L15.1024183,22.0059765 L13.2286712,19.4709157 C14.2002438,19.2030602 14.8843102,18.5429878 14.8843102,17.4428671 L14.8843102,17.4237346 C14.8843102,16.8401923 14.676116,16.3427464 14.3092978,15.9792283 C13.8631676,15.5583125 13.1791012,15.3095896 12.3066687,15.3095896 L9.21349903,15.3095896 L9.21349903,22.0059765 Z M10.4329217,18.6290842 L10.4329217,16.3810115 L12.2075287,16.3810115 C13.1097032,16.3810115 13.6450595,16.7732284 13.6450595,17.4906985 L13.6450595,17.509831 C13.6450595,18.189036 13.0898752,18.6290842 12.2174427,18.6290842 L10.4329217,18.6290842 Z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-isOpen {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='width: 24px; height: 24px;'%3E%3Cpath d='M20.94 19.25c0 2.067-1.68 3.75-3.747 3.75H6.407C4.34 23 2.66 21.316 2.66 19.25v-7.666c0-2.066 1.68-3.748 3.747-3.748h10.786c2.066 0 3.748 1.682 3.748 3.748v7.666zM14.61 1.006c.307 0 .557.25.557.557 0 .306-.25.556-.557.556-.307 0-.557-.25-.557-.557 0-.307.25-.557.558-.557zm4.068 6.09c-.03-.054-.07-.105-.12-.147l-4.73-3.898.098-.098c.207.102.437.165.684.165.858 0 1.557-.7 1.557-1.557 0-.86-.7-1.557-1.557-1.557-.858 0-1.557.698-1.557 1.557 0 .246.064.476.167.684L11.513 3.95c-.195.196-.195.512 0 .707.098.098.226.147.354.147.128 0 .256-.05.353-.147l.895-.895 3.73 3.074H6.756l5.364-4.42c.212-.175.242-.49.066-.703-.177-.212-.49-.243-.704-.067L5.044 6.95c-.05.04-.09.092-.12.147-1.89.626-3.265 2.39-3.265 4.487v7.666c0 2.618 2.13 4.75 4.747 4.75h10.786c2.618 0 4.748-2.132 4.748-4.75v-7.666c0-2.097-1.375-3.86-3.264-4.487z'%3E%3C/path%3E%3Cpath d='M11.81 13.61c.954 0 1.73.777 1.73 1.73 0 .956-.776 1.732-1.73 1.732s-1.73-.776-1.73-1.73c0-.955.776-1.73 1.73-1.73m0 4.46c1.506 0 2.73-1.225 2.73-2.73 0-1.506-1.224-2.73-2.73-2.73s-2.73 1.224-2.73 2.73c0 1.505 1.224 2.73 2.73 2.73'%3E%3C/path%3E%3Cpath d='M14.498 20.668c-.005.086-.077.153-.163.153H9.273c-.086 0-.157-.065-.162-.157l-.63-9.022h6.65l-.632 9.028zm-6.696-10.33c.02-.085.07-.196.114-.26h7.777c.042.063.093.168.11.234l.057.33H7.747l.055-.304zm8.007-1.26H7.8c-.578 0-.89.675-.978 1.058l-.164.917c-.026.145.014.295.11.41.094.112.234.178.382.178h.327l.636 9.088c.036.613.545 1.093 1.16 1.093h5.062c.613 0 1.124-.478 1.16-1.087l.637-9.092h.326c.148 0 .288-.065.384-.178.094-.114.135-.264.108-.41l-.17-.94c-.08-.358-.39-1.035-.97-1.035z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-LB {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Cpath d='M11.1,14.9c0.2,0.2,0.3,0.5,0.3,0.9c0,0.2-0.1,0.6-0.2,1c-0.1,0.4-0.3,0.8-0.3,1c0,0.2,0.2,0.4,0.3,0.7l0,0.3 l-0.8-0.8c-0.5,0.6-1,0.8-1.9,0.8c-0.9,0-1.6-0.3-2.1-0.9c-0.2,0.4-0.5,0.9-0.9,0.9c-0.1,0-0.5,0-1.1,0H4.1v-1.3 c0.5,0,0.9-0.1,1.1-0.4c0.1-0.1,0.3-0.4,0.3-0.8v-3.5c-0.3,0-0.6-0.2-0.6-0.5c0-0.3,0.2-0.6,0.6-0.6v-3c0-0.4-0.1-0.6-0.3-0.8 C5,7.7,4.7,7.6,4.1,7.6V6.3h0.1c0.6,0,1,0.1,1.3,0.2C6,6.5,6.3,6.8,6.4,7.2c0.2-0.3,0.4-0.6,0.7-0.7c0.3-0.1,0.8-0.2,1.4-0.2h0.2 v1.3c-0.5,0-1,0.1-1.2,0.3C7.4,8,7.4,8.3,7.4,8.7v3c0.3,0,0.5,0.3,0.5,0.6c0,0.3-0.2,0.5-0.5,0.5v2.7c0,1.3,0.4,1.9,1.2,1.9 c0.4,0,0.7-0.2,0.9-0.4C9.2,16.6,9,16.2,9,15.8c0-0.4,0.1-0.7,0.3-0.9c0.2-0.2,0.5-0.4,0.9-0.4C10.6,14.5,10.9,14.7,11.1,14.9z M20,15c0,2.5-1.1,3.7-3.2,3.7c-1.1,0-1.8-0.3-2.2-0.9c-0.1,0.4-0.5,0.9-1,0.9c-0.1,0-0.5,0-1.1,0h-0.3v-1.4c0.5,0,1-0.1,1.2-0.3 c0.1-0.1,0.2-0.4,0.2-0.8v-3.5c-0.3,0-0.4-0.2-0.4-0.5c0-0.3,0.1-0.6,0.4-0.6l0-3c0-0.4,0-0.6-0.2-0.8c-0.2-0.2-0.7-0.3-1.2-0.4V6.3 h0.3c1.2,0,1.9,0.4,2.1,0.9c0.5-0.6,1.2-0.9,2.2-0.9c2.1,0,3.2,1.1,3.2,3.4c0,1.4-0.5,2.3-1.4,2.6C19.5,12.8,20,13.7,20,15z M15.4,11.7l1,0c1,0,1.5-0.7,1.5-2c0-0.3,0-0.5,0-0.8c0-0.3-0.1-0.5-0.1-0.7s-0.2-0.4-0.4-0.5c-0.2-0.1-0.3-0.1-0.6-0.1 C16,7.6,15.4,8,15.4,9V11.7z M18.1,15c0-1.4-0.7-2.2-1.8-2.2l-0.9,0l0,3.3c0,1,0.5,1.4,1.2,1.4C17.5,17.5,18.1,16.7,18.1,15z'%3E%3C/path%3E%3C/svg%3E");
}

.icon-VS {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden='true' focusable='false'%3E%3Cpath d='M4.843 5.279v-.196h1.997c1.924 0 2.511 1.196 2.511 1.196l5.361 9.386 2.579-5.424s.474-.993-.311-.993c-1.24 0-2.247-1.011-2.247-2.257 0-1.247 1.007-2.26 2.247-2.26h-.001c1.24 0 2.245 1.012 2.245 2.26h.001c0 .386-.219.895-.219.895-.171.419-.402.884-.473 1.028l-4.682 9.912-7.21-12.548s-.597-1-1.797-1'%3E%3C/path%3E%3C/svg%3E");
}

.country {
  background-size: contain;
}

.icon-GB {
  background-image: url("https://developers.woosmap.com/assets/images/countries/united_kingdom_2x.png");
}

.icon-FR {
  background-image: url("https://developers.woosmap.com/assets/images/countries/france_2x.png");
}

.icon-US {
  background-image: url("https://developers.woosmap.com/assets/images/countries/us_2x.png");
}

.icon-DE {
  background-image: url("https://developers.woosmap.com/assets/images/countries/germany_2x.png");
}


    
        <html>
  <head>
    <title>Store Locator Widget - Custom Filters</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <script src="https://webapp.woosmap.com/webapp.js"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>

what3words

w3w capabilities

Set the w3w key to true.

JavaScript
        maps: {
    provider: "woosmap",
    localities: {
      types: [],
    },
    w3w: true
  },

Once set, your Store Locator Widget is inheriting from two additional features:

In order to benefit from what3words suggestions in the search field, localities should be set as search provider in the maps section.

Example with what3words enabled

Baidu Map

Autocomplete

When using Baidu provider for Store Locator Widget, autocomplete allows user to search for city names directly at first character input. As the Store Locator provides a unified configuration to handle various provider options, you can use the places configuration the same way than with Google provider.

Please see MapsConf object Specification for more details.

Note that the Localities autocomplete service is not available for China yet.

Basemap styling

You can use some Baidu styling options by using the baiduMapStyle property of the WoosmapViewConf object Specification. Currently, only Baidu JsAPI v2 styling is available using the following styles :

Autocomplete and Basemaps Baidu styling example

Store Locator Widget Baidu
        const storeLocatorConfig = {
  theme: {
    primary_color: "#00754a",
  },
  maps: {
    provider: "baidu",
    apiKey: "oUQDfIp2b7qNxIuSaghaeip7",
  },
  woosmapView: {
    baiduMapStyle: {
      style: "light",
      // style: "dark"
      // style: "grassgreen"
      // style: 'midnight',
      // style: 'pink',
      // style: 'bluish',
      // style: "hardedge"
    },
    initialCenter: {
      lat: 31.230780461545375,
      lng: 121.36283503342771,
    },
    initialZoom: 13,
    breakPoint: 14,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 6,
    },
    style: {
      default: {
        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,
          },
        },
      },
    },
  },
};

function isMobileDevice(): boolean {
  return window.innerWidth < 500;
}

function initStoreLocator(): void {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");
  webapp.setConf(storeLocatorConfig);
  webapp.render(isMobileDevice());
}

initStoreLocator();

declare global {
  // currently, the WebApp typings are not exported, so we use `any` here
  interface Window {
    WebApp: new (elementId: string, projectKey: string) => any;
  }
}

    
        const storeLocatorConfig = {
  theme: {
    primary_color: "#00754a",
  },
  maps: {
    provider: "baidu",
    apiKey: "oUQDfIp2b7qNxIuSaghaeip7",
  },
  woosmapView: {
    baiduMapStyle: {
      style: "light",
      // style: "dark"
      // style: "grassgreen"
      // style: 'midnight',
      // style: 'pink',
      // style: 'bluish',
      // style: "hardedge"
    },
    initialCenter: {
      lat: 31.230780461545375,
      lng: 121.36283503342771,
    },
    initialZoom: 13,
    breakPoint: 14,
    tileStyle: {
      color: "#00754a",
      size: 13,
      minSize: 6,
    },
    style: {
      default: {
        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,
          },
        },
      },
    },
  },
};

function isMobileDevice() {
  return window.innerWidth < 500;
}

function initStoreLocator() {
  const webapp = new window.WebApp("map", "YOUR_API_KEY");

  webapp.setConf(storeLocatorConfig);
  webapp.render(isMobileDevice());
}

initStoreLocator();

    
        /*
 * Always set the map height explicitly to define the size of the div element
 * that contains the map.
 */
#map {
  height: 100%;
}

/*
 * Optional: Makes the sample page fill the window.
 */
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;
}


    
        <html>
  <head>
    <title>Store Locator Widget - Baidu</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta charset="utf-8" />

    <script src="https://webapp.woosmap.com/webapp.js"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <div id="map"></div>
  </body>
</html>
‹ Sample Usage Configuration ›
Was this article helpful?
Have more questions? Submit a request