Alternative routes in react-google-maps - reactjs

Question

I am using example in react-google-maps library.
const { compose, withProps, lifecycle } = require("recompose");
const {
withScriptjs,
withGoogleMap,
GoogleMap,
DirectionsRenderer,
} = require("react-google-maps");
const MapWithADirectionsRenderer = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
loadingElement: <div style={{ height: `100%` }} />,
containerElement: <div style={{ height: `400px` }} />,
mapElement: <div style={{ height: `100%` }} />,
}),
withScriptjs,
withGoogleMap,
lifecycle({
componentDidMount() {
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route({
origin: new google.maps.LatLng(41.8507300, -87.6512600),
destination: new google.maps.LatLng(41.8525800, -87.6514100),
travelMode: google.maps.TravelMode.DRIVING,
}, (result, status) => {
if (status === google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
});
} else {
console.error(`error fetching directions ${result}`);
}
});
}
})
)(props =>
<GoogleMap
defaultZoom={7}
defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
);
<MapWithADirectionsRenderer />
I want to enable alternative routes in my map. So I used
provideRouteAlternatives: true
so inside callback function
(result, status) => { }
the result have a property routes which is an array of alternative routes.
How can I render those routes into map ? .. I also want to click on routes and they will change the color from active to inactive. When user select the route I need to send on the server property called
overview_polyline
which is inside of routes array, where each route inside the array has this property.
Thank you very much.

Answer 1

If you only want to render those routes on the map, you could use DirectionsRenderer from that library.
https://tomchentw.github.io/react-google-maps/#directionsrenderer
However, this DirectionsRenderer component can not be fully customized like defining the colors or onClick functions. What you could do is creating a customized Directions component using Marker and Polygon which also come from this library. Below is how I made it:
import React, { Component } from 'react';
import { Polyline, Marker } from 'react-google-maps';
import { pinkA200, blue500 } from 'material-ui/styles/colors';
import ntol from 'number-to-letter';
import _ from 'lodash';
const DirectionMarker = ({ data, isEnd, i, onClick }) => {
const { start_location, end_location } = data;
if (isEnd) {
return [
<Marker onClick={onClick} position={start_location} label={ntol(i)} key="end0" />,
<Marker onClick={onClick} position={end_location} label={ntol(i + 1)} key="end1" />
];
}
return <Marker onClick={onClick} position={start_location} label={ntol(i)} />;
};
const Direction = ({ direction, isEnd, i, onClick, isSelected }) => {
const data = direction.routes[0].legs[0];
const path = data.steps.reduce((sum, current) => _.concat(sum, current.path), []);
return [
<DirectionMarker data={data} onClick={onClick} isEnd={isEnd} i={i} key="marker" />,
<Polyline
onClick={onClick}
path={path}
options={{
strokeColor: isSelected ? pinkA200 : blue500,
strokeOpacity: 0.6,
strokeWeight: 6
}}
key="line"
/>
];
};
class Directions extends Component {
constructor(props) {
super(props);
this.state = { selectedSegment: 0 };
}
render() {
const { directions } = this.props;
if (_.isEmpty(directions)) {
return false;
}
return directions.map((d, i) => {
const directionProps = {
direction: d,
i,
key: i,
onClick: () => this.setState({ selectedSegment: i }),
isEnd: i === directions.length - 1,
isSelected: i === this.state.selectedSegment
};
return <Direction {...directionProps} />;
});
}
}
export default Directions;