Using Woosmap Store Locator Widget
Easy Embeddable Store Locator Widget.
The Woosmap Store Locator Widget is a one-stop-shop to create a Store Locator based on Google Maps API. Our aim is to help you to integrate a powerful store locator on your website in the most simplest way possible.
Sample
Below you can see a sample usage of a Woosmap Store Locator Widget displaying Bose stores all over the world along with the integration code.
Integration Code
<div id="store-locator" style="height:500px; width:100%"></div>
<script type="text/javascript" src="https://webapp.woosmap.com/webapp.js"></script>
<script type="text/javascript">
const loadStoreLocator = function () {
const webapp = new WebApp('store-locator', 'woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae');
const isMobile = document.querySelector('body').clientWidth < 900;
webapp.render(isMobile);
};
loadStoreLocator();
</script>
Set Configuration
Please check Store Locator Widget Reference for full supported attributes.
const storeLocatorConfig = {
"theme": {
"primaryColor": "#8DC63F"
},
"datasource": {
"maxResponses": 5, //number stores returned for nearby search
"maxDistance": 0, //in meters. 0 = no limit
"useDistanceMatrix": false //activate Google Distance Matrix for nearby search
},
"recommendation": {
"useRecommendation": false //activate Woosmap Recommendation at start
},
"internationalization": {
"lang": "fr",
"period": "fr-FR", //period: 'en-US',
"unitSystem": 0
},
"maps": {
"provider": "google", //specify here your map provider (google or baidu)
"apiKey": "YOUR_GOOGLEMAPS_API_KEY", //specify here your Google Maps API key
"places": {
"types": [
"geocode"
],
"componentRestrictions": {
"country": [
"fr"
]
}
}
},
"woosmapview": {
"baseMapStyle": [{}], //customize Google Maps basemap (check https://snazzymaps.com/)
"initialCenter": {
"lat": 46.9,
"lng": 2.6
},
"initialZoom": 6,
"tileStyle": { //customize top level dot markers)
"color": "#8DC63F",
"size": 15,
"minSize": 11
},
"breakPoint": 10, //zoom level between dot and markers
"style": { //customize Markers
"default": {
"icon": {
"url": "https://website.com/path-to-default-marker.svg",
"scaledSize": {"width": 24, "height": 24},
"anchor": {
"x": 20,
"y": 20
}
},
"selectedIcon": {
"scaledSize": {"width": 32, "height": 32},
"url": "https://website.com/path-to-selected-marker.svg"
}
}
},
},
"filters": {
"filters": [{
"propertyType": "type",
"title": {
"en": "Services",
"fr": "Services"
},
"choices": [{
"key": "type_1",
"en": "en_Type 1 Label",
"fr": "fr_Type 1 Label"
}, {
"key": "type_2",
"en": "en_Type 2",
"fr": "fr_Type 2"
}],
"innerOperator": "and"
}, {
"propertyType": "tag",
"title": {
"en": "Tags",
"fr": "Tags"
},
"choices": [{
"key": "tag_a",
"en": "en_Tag A Label",
"fr": "fr_Tag A Label"
}, {
"key": "tag_b",
"en": "en_Tag B",
"fr": "fr_Tag B"
}],
"innerOperator": "and"
}, {
'propertyType': 'custom', //based on any data associated to your stores
'title': {
'en': 'Drive in Paris'
},
'choices': [
{
'key': '(type:"Drive" AND city:"Paris")', //build your query here
'en': 'Drive in Paris',
'fr': 'Drive à Paris'
}
],
'innerOperator': 'or'
}],
"outerOperator": "and"
}
};
let myWoosmapPublicKey = "woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae";
let myStoreLocator = new WebApp('store-locator-div', myWoosmapPublicKey);
myStoreLocator.setConf(storeLocatorConfig);
myStoreLocator.render();
Was this article helpful?
Have more questions? Submit a request