<reponame>Washira/react-calculation-distance<filename>src/GoogleMap.js
import React, { Component } from "react";
import {
  withGoogleMap,
  GoogleMap,
  DirectionsRenderer
} from "react-google-maps";

class Map extends Component {
  state = {
    directions: null
  };

  componentDidMount() {
    const directionsService = new window.google.maps.DirectionsService();

    const origin = { lat: this.props.latStart, lng:this.props.lonStart };
    const destination = { lat: this.props.latEnd, lng: this.props.lonEnd };

    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: window.google.maps.TravelMode.DRIVING,
        
      },
      (result, status) => {
        if (status === window.google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: result
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  }

  getDistanceFromLatLonInKm = (lat1, lon1, lat2, lon2) => {
    var R = 6371; // Radius of the earth in km
    var dLat = (lat2 - lat1) * (Math.PI / 180);
    var dLon = (lon2 - lon1) * (Math.PI / 180);
    var a =
      Math.sin(dLat / 2) * Math.sin(dLat / 2) +
      Math.cos(lat1 * (Math.PI / 180)) *
        Math.cos(lat2 * (Math.PI / 180)) *
        Math.sin(dLon / 2) *
        Math.sin(dLon / 2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
    var d = R * c; // Distance in km
    return d;
  };

  render() {
    const GoogleMapExample = withGoogleMap(props => (
      <GoogleMap
        defaultCenter={{ lat: this.props.latStart, lng: this.props.lonStart }}
        defaultZoom={13}
      >
        <DirectionsRenderer
          directions={this.state.directions}
        />
      </GoogleMap>
    ));

    return (
      <div style={{marginLeft:"1em"}}>
        <div></div>
        <div>Start Time : {this.props.dateStart}</div>
        <div style={{marginTop:"0.5em", marginLeft:"1em"}}>Latitude of Start : {this.props.latStart}</div>
        <div style={{marginLeft:"1em"}}>Longitude of Start : {this.props.lonStart}</div>
        <div style={{marginTop:"1em"}}>End Time : {this.props.dateEnd}</div>
        <div style={{marginTop:"0.5em", marginLeft:"1em"}}>Latitude of End : {this.props.latEnd}</div>
        <div style={{marginLeft:"1em"}}>Longitude of End : {this.props.lonEnd}</div>
        <div style={{marginTop:"1em"}}>
          Distance :{" "}
          {this.props.latStart? this.getDistanceFromLatLonInKm(
            this.props.latStart,
            this.props.lonStart,
            this.props.latEnd,
            this.props.lonEnd
          ).toFixed(2): "-"} {"km "}
        </div>
        <GoogleMapExample
          containerElement={<div style={{ height: `500px`, width: "500px", marginTop: "2em" }} />}
          mapElement={<div style={{ height: `50%` }} />}
        />
      </div>
    );
  }
}

export default Map;