Using Woosmap Store Locator Widget

Easy Embeddable Store Locator Widget.

Sample
Integration Code
Set 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.

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);
    };
    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();

‹ Display nearest stores Develop your own Store Locator ›

Was this article helpful?

Have more questions? Submit a request