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).
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.).