Cannot instantiate google object ( google is undefined )

[xshadowlegendx]

I am using MeteorJS ( 1.4.4 ) + ReactJS, currently i can get the map, markers, working properly. I am using ' withScriptjs.js ' async method to render the map, because i tried without the async and it does not work. Here is my problem, i want to use the DirectionsRenderer to draw direction, which is must needed for my traffic jam project, and following the example, I cannot get it works because of google is undefined when the code runs until
const DirectionsService = new google.maps.DirectionsService(); throws the error inside componentDidMount().
Because I am still on testing the package, so there is no complex code, and my code was just exactly the same as the example code ( directions ). Thanks you very much for helping.
PS: Awesome package with almost google api completed.

[Rupeshn73]

@xshadowlegendx I have faced this same issue before. So please refer to my question on same topic (ex) Stackoverflow react-google-map

[MRustem]

Connect the api tag before the bundle.js

[sebasgarcep]

Solved it by adding:

<script src="https://maps.googleapis.com/maps/api/js"></script>

to the head of my index.html, as suggested in the demo project's source code.

@tomchentw This should be documented, willing to send in a pull request.

[mpowell90]

This helped resolve my 'google is undefined' issue.
https://stackoverflow.com/questions/43714895/google-is-not-defined-in-react-app-using-create-react-app

My build is React.js with Next.js.

[oshalygin]

@sebasgarcep I'll put a PR together and add it to the README, because this comes up way too often. Since you haven't sent a PR yet, I'll just open it up now.

[tomchentw]

A possible solution is using withScriptjs
https://tomchentw.github.io/react-google-maps/#directionsrenderer

[GrolaElmahdi]

You can try this after imports :

const google = window.google