Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.
Tags: react
Published: 2022-08-25 05:49:09

---
title: Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.
published: true
date: 2022-08-24 04:15:30 UTC
tags: React
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ll9g1wxrb9ef46szhoqo.jpg
canonical_url: https://anlisha.com.np/blog/google-maps-api-directions-service-in-react-plot-efficient-route-on-map-with-total-distance-and-duration/
---

 **Use Case:**

- One can enter source and destination address; For the address field, google places autocomplete is implemented.
- One can also add multiple way-points/stops between source and destination address.
- On change in any address field, The Map and the Directions service is initialized to plot the driving directions and route on map and display the total distance and total duration.

**Final Demo!**

![](https://anlisha.com.np/blog/wp-content/uploads/2022/08/Google-Direction-Service-1024x559.png)

**Step1 — Enable Directions API for Google Maps API key**

If you are new to Google Maps API key, I recommend you to have a look at it [here](https://developers.google.com/maps/documentation/directions/cloud-setup).

**Step2 — Start Basic CRA**  **and Install packages**

```
npx create-react-app axon
cd axon
npm install @mui/material @emotion/react @emotion/styled
```

This will create a basic CRA. We also installed MUI 5 for creating UI components.

```
npm install @react-google-maps/api use-places-autocomplete formik moment
```

This will install `react-google-maps/api` and `use-places-autocomplete` packages required.

**Step3 — Include Maps JavaScript Library**

Include the google maps client-side library in `public/index.html`

```
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key [YOUR_API_KEY]&libraries=places"></script>
```

**Step4 — Setup App.js**

Initialize Formik with empty initial values of address fields. Formik is the most popular open source form library for React.

{% embed https://gist.github.com/anlisha-maharjan/8ba86245af0135dc75832bbe5a93f2e9 %}

**Step5 — Create source and destination address field with multiple way-points**

{% embed https://gist.github.com/anlisha-maharjan/fe2605c3ab8b28996ff061bc97687d5b %}

The `GoogleAutocomplete` field used is a custom google places autocomplete. You can find it [here](https://github.com/anlisha-maharjan/react-google-directions-service/blob/master/src/components/autocomplete.js).

**Step6 — Configure Request to Direction Service**

{% embed https://gist.github.com/anlisha-maharjan/45af5d0662ac6d19b0fc1f4c2a64f9fe %}

On line 9, an instance of the DirectionsService Object is created.  
On line 13, the route() called takes directions request JavaScript object (with required query parameters `origin`, `destination` and `travelMode`) as an argument. Also `waypoints` parameter is included to consider all the stops between origin and destination.

The second argument of route() method which is a response callback function returns `directionsResult` and `directionsStatus`.

And that concludes it!

**Source Code!**

The full source code is available here — [https://github.com/anlisha-maharjan/react-google-directions-service](https://github.com/anlisha-maharjan/react-google-directions-service)

Happy Learning! Feel free to give this article a clap and follow to stay up to date with more articles!

The post [Google Maps API Directions Service in React – Plot efficient route on map with total distance and duration.](https://anlisha.com.np/blog/google-maps-api-directions-service-in-react-plot-efficient-route-on-map-with-total-distance-and-duration/) first appeared on [Anlisha Maharjan](https://anlisha.com.np/blog).