adding waypoints in the react-google-maps - google-maps-api-3

Question

editable samplecode how to use waypoints in the following code does the waypoints helps to plot the way which I updated in the database wheather the ponits will be based on the points I have updated
const DirectionsService = new google.maps.DirectionsService();
const DirectionsDisplay = new google.maps.DirectionsRenderer({suppressMarkers: true},{strokeColor:"#4a4a4a"});
DirectionsService.route({
origin: new google.maps.LatLng(this.state.orgin.latitude ,this.state.orgin.longitude),
destination: new google.maps.LatLng(this.state.destination.latitude ,this.state.destination.longitude),
travelMode: google.maps.TravelMode.DRIVING,
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
});
}).catch(function (err) {
});
}
})
)(props =>
<GoogleMap
defaultZoom={50}>
<DirectionsRenderer directions={props.directions} />
< Marker
position={{ lat:props.delivery!=undefined?props.delivery.latitude:null, lng: props.delivery!=undefined?props.delivery.longitude:null }} />
</GoogleMap>
);
return (
<MapWithADirectionsRenderer />
)
}

Answer 1

You can add waypoints by adding waypoints[] array of DirectionsWaypoint in your Directions Request.
You can check this documentation to learn more: https://developers.google.com/maps/documentation/javascript/directions#DirectionsRequests
Here's a sample waypoints array:
waypoints: [
{
location: new google.maps.LatLng(14.546748, 121.05455)
},
{
location: new google.maps.LatLng(14.552444,121.044488)
}
]
Here's a sample Direction Request with waypoints:
DirectionsService.route({
origin: new google.maps.LatLng(14.533593, 121.053128),
destination: new google.maps.LatLng(14.550895, 121.025079),
travelMode: google.maps.TravelMode.DRIVING,
waypoints: [
{
location: new google.maps.LatLng(14.546748, 121.05455)
},
{
location: new google.maps.LatLng(14.552444,121.044488)
}
]
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
});

Answer 2

A very simple way to implement wayPoints in React
import React from 'react';
import logo from './logo.svg';
import './App.css';
import { withScriptjs } from "react-google-maps";
import Map from './components/Map';
function App() {
const MapLoader = withScriptjs(Map);
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
</header>
<MapLoader
googleMapURL="https://maps.googleapis.com/maps/api/js?key=Key"
loadingElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
export default App;
And in your Map.js file
/*global google*/
import React, { Component } from "react";
import {
withGoogleMap,
withScriptjs,
GoogleMap,
DirectionsRenderer
} from "react-google-maps";
class Map extends Component {
state = {
directions: null,
};
componentDidMount() {
const directionsService = new google.maps.DirectionsService();
const origin = { lat: 6.5244, lng: 3.3792 };
const destination = { lat: 6.4667, lng: 3.4500};
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: google.maps.TravelMode.DRIVING,
waypoints: [
{
location: new google.maps.LatLng(6.4698, 3.5852)
},
{
location: new google.maps.LatLng(6.6018,3.3515)
}
]
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
console.log(result)
this.setState({
directions: result
});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
}
render() {
const GoogleMapExample = withGoogleMap(props => (
<GoogleMap
defaultCenter={{ lat: 6.5244, lng: 3.3792 }}
defaultZoom={13}
>
<DirectionsRenderer
directions={this.state.directions}
/>
</GoogleMap>
));
return (
<div>
<GoogleMapExample
containerElement={<div style={{ height: `500px`, width: "500px" }} />}
mapElement={<div style={{ height: `100%` }} />}
/>
</div>
);
}
}
export default Map;
I believe this is okay