Google Maps DirectionsRenderer with ReactJs

Today I want to share how to use DirectionsRenderer for google maps using reactJs(version 16.5.0).

I have created an application using the create-react-app command.

create-react-app react-google-maps-demo
cd react-google-maps-demo

You have App.js.

import React, { Component } from “react”;
class App extends Component {
render() {
 // return <div>App.js</div>;
}
}
export default App;

I used an npm library for react-maps ‘google-maps-react’.

npm install react-google-maps --save

Run an application to test if application display on http://localhost:3000/.

npm run start

now, create a file called DirectionsIndex.js under src/components/Directions and add content from here.

now create a file called DirectionRenderComponent.js under src/components/Directions and add content from here.

create utility folder under the src folder.please check this Utility.

you need to change the api key in /utility/constants.js file.

const key = “your_key”; 
export const G_API_URL = `https://maps.googleapis.com/maps/api/js?key=${key}&&v=3.exp&libraries=geometry,drawing,places`;

That’s it. You can now able to see maps with routes on application.

I have added one file called DirectionRenderComponentPromise.js (click here to go to that file),which is nothing but async Version of DirectionRenderComponent.js.(click here to go to that file).

Draw path between two location

I have changed current-location based on way-points, which I got when first request made. One can also change implementation by getting current location from server(websocket,api,mqqt etc.).

if current location change it will again draw path between those two location including current-location.