February 13, 2019

Get Started

Get started with the Woosmap Store Locator JavaScript API. View a simple example, learn the concepts, and create custom maps for your site.

1. Overview
2. Loading the Woosmap loader.js file
3. Define Loader Options
4. Create the Map Object
5. Define Map Options

The Woosmap Store Locator JS API allows you to embed interactive maps on web pages. The API could be considered as a layer of functionality on top of existing map providers like Google Maps or Baidu Maps and specially designed to display, search and interact efficiently with your assets (stores or other kind of POIs) hosted on Woosmap Platform.

API Key
Woosmap Store Locator JS API requires authorization via API Key for initialization and API calls. You can obtain it by following this steps.

Overview

You can use this JavaScript API to embed interactive maps directly into your webpages. You can also add stores overlay to the map to call out points of interest and get relative information.

Here is a basic sample centered on London and displaying Starbucks Coffee Shops.

HTML

        <div id="store-locator"></div>
<script>
    let map;
    const options = {
        version: "1.4",
        publicKey: "woos-48c80350-88aa-333e-835a-07f4b658a9a4", //replace with your woosmap public key
        callback: initMap,
        loadJQuery: false
    }
    const googleOptions = {
        center: {lat: 51.515, lng: -0.12},
        zoom: 13,
    }
    function initMap() {
        const loader = new woosmap.MapsLoader({
            key: "AIzaSyBn3kw1bNdgmiXAczwr2DcKLAaW-xxxxx" //replace with your google api key
        });
        loader.load(() => {
            map = new google.maps.Map(document.getElementById("store-locator"), googleOptions);
            const mapStoresView = new woosmap.TiledView(map, woosmapOptions);
        });
    }
    window.addEventListener("DOMContentLoaded", () => {
        WoosmapLoader.load(options)
    }, false);
</script>
<script defer src="https://sdk.woosmap.com/locator/loader.js"></script>

    

The first step to use the Woosmap Store Locator JS API on your website is to link this loader.

Loading the Woosmap loader.js file

Inline Loading

HTML

        <script defer src="https://sdk.woosmap.com/locator/loader.js"></script>
<script>
    window.addEventListener("DOMContentLoaded", () => {
        // you can access WoosmapLoader here
    }, false);
</script>

    

Dynamic Loading

JavaScript

        const loaderScript = document.createElement('script')
loaderScript.src = 'https://sdk.woosmap.com/locator/loader.js'
loaderScript.onload = () => {/* you can access WoosmapLoader here*/}
document.head.append(loaderScript)

    

Define Loader Options

Once fully loaded to the DOM, the loader adds a global variable called WoosmapLoader. It helps you integrate the Woosmap Store Locator JS API with appropriate options (version, publicKey and callback to execute after script integration)

Call the WoosmapLoader.load(options) like below:

JavaScript

        const woosmapLoadOptions = {
    version: "1.4", // 1.4 point currently to the latest available version
    publicKey: "woos-48c80350-88aa-333e-835a-07f4b658a9a4", //replace with your public key
    callback: initMap, //the callback to be executed once the API is fully loaded
    loadJQuery: false //JQuery is embedded by default but you deactivate it
}
window.addEventListener("DOMContentLoaded", () => {
    WoosmapLoader.load(woosmapLoadOptions)
}, false);

    

Create the Map Object

For the map to display on your web page, first, you’ll need to create an HTML element container for it. Give it an ID that you will pass to the Map Object instance creation.

HTML

        <div id="store-locator"></div>

    

The HTML Element must be present in the DOM before instantiating the Map Object as follows. For this example, the map is a Google Maps one therefore it requires a valid Google Maps API Key.

JavaScript

        let map;
function initMap() {
    const loader = new woosmap.MapsLoader({
        key: "AIzaSyBn3kw1bNdgmiXAczwr2DcKLAaW-xxxxx" //replace with your google maps api key
    });
    loader.load(() => {
        map = new google.maps.Map(document.getElementById("store-locator"), googleOptions);
    });
}

    

When you create a new map instance, you specify a <div> HTML element in the page as a container for the map.

Define Map Options

When creating a Google Maps object, you’ll need to specify some properties using the Google MapOptions object. There are two required options for every map:

• center to set the initial Map Center as Latitude and Longitude.
• zoom to set the initial resolution at which to display the map as an Integer between 1 (World) and 21 (Buildings).

JavaScript

        map = new google.maps.Map(document.getElementById('store-locator'), {
  center: { lat: 51.50940214, lng: -0.133012 },
  zoom: 13
});

    

The API currently support two maps provider, Google Maps and Baidu Maps. The way to integrate with them is a bit different. The above sample describes the Google Maps integration. Check here for Baidu usage.

Was this article helpful?

Have more questions? Submit a request