Community Forum

Get Driving Directions

Get distance, duration and path polyline for a pair of origin and destination, based on the recommended route between those two points for a specified travel mode.
  1. Building Directions Request
  2. Displaying Directions

You can calculate directions by using the woosmap.map.DirectionsService object. This object is an interface to the Route endpoint of Woosmap Distance API. This service compute travel distance, time and path for a pair of origin and destination.
You may either display these directions results using custom overlays or use the woosmap.map.DirectionsRenderer object to render these results.

Building Directions Request

To use directions in the Woosmap Map JS API, create an object of type woosmap.map.DirectionsService and call DirectionsService.route() to initiate a request to the Route endpoint of Woosmap Distance API, passing it a DirectionsRequest object literal (containing at least the origin/destination LatLng) and a callback method to process the direction results.

The DirectionsRequest object literal contains the following fields:

        {
  origin: LatLng | LatLngLiteral,
  destination: LatLng | LatLngLiteral,
  travelMode?: string,
  unitSystem?: string,
  provideRouteAlternatives?: boolean,
  waypoints?: DirectionsWayPoint[]
}

Below is a sample DirectionsRequest and a call to route() method:

JavaScript
        const directionsRequest = {
  origin: {lat:48.86288,lng:2.34946},
  destination: {lat:52.52457, lng:13.42347},
  provideRouteAlternatives: false,
  travelMode: woosmap.map.TravelMode.DRIVING,
  unitSystem: woosmap.map.UnitSystem.IMPERIAL, 
  waypoints: [{
    location: {lat:50.84670, lng:4.35684}
  },{
    location: {lat:52.37342, lng:4.84631}
  }]  
}

let directionsService;
directionsService = new woosmap.map.DirectionsService();
directionsService.route(directionsRequest, callback(result, status));

Travel Modes

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

Unit Systems

By default, directions are calculated and displayed using the METRIC unit system. The following unit systems are currently supported:

Displaying Directions

Processing a directions request with the route() method of woosmap.map.DirectionsService requires passing a callback called upon service request end. This callback returns a DirectionResult and a DirectionsStatus code.

JavaScript
        let directionsService;
directionsService = new woosmap.map.DirectionsService();
directionsService.route(DirectionRequest, 
                        callback(DirectionResult, DirectionStatus));

Direction Status

The DirectionsStatus may return the following values:

Direction Result

The DirectionsResult contains the result of the directions query which you can display on the map using the setDirections() method of DirectionsRenderer object.

To display it, follow these steps:

  1. Create a new DirectionsRenderer object.

  2. Call setMap() on the renderer to link it to your map object.

  3. Call setDirections() on the renderer with the DirectionsResult as parameter.

The below example calculates directions between two locations in France. The DirectionsRenderer handles display of the returned polyline (and alternate routes) between the origin and destination.

JavaScript
        const directionsService = new woosmap.map.DirectionsService();
const directionsRenderer = new woosmap.map.DirectionsRenderer();
const map = new woosmap.map.Map(document.getElementById("map"), {
    zoom: 7,
    center: {
      lat: 43.5,
      lng: 2.4
    }
});
directionsRenderer.setMap(map);
directionsService.route({
      origin: {lat:48.86288,lng:2.34946},
      destination: {lat:52.52457, lng:13.42347}
    },
    (response, status) => {
      if (status === "OK") {
        directionsRenderer.setDirections(response);
      } else {
        console.log("Directions request failed with status :" + status);
      }
    }
);

The DirectionsResult Object literal has the routes[] field which contains an array of DirectionsRoute objects. Usually, only one route is returned for a request, unless you set the provideRouteAlternatives field to true, in which several routes may be returned.
Each DirectionsRoute indicates a way to get from the origin to the destination and is composed of the following fields:

The DirectionsLeg is an object with the following fields:

‹ Info Window Render Shapes ›
Was this article helpful?
Have more questions? Submit a request