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"
}
)
name | description |
---|---|
origin | The value of the origin parameter can be one of 3 formats which are plain street address or geographic coordinates (latitude and longitude separated by a comma without any space in between) or the place_id. This will be the starting point for calculating the directions between locations For Example: origin=123+Slater+Street+ON origin=41.43206,-81.38992 origin=place_id:r345UTjjf(&*(*ljh*& |
destination | The value of the destination parameter can be one of the three formats similar to origin.This will be the ending point for calculating directions between locations.For Example: destination=321+Slater+Street+ON destination=41.43206,-81.38992 destination=place_id:r345UTjjf(&*(*ljh*& |
travelMode – M uppercase | This could be DRIVING, BICYCLING, TRANSIT & WALKING – and it must be all uppercase |
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.