Multiple Waypoints with react-google-maps - reactjs

Question

When using the react-google-maps library. I've found the DirectionsRenderer, but I only see an origin and a destination included as the options.
Is it possible to include multiple waypoints?
Google Maps API Docs

Answer 1

Yes, you can include multiple waypoints. As you see in the DirectionsRenderer sample, it uses const DirectionsService = new google.maps.DirectionsService(); . You can follow the sample on the DirectionsService doc on how to include the Waypoints in your request.
Here's a sample code snippet:
import React, { Component } from 'react';
import {
withGoogleMap,
GoogleMap,
DirectionsRenderer,
} from 'react-google-maps';
class Map extends Component {
state = {
directions: null,
};
componentDidMount() {
const directionsService = new google.maps.DirectionsService();
const origin = { lat: 40.756795, lng: -73.954298 };
const destination = { lat: 41.756795, lng: -78.954298 };
const waypt = [
{
location: { lat: 40.278022, lng: -76.899615 },
stopover: true,
},
{
location: { lat: 40.750216, lng: -78.922049 },
stopover: true,
},
];
directionsService.route(
{
origin: origin,
destination: destination,
waypoints: waypt,
travelMode: google.maps.TravelMode.DRIVING,
},
(result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
}
);
}
render() {
const GoogleMapExample = withGoogleMap((props) => (
<GoogleMap
defaultCenter={{ lat: 40.756795, lng: -73.954298 }}
defaultZoom={13}
>
{this.state.directions && (
<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;