Google Maps API Directions Service Example

3,357

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.

Show/Post Comments