react-google-maps: google is not defined?

I ran into the same issue due to me using eslint. In order to over come this issue I had to add at the top of my file: /* eslint-disable no-undef */.

try adding /* global google */ to the top of the file

You must run the google maps script in your index.html <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script> Or wrap withGoogleMap() with withScriptjs() to load asynchronously import withScriptjs from 'react-google-maps/lib/async/withScriptjs'; const myMap = withScriptjs(withGoogleMap((props) => (<GoogleMap />)));

eslint is an IDE warning/error. Should not have problems when running. If there are problems when running, perhaps it can be changed to window.google.maps.Map(node).

@seansinflipflops as @ZephD said, insert

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

in the top of you index.html file and you should be good to go.

withGoogleMap.js? withGoogleMap is higher order component wrapper, should not be a file name.

import {withGoogleMap, GoogleMap, Marker} from 'react-google-maps';
const GoogleMapHOC = withGoogleMap(
  props => ( <GoogleMap> <Marker/> </GoogleMap>)
)

Adding window in front of google.maps() to make window.google.maps() did the trick for me. Thanks @ZephD !

what worked for me: instead of just google, I have used window.google, hopefull it’ll work for you

Make sure you run the script without “async defer” flag, otherwise it might not load in the correct order.

your labelAnchor={new google.maps.Point(0, 0)} is causing the issue. At this point, google may not be defined. use a point literal labelAnchor={{x:0,y:0}} https://developers.google.com/maps/documentation/javascript/reference#Point

Where you use Map, you need to provide those two items (loadingElement used by withScriptjs, it gets rendered while it’s async-loading the google scripts, url used by GoogleMap to download the script from, include your API key).

One of my users got this error today as well actually, even though I’m wrapping it correctly. Or at least it has been working for months (see below). Could there be a possible race condition/timeout case which could cause this?

const AsyncGoogleMap = _.flowRight(
  withScriptjs,
  withGoogleMap,
)(props => (
  <GoogleMap
    ref={props.onMapLoad}
    [...]
  >
    [...]
  </GoogleMap>
));

class MyComponent extends React.Component {
  <AsyncGoogleMap
    googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.25&libraries=geometry,drawing,places&key=<key goes here>"
    [...]
  />
}

Make sure you run the script without “async defer” flag, otherwise it might not load in the correct order.

It solved the problem,Thank you

The withGoogleMap function doesn’t prevent “google is not loaded” error.

I proposed a solution to this in https://github.com/Piemontez/react-google-maps/blob/patch-1/src/withGoogleMap.jsx : 59.

In my case, my system operates offline too and this crash is right.

Our users have been receiving this error inconsistently in production.

We use withScriptJs and withGoogleMap hoc, though for unknown reasons, following links will break the code here: https://github.com/tomchentw/react-google-maps/blob/master/src/withGoogleMap.jsx#L59 while loading or reloading the page works just fine.

Any suggestion will be greatly appreciated!

If you already follow every comment in this page, you can try this solutions (IF you are using create-react-app)

Stackoverflow : https://stackoverflow.com/questions/43714895/google-is-not-defined-in-react-app-using-create-react-app?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa

Looks like the issue is resolved when adding withScriptjs(withGoogleMap( … ))

It’s still happening on every other page load ReferenceError: google is not defined at n.value (withGoogleMap.js:149) althought I’m using withGoogleMap(props => (

http://ec2-18-196-246-145.eu-central-1.compute.amazonaws.com/

Something wrong with this library

@Bazze i think @ZephD has the right idea.