Search code examples
google-mapsgoogle-maps-api-3react-google-maps

example DirectionsRenderer is crashing


I'm using original code from https://tomchentw.github.io/react-google-maps/#!/DirectionsRenderer

my component:

export default class MyComponent extends React.Component {
render() {
    return (
        <main className="main--container">
            <MapWithADirectionsRenderer />;
        </main>
    );
}}

which is connected in container in rendered with react router.

Error:

Uncaught TypeError: Cannot read property 'apply' of undefined
    at eval (Recompose.js:831)
    at eval (Recompose.js:831)
    at eval (Recompose.js:831)
    at eval (MyComponent.js:71)
    at Object.<anonymous> (app.bundle.js:12417)
    at __webpack_require__ (app.bundle.js:679)
    at fn (app.bundle.js:89)
    at eval (MyComponentContainer.js:14)
    at Object.<anonymous> (app.bundle.js:12410)
    at __webpack_require__ (app.bundle.js:679)

Error acquires on any page, even if MapWithADirectionsRenderer isn't rendered
Error only acquires on page with my container if next code is deleted:

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

Solution

  • In case someone will face similar problem, you should import withScriptjs like this

    import withScriptjs from "react-google-maps/lib/async/withScriptjs";