Driving Directions Map

Help your users get driving directions to your Stores

Building Directions Request
Travel Modes

The Woosmap JS Store Locator API provides a wrapper to the supported map providers driving directions services (Google Maps and Baidu Map). On top of this wrapper, you can use some UI components to help you calculate and display the directions request results.

You can calculate directions (using a variety of methods of transportation) by using the woosmap.location.DirectionsProvider. This object communicates with the dedicated map provider Directions Service which receives direction requests and returns an efficient path.

You may either handle these directions results yourself as done in the following sample or use the woosmap.ui.DirectionsResultsDisplayer object to render these results.

Building Directions Request

To use directions in the Woosmap Store Locator JS API, create an object of type woosmap.location.DirectionsProvider. As it extends the MVC Object you can set the originDestination property and listen for directions calculation results using a new MVCObject.

When specifying the origin or destination of originDestination property, you can specify a query string (for example, origin: "Sheffield") or a LatLng value (for example origin: 43.24, 25.3).

        const originDestination = {
    origin: "Sheffield",
    destination: "Cambridge"
};
const directionsProvider = new woosmap.location.DirectionsProvider();

const directionsResults = new woosmap.map.MVCObject();
directionsResults.bindTo("directionsRenderers", directionsProvider);
directionsResults.directionsRenderers_changed = () => {
    directionsResults.get('directionsRenderers').forEach((renderer, index) => {
        renderer.getDirections().routes[0]  //here in case of Google Maps you get a google.maps.DirectionsRoute object 
    });
}

directionsProvider.set('originDestination', originDestination)

Travel Modes

When you calculate directions, you need to specify which transportation mode to use. The following travel modes are currently supported for Google Maps:

DRIVING (Default) indicates standard driving directions using the road network.
BICYCLING requests bicycling directions via bicycle paths & preferred streets.
TRANSIT requests directions via public transit routes.
WALKING requests walking directions via pedestrian paths & sidewalks.

To specify a Travel Mode to the DirectionProvider object, set the selectedTravelMode properties.

        directionsProvider.set('selectedTravelMode', travelMode)

Was this article helpful?

Have more questions? Submit a request