Using Woosmap Store Locator Widget

Easy Embeddable Store Locator Widget.
  1. Sample
  2. Integration Code
  3. Set Custom Configuration

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.

loader

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">
    var loadStoreLocator = function () {
        var webapp = new WebApp('store-locator', 'woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae');
        var isMobile = document.querySelector('body').clientWidth < 900;
        webapp.render(isMobile);
    };
</script>
<script src="https://www.google.com/jsapi?callback=loadStoreLocator"></script>

Set Custom Configuration

Please check Store Locator Widget Reference for full supported attributes.

const storeLocatorConfig = {
    "theme": {
        "primary_color": "#8DC63F"
    },
    "datasource": {
        "api_key": "woos-0c78592f-13ea-362b-aa07-ba4ba9ea3dae", //your api key
        "max_responses": 5, //number stores returned for nearby search
        "max_distance": 0, //in meters. 0 = no limit
        "use_distance_matrix": 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": { 
        //specify your google maps api key here
        "api_key": "AIzaSyAdY-P46ir_T28wIsbwK1udcEImVl3JCAg", 
        "places": {
            "types": [
                "geocode"
            ],
            "componentRestrictions": {
                "country": [
                    "fr"
                ]
            }
        }
    },
    "woosmapview": {
        "baseMapStyle": [{}], //customise Google Maps Basemap (check https://snazzymaps.com/)
        "initialCenter": {
            "lat": 46.9,
            "lng": 2.6
        },
        "initialZoom": 6,
        "tileStyle": { //customise top level dot markers)
            "color": "#8DC63F",
            "size": 15,
            "minSize": 11
        },
        "breakPoint": 10, //zoom level between dot and markers
        "style": { //customise Markers 
            "default": {
                "icon": {
                    "url": "https://website.com/path-to-default-marker.svg",
                    "anchor": {
                        "x": 20,
                        "y": 20
                    }
                },
                "selectedIcon": {
                    "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"
        }],
        "outerOperator": "and"
    }
};
let myStoreLocator = new WebApp('store-locator-div', storeLocatorConfig.datasource.api_key);
myStoreLocator.setConf(storeLocatorConfig);
myStoreLocator.render();