Woosmap Search API Sample for Blog

by woosmap

HTML

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

<div id="search_wrapper" class="outside__container">
  <div id="query_wrapper">
    <h4 class="title_h4">Find <input name="n" type="number" id="stores-limit" min="1" max="3" step="1" value="1"> Coffee Shop <b>Near You</b>!</h4>
    <div id="type-selector" class="controls">
      <input type="checkbox" name="type" id="changetype-takeaway" checked="checked">
      <label for="changetype-takeaway">Take Away Coffee</label>
    </div>
    <div id="query_field_and_button">
      <div id="query_field">
        <div id="query_field_inner">
          <input type="text" name="query" id="queryinput" maxlength="60" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" placeholder="Search a City, an Address..." tabindex="1">

        </div>
        <div id="query_field_right">&nbsp;</div>
      </div>
      <input type="submit" id="search-geocoding" value="" alt="Find Coffee Shop around this Address">
    </div>
  </div>
  <div id="geocoding-placeholder">
    <img id='loader' src="https://www.woosmap.com/assets/loader.gif" alt="loader" />
  </div>
  <div id="url">
  </div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBFs7Jk15uYQB5GYUTlKdKETrl_mQUCC0c"></script>

CSS

#search_wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
}

#search_wrapper p {
  line-height: 1.5em;
  margin-bottom: 0.8em;
}

#changetype-takeaway,
label {
  display: inline !important;
}

#geocoding-placeholder {
  min-height: 50px;
  text-align: center;
  margin: 0 20%;
  display: inline-block;
}

#url,
#show-json {
  text-align: left;
  margin: 0 20%;
  display: block;
  font-size: 0.9em;
  line-height: 1.9em;
  color: #5A6575;
}

#stores-limit {
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  border: rgb(229, 229, 229) 1px solid;
  width: 60px !important;
  display: inline-block;
  background: white !important;
}

#querystrings_url {
  padding: 2%;
  border-radius: 4px;
  overflow: hidden;
  border: 1px dashed #5A6575;
}

.title_h4 {
  font-size: 1.15em;
  font-weight: 400;
  line-height: 1.4em;
  color: rgb(60, 60, 60);
  padding: 3% 0;
  margin: 0 auto;
}

#query_wrapper {
  color: #333;
  position: relative;
  margin: 1% 20%;
}

#query_field_and_button {
  position: relative;
  padding-right: 66px;
  display: block;
}

#query_field {
  vertical-align: middle;
  position: relative;
  height: 38px;
  background: #ffffff;
  border-radius: 4px 0 0 4px;
  -moz-border-radius: 4px 0 0 4px;
  -webkit-border-radius: 4px 0 0 4px;
  border: 1px solid #c5c5c5;
  border-right: 0;
}

#query_field_inner {
  position: relative;
  padding: 0;
  margin: 0 10px 0 10px;
  height: 36px;
}

#queryinput {
  width: 100%;
  background: white !important;
  background: 0;
  border: 0 !important;
  color: #000;
  height: 33px;
  top: 0;
  left: 0;
  position: absolute;
  padding: 3px 0 2px 0;
  box-shadow: none !important
}

#queryinput:active,
#queryinput:focus {
  box-shadow: none;
}

#query_field_right {
  display: none;
}

#search-geocoding {
  border: 0;
  border-radius: 0 4px 4px 0;
  -webkit-border-radius: 0 4px 4px 0;
  -moz-border-radius: 0 4px 4px 0;
  color: transparent;
  width: 65px;
 ...

JavaScript

function distance(d) {
  if (d < 1000) {
    return Math.round(d) + 'm';
  } else {
    return Math.round(d / 1000) + 'km'
  }
}

function storeToHtml(properties) {
  var content = '<b>' + properties.name + '</b><br/>';
  if (properties.address.lines.hasOwnProperty(0)) {
    content += properties.address.lines[0] + '<br/>';
  }
  content += properties.address.city + '<br>';
  content += 'at ' + '<b>' + distance(properties.distance) + '</b>' + '<br/>';

  return content;
}

var request = new XMLHttpRequest();
var publicKey = 'woos-81a699ca-5082-3ffd-9f54-a684a4b82853';
var ROOT_URL = 'https://api.woosmap.com/stores/search/?key=' + publicKey;
woosmapRecommendation.setProjectKey(publicKey);

function updateSearchStore(stores) {
  if (stores && stores.features && stores.features.length > 0) {
    var storeList = "<ul class='store-list'>";
    for (i = 0; i < stores.features.length; i++) {
      var store = stores.features[i];
      var properties = store.properties;
      storeList += "<li><div style='display:table;width:100%;table-layout:fixed;'><div>" + storeToHtml(properties) + "</div>";
      var drivinglink = "//www.woosmap.com/webapp/?key=woos-81a699ca-5082-3ffd-9f54-a684a4b82853&storeid=" + properties["store_id"] + "&initialstate=directions";
      storeList += "<div style='padding:1em; text-align: center;display:table-cell;vertical-align:top;width:100px'><a target='_blank' href='" + drivinglink + "'><img src='https://developers.woosmap.com/assets/images/driving.png'/>Directions</a></div>";
      storeList += "</div></li>";
    }
    storeList += "</ul>";
    var placeholder = document.getElementById('geocoding-placeholder');
    placeholder.innerHTML = storeList;
  } else {
    document.getElementById('geocoding-placeholder').innerHTML = 'Zero store Returned';
  }
}

function updateStoreSearchWithRecommendation() {
  woosmapRecommendation.getUserPosition({
    successCallback: function(LatLng) {
      updateStoreSearchWithLocation(LatLng.latitude,...