Zone API Sample

jsFiddle demo to search for store inside a Zone

by woosmap

HTML

<script src="https://sdk.woosmap.com/locator/loader.js"></script>
<div id="my-map"></div>
<div class="info-container">
  <div id="info-content"><strong>Information:</strong>
    <br/> Simulate a <strong>User Position</strong> by clicking on the map and display which Zone the location belongs to.
  </div>
</div>
<div class="request-container"><span id="lat-value"></span><span id="lng-value"></span>
  <strong id="request-value">...</strong>
</div>

CSS

#my-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

#info-content,
.request-container {
  padding: 8px;
  border-style: none;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.298039) 0 1px 4px -1px;
  background-color: rgb(255, 255, 255);
  max-height: 450px;
  overflow: auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
}

.info-container {
  margin: 18px;
  z-index: 0;
  position: absolute;
  display: block;
  max-width: 280px;
  max-height: 450px;
  left: 0;
  top: 0;
}

.request-container {
  margin: 18px;
  z-index: 0;
  position: absolute;
  display: block;
  right: 0;
  top: 0;
}

#lat-value,
#lng-value {
  display: block;
}

JavaScript

var projectKey = 'woos-af4c806f-269e-3124-ac44-bfd7d17c6c36';
var marker, markerSelected = null;
var pathA=[{lng:-122.4546384,lat:37.774656},{lng:-122.4515485,lat:37.7595934},{lng:-122.4354306,lat:37.7602172},{lng:-122.4333707,lat:37.7512596},{lng:-122.423071,lat:37.7511239},{lng:-122.4242726,lat:37.7687665},{lng:-122.4259893,lat:37.7691736},{lng:-122.4289075,lat:37.7732444},{lng:-122.4306241,lat:37.7850483},{lng:-122.4472753,lat:37.7830133},{lng:-122.445902,lat:37.7759581},{lng:-122.4546384,lat:37.774656}],pathB=[{lng:-122.4758889,lat:37.7524995},{lng:-122.4751594,lat:37.7321718},{lng:-122.4688079,lat:37.7299995},{lng:-122.4648597,lat:37.7261979},{lng:-122.4519851,lat:37.7228035},{lng:-122.4483802,lat:37.7215815},{lng:-122.4458053,lat:37.726741},{lng:-122.4365356,lat:37.7310857},{lng:-122.4315574,lat:37.7324433},{lng:-122.4246909,lat:37.7312214},{lng:-122.4219444,lat:37.731493},{lng:-122.423071,lat:37.7511239},{lng:-122.4333707,lat:37.7512596},{lng:-122.4354306,lat:37.7602172},{lng:-122.4515485,lat:37.7595934},{lng:-122.4528628,lat:37.7582744},{lng:-122.4540375,lat:37.7566755},{lng:-122.4565266,lat:37.7513144},{lng:-122.4601315,lat:37.7521288},{lng:-122.4618481,lat:37.7514501},{lng:-122.4635648,lat:37.7530788},{lng:-122.4758889,lat:37.7524995}],pathC=[{lng:-122.496116,lat:37.7648181},{lng:-122.4954079,lat:37.751518},{lng:-122.4635648,lat:37.7530788},{lng:-122.4618481,lat:37.7514501},{lng:-122.4601315,lat:37.7521288},{lng:-122.4565266,lat:37.7513144},{lng:-122.4540375,lat:37.7566755},{lng:-122.4528359,lat:37.7583041},{lng:-122.4515485,lat:37.7595934},{lng:-122.4546384,lat:37.774656},{lng:-122.4718903,lat:37.7731635},{lng:-122.472577,lat:37.772485},{lng:-122.4755811,lat:37.7725529},{lng:-122.4791001,lat:37.7723493},{lng:-122.4793576,lat:37.7713995},{lng:-122.4784993,lat:37.769839},{lng:-122.4783276,lat:37.7680071},{lng:-122.4774693,lat:37.766718},{lng:-122.4772118,lat:37.7652931},{lng:-122.496116,lat:37.7648181}];

var searchStoreAPIUrl =...