go to developers doc

Init the Map with your Project

Build the structure of your App and display the Stores on a Map
  1. Add structure
  2. Add Default Responsive Style
  3. Instantiate the 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);
}