Autocomplete Fallback Widget

Autocomplete Localities Fallback Google Places

by woosmap

HTML

<div class="wrapper">
  <div class="wrapper-search">
    <div id="wrapper-searchbox">
      <input id="my-input-woosmap" placeholder="Search for Postcode Or Locality..." />
      <div class="wrapper-search-settings">
        <fieldset>
          <legend>Call Google Places Condition</legend>
          <div>
            <label for="minRatio">Minimum Partial Matching Ratio (%):</label>
            <input type="number" id="minRatio" name="minRatio" min="1" max="100" value="75" onchange="saveSettings()">
          </div>
          <div>
            <label for="breakpointRatio">Breakpoint Ratio (%):</label>
            <input type="number" id="breakpointRatio" name="breakpointRatio" min="1" max="100" value="100" onchange="saveSettings()">
          </div>
        </fieldset>

        <div>
          <label for="types-select">Types:</label>
          <select id="types-select">
            <option value="locality|postal_code|admin_level|country|airport|train_station|metro_station|shopping">
              all available
            </option>
            <option value="locality">locality</option>
            <option value="postal_code">postcode</option>
            <option value="admin_level">admin_level</option>
            <option value="country">country</option>
            <option value="airport">airport</option>
            <option value="train_station">train_station</option>
            <option value="metro_station">metro_station</option>
            <option value="shopping">shopping</option>
          </select>
        </div>
        <div>
          <label for="components-select">Components:</label>
          <select id="components-select">
            <option value="">no restrictions</option>
            <option value="gb">United Kingdom</option>
            <option value="fr">France</option>
            <option value="es">Spain</option>
            <option value="it">Italy</option>
            <option value="nl">Netherlands</option>
            <option...

CSS

body {
  background: url(https://wgs3.s3.amazonaws.com/perso/ga/mockup/background-home.svg) no-repeat, linear-gradient(301deg, #015180, #0277BD);
  background-position: center bottom, left bottom;
  background-size: cover, auto;
  background-attachment: fixed;
  display: flex;
  overflow-x: hidden;
  margin: 0;
}


.wrapper {
  width: 100%;
  display: flex;
  position: absolute;
  top:0; left: 0; right: 0; bottom:0;
}

@media only screen and (max-width: 720px) {
  .wrapper-search {
    width: 100% !important;
    margin-right: 0 !important;
  }
}

.wrapper-search {
  width: 100%;
  background: rgba(250, 250, 250, 0.2);
  position: relative;
  border-radius: 3px;
}

#wrapper-searchbox {
  height: 50px;
  border-radius: 3px;
  display: flex;
  justify-content: center;
  padding-top: 1em;
}

#my-input-woosmap {
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
  font-size: 15px;
  max-width: 320px;
  border-radius: 3px;
  border: 0;
  width: 300px;
  height: 40px;
  padding-right: 15px;
  padding-left: 15px;
}

.autocomplete {
  z-index: 2;
}

#wrapper-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 3px;
}
.wrapper-search-settings {
  display: flex;
  flex-direction: column;
  position: absolute;
  color: #555;
  z-index: 1;
  line-height: 25px;
  font-size: 15px;
  max-width: 320px;
  border-radius: 3px;
  border: 0;
  width: 300px;
  padding: 5px;
  bottom: 10px;
  background: #fff;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
}


fieldset {
  border: 1px solid #DFDFDF;
  padding: 5px;
}

JavaScript

let map;
let marker;
let rectangle;
let autocomplete;

const config = {
   autocomplete: {
        minChars: 0,
        debounceTime: 0,
    },
  woosmap: {
    projectKey: "foodmarkets-woos",
    types: ["locality", "postal_code", "admin_level", "country", "airport", "metro_station", "train_station", "shopping"]
  },
  google: {
    apiKey: "AIzaSyBn3kw1bNdgmiXAczwr2DcKLAaW-M3nX14"
  },
  analytics: {
    tracking: true,
    analyticsKey: "UA-16453227-28"
  }
};

function saveSettings() {
  const typesSelect = document.getElementById('types-select');
  autocomplete.woosmap.types = typesSelect.options[typesSelect.selectedIndex].value.split("|");
  const componentSelect = document.getElementById('components-select');
  const components = componentSelect.options[componentSelect.selectedIndex].value;
  if (components !== "") {
    autocomplete.woosmap.componentRestrictions = {
      country: components.split(",")
    };
    autocomplete.google.componentRestrictions = {
      country: components.split(",")
    };
  } else {
    autocomplete.woosmap.componentRestrictions = {};
    autocomplete.google.componentRestrictions = {};
  }
  autocomplete.autocomplete.minChars = document.getElementById('minchar').value;
  autocomplete.minRatio = document.getElementById('minRatio').value;
  autocomplete.breakpointRatio = document.getElementById("breakpointRatio").value;
  document.getElementById('my-input-woosmap').value = "";
}

function zoomAndCenterMap(latlng, viewpoint) {
  if (marker) {
    marker.setMap(null);
  }
  if (rectangle) {
    rectangle.setMap(null);
  }
  marker = new google.maps.Marker({
    map,
    position: latlng,
    icon: "https://s3.eu-central-1.amazonaws.com/webapp-conf.woosmap.com/woos-6d55bb93-5107-30e5-8d81-85fb905b963c/default.svg"
  });

  if (viewpoint) {
    rectangle = new google.maps.Rectangle({
      strokeColor: '#00b2fc',
      strokeOpacity: 1,
      strokeWeight: 3,
      fillColor: '#00b2fc',
      fillOpacity: 0.1,
      map,
     ...