tomchentw/react-google-maps

import React, { PureComponent } from "react";
import {
withGoogleMap,
GoogleMap,
DirectionsRenderer,
withScriptjs,
} from "react-google-maps";
class Map extends PureComponent {
constructor(props) {
super(props);
this.state = {
directions: null,
cords: null,
userFrom: parseFloat(this.props.routing.latitude_from),
userto: parseFloat(this.props.routing.longitude_from),
destinationFrom: parseFloat(this.props.routing.latitude_to),
destinationto: parseFloat(this.props.routing.longitude_to),
};
}
componentDidMount() {
const { userFrom, userto, destinationFrom, destinationto } = this.state;
const directionsService = new window.google.maps.DirectionsService();
const directionsRenderer = new window.google.maps.DirectionsRenderer();
const origin = { lat: userFrom, lng: userto };
const destination = {
lat: destinationFrom,
lng: destinationto,
};
directionsService.route(
{
origin: origin,
destination: destination,
travelMode: window.google.maps.TravelMode.DRIVING,
},
(result, status) => {
directionsRenderer.setDirections({ result });
var route = result.routes[0].legs[0];
const coords = result.routes[0].overview_path;
if (status === window.google.maps.DirectionsStatus.OK) {
this.setState({
directions: result,
distance: route.distance.text,
duration: route.duration.text,
cords: coords,
});
} else {
console.error(error fetching directions ${result});
}
}
);
}
render() {
const GoogleMapExample = withGoogleMap((props) => (
<GoogleMap defaultCenter={{ lat: this.state.userFrom, lng: this.state.userto }} defaultZoom={10} >
<DirectionsRenderer directions={this.state.directions} onDirectionsChanged={(e) => console.log(e)}
options={{
polylineOptions: {
strokeColor: "#1171ef",
strokeOpacity: 1,
strokeWeight: 4,
},
}}
/>
</GoogleMap>
));
return (
<div>
<GoogleMapExample containerElement={<div style={{ height: `350px`, width: "100%" }} />}
mapElement={<div style={{ height: `100%` }} />}

    ></GoogleMapExample>
  </div>
);

}
}
const MapLoader = withScriptjs(Map);
export default MapLoader;