Init the Map with your Project

Build the structure of your App and display the Stores on a Map

Add structure

In your project folder, create an index.html file. Set up the document by adding Woosmap JS API loader to your head:

HTML
        <script src="https://sdk.woosmap.com/locator/loader.js"></script>

Next, markup the page to create a map container and sidebar listing:

HTML
        <div id="main">
    <div id="my-map-container">
        <div id="my-map"></div>
    </div>
    <div id="sidebar-container">
        <div id="sidebar">           
        </div>
    </div>
</div>

Add Default Responsive Style

Based on Flexbox, flex-direction changed on window size to make it responsive. Switch to the CSS tabs to see how.

Instantiate the Map

First you need to use the MapLoader to create a Google Map then create a TiledView.

A TiledView takes two arguments :

JavaScript
        function woosmap_main() {
  const loader = new woosmap.MapsLoader(googleLoadOptions);
  loader.load(function() {
    map = new google.maps.Map(woosmap.$('#my-map')[0], googleMapsOptions);
    mapView = new woosmap.TiledView(map, woosmapOptions);
  });
}
const woosmapLoadOptions = {
  version: '1.4',
  publicKey: 'woos-48c80350-88aa-333e-835a-07f4b658a9a4', //replace with your public key
  callback: woosmap_main,
  loadJQuery: true
};
const woosmapOptions = {
};
const googleLoadOptions = {
  key: "AIzaSyCOtRab6Lh2pNn7gYxvAqN5leETC24OXYQ"
};
const googleMapsOptions = {
  center: {
    lat: 51.5,
    lng: 0
  },
  zoom: 7
};
if (window.attachEvent) {
  window.attachEvent('onload', function() {
    WoosmapLoader.load(woosmapLoadOptions);
  });
} else {
  window.addEventListener('load', WoosmapLoader.load(woosmapLoadOptions), false);
}