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.
- Overview
- Loading the Woosmap
loader.jsfile - Define Loader Options
- Create the Map Object
- 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.
<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
<script defer src="https://sdk.woosmap.com/locator/loader.js"></script>
<script>
window.addEventListener("DOMContentLoaded", () => {
// you can access WoosmapLoader here
}, false);
</script>
Dynamic Loading
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:
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.
<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.
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:
centerto set the initial Map Center as Latitude and Longitude.zoomto set the initial resolution at which to display the map as an Integer between 1 (World) and 21 (Buildings).
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.
