Can someone help me figure out how to create a dynamic map with directions/routes? I am currently using the Directions Renderer plugin, but it only shows a static example. I want to generate a route based on user input.
Below is the code snippet:
/* global google */
import { default as React, Component,} from "react";
import { withGoogleMap, GoogleMap, DirectionsRenderer,} from "../../../lib";
const DirectionsExampleGoogleMap = withGoogleMap(props => (
<GoogleMap
defaultZoom={7}
defaultCenter={props.center}
>
{props.directions && <DirectionsRenderer directions={props.directions} />}
</GoogleMap>
));
export default class DirectionsExample extends Component {
constructor(props) {
super(props);
this.state = {
origin: '',
destination: '',
}
this.handleOrigin = this.handleOrigin.bind(this);
this.handleDestination = this.handleDestination.bind(this);
}
handleOrigin(event) {
event.preventDefault()
this.setState({origin: event.target.value});
}
handleDestination(event) {
event.preventDefault()
this.setState({destination: event.target.value});
}
componentDidMount() {
const DirectionsService = new google.maps.DirectionsService();
DirectionsService.route({
origin: new google.maps.LatLng(this.state.origin),
destination: new google.maps.LatLng(this.state.destination),
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() {
return (
<input type='text' value={this.state.origin} onChange=
{this.handleOrigin} />
<input type='text' value={this.state.destination} onChange2=
{this.handleDestination}/>
<DirectionsExampleGoogleMap
containerElement={
<div style={{ height: `100%` }} />
}
mapElement={
<div style={{ height: `100%` }} />
}
center={this.state.origin}
directions={this.state.directions}
/>
);
}
}