Store Locator JS API - Distance code snippet function

Ask the community
,
1

I have looked at our documentation for API 1.4 of Store Locator JS API and cant find a suitable function for retrieving driving distance and time in the documentation.

Would you be able to provide a code snippet, to update stores with data from Distance API, similar to this function in JS API v 1.4 | Woosmap Developers does?

1 Like
2

This topic is archived. The Store Locator JS API discussed below has been retired, and the tutorial link at the end no longer resolves. The Distance API still works as described here. To build the map itself, start with the Map JS API.

For now, the Woosmap Store Locator JS API does not include features from Woosmap Distance API. But you can query the Distance API by yourself.

I’ve updated the JS Store Locator sample app to compute distance from a location (search from a user or geolocation) to a list of nearby stores, using the /distancematrix/endpoint from Woosmap Distance API.

Here you can have a look at the full code: woosmap-starterkit-storelocator/app/src/init.js at master · Woosmap/woosmap-starterkit-storelocator · GitHub

Below is the XHR call.

let destinations = stores.map((store) => {
     return store.geometry.coordinates[1] + "," + store.geometry.coordinates[0]
});
woosmap.$.ajax({
     url: 'https://api.woosmap.com/distance/distancematrix/json?',
     type: 'GET',
     dataType: 'json',
     data: {
        origins: mapView.get('location').lat + "," + mapView.get('location').lng,
        destinations: destinations.join("|"),
        units: 'metric',
        mode: 'driving',
        language: 'en',
        elements: 'duration_distance',
        key: 'woos-XXX'
     },
     success: function (response) {
        if (response.status === "OK") {
          /*get your distance and duration values here*/
        }
     }
 });

and the results displayed with distance value and duration.

image
image2426×1502 1.16 MB

We’ve also written a tutorial to help you build your own store locator : Woosmap Documentation | Woosmap Developers

Thanks for joining us!

1 Like