Google map with react-google-maps API

Question

I'm new with maps and I need to implement a route and also get the distance. I'm using react-google-maps API and I have found this way to show the map, and the route.

It is the first time that I build a component like this and now I don't know how to access the data that is outside the class component. Basically, I would like to add the data from the search box (coordinates) to the origin in the DirectionService.route, and also to get the distance. Do you know how can I access that data?

I've been reading that componentWillMount is being deprecated but it is the only way that I made it work, if you have any suggestions I'll be happy to try.

import React from 'react'
import  { compose, withProps, lifecycle } from 'recompose'
import {withScriptjs, withGoogleMap, GoogleMap, DirectionsRenderer} from 'react-google-maps'
const {
  StandaloneSearchBox
} = require("react-google-maps/lib/components/places/StandaloneSearchBox");

const DirectionsComponent = compose(
  withProps({
    googleMapURL: "https://maps.googleapis.com/maps/api/js?key='yourkey'&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `400px` }} />,
    containerElement: <div style={{ width: `100%` }} />,
    mapElement: <div style={{height: `600px`, width: `600px` }}  />,
  }),
  
  withScriptjs,
  withGoogleMap,
  lifecycle({
    componentWillMount() {
      const refs = {};

      this.setState({
        places: [],
        onSearchBoxMounted: ref => {
          refs.searchBox = ref;
        },
        onPlacesChanged: () => {
          const places = refs.searchBox.getPlaces();
          console.log(places)

          this.setState({
            places
          });
        }
      });
    },

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

      DirectionsService.route({
        origin: new google.maps.LatLng(41.3851, -2.1734),
        destination: new google.maps.LatLng(40.4165, -3.70256),
        travelMode: google.maps.TravelMode.DRIVING,
      }, (result, status) => {
        console.log(result)
        if (status === google.maps.DirectionsStatus.OK) {
          this.setState({
            directions: {...result},
            markers: true
          })
          const distance = result.routes[0].legs[0].distance['text']
          console.log(distance)
        } else {
          console.error(`error fetching directions ${result}`);
        }
      });
    }
  })
)(props =>
  <div data-standalone-searchbox="">
    <StandaloneSearchBox
      ref={props.onSearchBoxMounted}
      bounds={props.bounds}
      onPlacesChanged={props.onPlacesChanged}
    >
      <input
        type="text"
        placeholder="Enter your destination"
        style={{
          boxSizing: `border-box`,
          border: `1px solid transparent`,
          width: `240px`,
          height: `32px`,
          padding: `0 12px`,
          borderRadius: `3px`,
          boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
          fontSize: `14px`,
          outline: `none`,
          textOverflow: `ellipses`
        }}
      />
    </StandaloneSearchBox>
    <ol>
      {props.places.map(
        ({ place_id, formatted_address, geometry: { location } }) => (
          <li key={place_id}>
            {formatted_address}
            {" at "}
            ({location.lat()}, {location.lng()})
          </li>
        )
      )}
    </ol>

  <GoogleMap defaultZoom={3}>
    {props.directions && <DirectionsRenderer directions={props.directions} suppressMarkers={props.markers} />}
  </GoogleMap>
</div>
  
);

class MyMapComponent extends React.PureComponent {
  constructor(props) {
    super(props)
    console.log(props)
    this.state = {

    }
  }
  

render() {
    return (
      <div>
        
        <DirectionsComponent/>
      </div>
      
    )
  }
}
export default MyMapComponent

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

First of, please remove the API key in your question and don't post it in public sites in the future to protect it.

I successfully coded your use case but I used the @react-google-maps/api since this is a complete re-write of the (sadly unmaintained) react-google-maps library. Then instead of componentWillMount I used the OnLoad callback used which is called when the map instance has loaded.

Please see the working sample code here and code snippet with inline comments below:

Index.js

import React, { Component } from "react";
import { render } from "react-dom";
import { LoadScript } from "@react-google-maps/api";
import Map from "./Map";
import "./style.css";

const lib = ["places"];
const key = ""; // PUT GMAP API KEY HERE
class App extends React.Component {
  render() {
    return (
      <LoadScript googleMapsApiKey={key} libraries={lib}>
        <Map />
      </LoadScript>
    );
  }
}

render(<App />, document.getElementById("root"));

Map.js

/*global google*/
import ReactDOM from "react-dom";
import React from "react";

import {
  GoogleMap,
  StandaloneSearchBox,
  DirectionsRenderer
} from "@react-google-maps/api";

const defaultLocation = { lat: 40.756795, lng: -73.954298 };
let destination = { lat: 41.756795, lng: -78.954298 };
let origin = { lat: 40.756795, lng: -73.954298 };
let directionsService;
class Map extends React.Component {
  state = {
    directions: null,
    bounds: null
  };

  onMapLoad = map => {
    directionsService = new google.maps.DirectionsService();
    //load default origin and destination
    this.changeDirection(origin, destination);
  };

  //function that is called when SearchBox has loaded and assigned ref to this.searchbox  to get the searchbox object
  onSBLoad = ref => {
    this.searchBox = ref;
  };

  onPlacesChanged = () => {
    //pass the new place location as the origin
    this.changeDirection(
      this.searchBox.getPlaces()[0].geometry.location,
      destination
    );
  };

  //function that is calling the directions service
  changeDirection = (origin, destination) => {
    directionsService.route(
      {
        origin: origin,
        destination: destination,
        travelMode: google.maps.TravelMode.DRIVING
      },
      (result, status) => {
        if (status === google.maps.DirectionsStatus.OK) {
          //changing the state of directions to the result of direction service
          this.setState({
            directions: result
          });
        } else {
          console.error(`error fetching directions ${result}`);
        }
      }
    );
  };

  render() {
    return (
      <div>
        <div id="searchbox">
          <StandaloneSearchBox
            onLoad={this.onSBLoad}
            onPlacesChanged={this.onPlacesChanged}
          >
            <input
              type="text"
              placeholder="Customized your placeholder"
              style={{
                boxSizing: `border-box`,
                border: `1px solid transparent`,
                width: `240px`,
                height: `32px`,
                padding: `0 12px`,
                borderRadius: `3px`,
                boxShadow: `0 2px 6px rgba(0, 0, 0, 0.3)`,
                fontSize: `14px`,
                outline: `none`,
                textOverflow: `ellipses`,
                position: "absolute",
                left: "50%",
                marginLeft: "-120px"
              }}
            />
          </StandaloneSearchBox>
        </div>
        <br />
        <div>
          <GoogleMap
            center={defaultLocation}
            zoom={5}
            onLoad={map => this.onMapLoad(map)}
            mapContainerStyle={{ height: "400px", width: "800px" }}
          >
            {this.state.directions !== null && (
              <DirectionsRenderer directions={this.state.directions} />
            )}
          </GoogleMap>
        </div>
      </div>
    );
  }
}

export default Map;