Как правильно упоминалось в комментарии, для этой цели необходимо использовать API направлений :
Направления отображаются в виде ломаной линии, рисующей маршрут на карте, или дополнительнов виде последовательности текстового описания внутри элемента (например, «Поверните направо на съезд моста Уильямсбург»)
В следующем примере показано, как интегрировать Google Maps API Directions Service в google-maps-react для отображения маршрута.
Предполагается, что data prop содержит координаты, представленные в формате, указанном в предоставленном вопросе.Направления Сервисный код был адаптирован из этого примера
Пример
class MapContainer extends React.Component {
constructor(props) {
super(props);
this.handleMapReady = this.handleMapReady.bind(this);
}
handleMapReady(mapProps, map) {
this.calculateAndDisplayRoute(map);
}
calculateAndDisplayRoute(map) {
const directionsService = new google.maps.DirectionsService();
const directionsDisplay = new google.maps.DirectionsRenderer();
directionsDisplay.setMap(map);
const waypoints = this.props.data.map(item =>{
return{
location: {lat: item.lat, lng:item.lng},
stopover: true
}
})
const origin = waypoints.shift().location;
const destination = waypoints.pop().location;
directionsService.route({
origin: origin,
destination: destination,
waypoints: waypoints,
travelMode: 'DRIVING'
}, (response, status) => {
if (status === 'OK') {
directionsDisplay.setDirections(response);
} else {
window.alert('Directions request failed due to ' + status);
}
});
}
render() {
return (
<div className="map-container">
<Map
google={this.props.google}
className={"map"}
zoom={this.props.zoom}
initialCenter={this.props.center}
onReady={this.handleMapReady}
/>
</div>
);
}
}
Демо