Google Maps API Directions Service Example

Directions Service

The Directions Service is a client-side JavaScript libraray that lets us to get directions data between two locations based on travel mode such as driving, walking etc.

The Directions Service talks to Google Maps API behind the scene that takes direction requests such as origin, destination, travel mode and returns the efficient directions path data including multi-part directions.

Enable Directions API library

First, make sure that the Directions API library is enabled on the Google Cloud Console.

Include Maps JavaScript Library

Also, make sure to include the google maps client side library in the project.

<script src="https://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]">

Make A Request To Directions Service

Create an instance of the DirectionsService Object.

const directionsService = new google.maps.DirectionsService();

Call the route() method on the directionsService object to initiate a request to the Directions Service.

directionsService.route();

This method takes a couple of arguments which are DirectionsRequest and response callback function.

DirectionsRequest

DirectionsRequest will be a javascript object which is where all the required query parameters are added as properties.

 directionsService.route(
    {
            origin: "190 Main Street, Ottawa, Canada",
            destination: "290 First Avenue, Ottawa, Canada",
            travelMode: "DRIVING"
    }
)

Response Object

The second argument of route() method would be a response callback function. 

The DirectionsService is asynchronous so the callback function will be called upon completion of the Service request.

 directionsService.route(
    {
            origin: "190 Main Street, Ottawa, Canada",
            destination: "290 First Avenue, Ottawa, Canada",
            travelMode: "DRIVING"
    },
    (response, status) => {
     console.log(response);
     console.log(status);
    }
)

Then it will return a directionsResult and a DirectionsStatus that we can access from the parameters in the callback function. 

As you can see, the response object has a lot of information about the directions…the legs property will have travel distance, duration and steps information which basically tells you when to maneuver such as turn left, turn right, keep right and so on.

The overview path will show you the location coordinates which can be used to draw the polyline between the origin and destination locations on the map.