react-google-maps - Property 'directions' does not exist

Question

I am encountering this error when I try to run the sample code for react-google-maps:

Property 'directions' does not exist on type '{ children?: ReactNode; }'.

I am trying to run the directions renderer. Here's the code:

import * as React from 'react';
import './App.css';

import { compose, withProps, lifecycle } from "recompose"

import { withGoogleMap, withScriptjs, GoogleMap, DirectionsRenderer } from "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>
);



class App extends React.Component {

     public render() {
        return (
          <div className="App">
              <MapWithADirectionsRenderer />
          </div>
        );
  }
}

export default App;

I am afraid I am new to react's way of doing and I am unsure what is causing this error. Any ideas?

Vadim Gremyachev · Answer 1 · 2018-06-19T07:27:27.467

To eliminate this kind of error, try to explicitly specify map component properties.

For that matter the following type could be introduced:

type MapProps = {
    children?: React.ReactNode,
    directions: google.maps.DirectionsResult
};

then a map component defined like this:

const Map = (props: MapProps) => {
    return (
        <GoogleMap
            defaultZoom={7}
            defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
        >
            {props.directions && <DirectionsRenderer directions={props.directions} />}
        </GoogleMap>
    );
}

and

const MapWithADirectionsRenderer = compose(
    withProps({
        containerElement: <div style={{ height: `400px` }} />,
        googleMapURL: "https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    lifecycle({
        componentDidMount() {
            const DirectionsService = new google.maps.DirectionsService();


            DirectionsService.route({
                destination: new google.maps.LatLng(41.8525800, -87.6514100),
                origin: new google.maps.LatLng(41.8507300, -87.6512600),
                travelMode: google.maps.TravelMode.DRIVING,
            }, (result, status) => {
                if (status === google.maps.DirectionsStatus.OK) {
                    this.setState({
                        directions: result,
                    });
                } else {
                    console.log(`error fetching directions ${result}`);
                }
            });
        }
    })
)(Map);

Update

Another option would be casting props like this: (props as any).directions

Example

<GoogleMap
    defaultZoom={7}
    defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)}
>
    {(props as any).directions && <DirectionsRenderer directions={(props as any).directions} />}
</GoogleMap>

I added the typed arguement as you did but I am now getting this error:`Parameter 'opts' implicitly has an 'any' type.` So I added the parameter to the MapProps but I am still encountering the error. — SomethingsGottaGive, Jun 18 '18 at 04:41
@user664509, the answer has been updated with alternative option (update section) — Vadim Gremyachev, Jun 19 '18 at 07:28

react-google-maps - Property 'directions' does not exist

1 Answers1