React-google-maps: google is not defined?

Created on 2 Jan 2017 · 42Comments · Source: tomchentw/react-google-maps

Hey, I keep getting a reference error for google in the withGoogleMap at line 101.

Uncaught ReferenceError: google is not defined - withGoogleMap.js:101

Does anyone know how to remedy this error?

Source

sho13

Most helpful comment

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 */.

davidpatters0n on 19 Feb 2017

👍81 ❤27 🎉18 👎18 😕8

All 42 comments

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>)
)

max8hine on 4 Jan 2017

👎3

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 />)));

ZephD on 6 Jan 2017

👍30

@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.

josephmisiti on 1 Feb 2017

👍5 👎1

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>"
    [...]
  />
}

Bazze on 15 Feb 2017

👍2

@Bazze i think @ZephD has the right idea.

sho13 on 15 Feb 2017

👍1

@sho13 I'm not so sure. The whole idea with the withScriptJs is to load the Google Maps SDK async and when done load the map, right? I only want to include the Google Maps stuff if the user actually visits that page where I display a map. It's working perfectly, but today 1 user encountered this error so something strange might be going on here?

Bazze on 15 Feb 2017

Can you find out where in withScripts google is used but not defined?

ZephD on 16 Feb 2017

@ZephD On the exact same line as reported in this issue.

node_modules/react-google-maps/lib/withGoogleMap.js in google at line 101:0

Which is:

var map = new google.maps.Map(node);

Bazze on 16 Feb 2017

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 */.

davidpatters0n on 19 Feb 2017

👍81 ❤27 🎉18 👎18 😕8

@davidpatters0n solution did the trick for me!

nodox on 9 Jul 2017

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).

ZephD on 9 Jul 2017

👍16 🎉5 😄5 🚀1 ❤1

The eslint issue is _not_ the problem.

you're likely not including the necessary google maps script.

oshalygin on 11 Jul 2017

@ZephD whenever I insert

I just get "unterminated string literal" and it messes with the rest of the code. Any ideas? I've tried to change "" to "" and also tried changing it to "" but neither worked. Thanks.

Where are you trying to add this script? It should go into your index.html or equivalent entrypoint HTML file.

Please refer to the updated README documentation:
Getting Started

oshalygin on 26 Jul 2017

Missing " after YOUR_KEY

ZephD on 28 Jul 2017

@sho13 Were you able to solve it? I am facing the exact same issue.
I followed the async example.

error log:

Warning: Make sure you've put a <script> tag in your <head> element to load Google Maps 
JavaScript API v3. If you're looking for built-in support to load it for you, use the 
"async/ScriptjsLoader" instead. See https://github.com/tomchentw/react-google-maps/pull/168

withGoogleMap.js:106 Uncaught ReferenceError: google is not defined
    at Container.handleComponentMount (withGoogleMap.js:106)
    at attachRef (ReactRef.js:20)
    at Object.ReactRef.attachRefs (ReactRef.js:42)
    at ReactDOMComponent.attachRefs (ReactReconciler.js:23)
    at CallbackQueue.notifyAll (CallbackQueue.js:76)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:80)
    at ReactReconcileTransaction.closeAll (Transaction.js:209)
    at ReactReconcileTransaction.perform (Transaction.js:156)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:143)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:89)

running [email protected]

subhamagr on 11 Aug 2017

Wrap your component with withScriptjs() and it should only load if google is available.

ZephD on 11 Aug 2017

@ZephD " it should only load if google is available." how? I have followed the async example. Can you please give an example?

subhamagr on 11 Aug 2017

See https://github.com/tomchentw/react-google-maps/issues/414#issuecomment-270935666

ZephD on 11 Aug 2017

I'm getting errors about missing props using the aforementioned technique.

Code:

import { withGoogleMap, GoogleMap, InfoWindow, Marker } from 'react-google-maps';
import withScriptjs from 'react-google-maps/lib/async/withScriptjs';


const Map = withScriptjs(withGoogleMap(props => (
  <GoogleMap
    defaultZoom={17}
    center={props.center}
  >
    { ... handling markers here, unrelated ... }
  </GoogleMap>
)));

I have the script reference in my index.html.

Here is the error message: Uncaught Error: Required props loadingElement or googleMapURL is missing. You need to provide both of them. It's also The prop 'googleMapURL' is marked as required in 'withScriptjs(withGoogleMap(Component))', but its value is 'undefined'. Were props added between now and 23 days ago?

Running [email protected]

Edit: same on [email protected]

dylmye on 3 Sep 2017

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).

ZephD on 4 Sep 2017

👍3

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

ArtemKislov on 17 Sep 2017

👍46 😄15 ❤13 🎉12 👎1

Excellent!

dineshsdm on 12 Jan 2018

I am getting the error google is not defined for following code:

`import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker
} from "react-google-maps";
import { compose, withProps } from "recompose";
import { MarkerWithLabel } from "react-google-maps/lib/components/addons/MarkerWithLabel";

export const Map = compose(
  withProps({
    googleMapURL:
      "https://maps.googleapis.com/maps/api/js?key=key&v=3.exp&libraries=geometry,drawing,places",
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px`,width: '700px', marginLeft: '100px' }} />,
    mapElement: <div style={{ height: `100%` }} />
  }),
  withScriptjs,
  withGoogleMap
)(props => (
  <GoogleMap defaultZoom={4} defaultCenter={{ lat: 38.667140, lng: -99.406363 }}>
      <MarkerWithLabel
      position={{ lat: 38.667140, lng: -99.406363 }}
      labelAnchor={new google.maps.Point(0, 0)}
      labelStyle={{backgroundColor: "yellow", fontSize: "14px", padding: "5px"}}
    >
      <div>Opco</div>
    </MarkerWithLabel>

  </GoogleMap>
));`

arunrajnov3 on 15 Feb 2018

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

ZephD on 15 Feb 2018

👍3

does anyone was able to solve this? i'm getting

Cannot read property 'maps' of undefined
var map = new google.maps.Map(node)

withGoogleMap. js line 149

I tried to change this line to

var map = new window.google.maps.Map(node)
didn't help
const DestinationsMapComponent = compose(
withProps({
googleMapURL: "https://maps.googleapis.com/maps/api/js key='MYKEY'&libraries=places",
loadingElement:

100% }} />,
containerElement:

400px }} />,
mapElement:

100% }} />,
}),
withScriptjs,
withGoogleMap
)((props) =>
....
....
....

yoavgecht on 2 Mar 2018

ok I think I solved it.
call the maps api on the head of index.js

then on the map component just use it like this:

const yourComponent = withGoogleMap(props => (
defaultCenter={props.center}
defaultZoom={props.zoom}
.....
.....
/>
));

It solves the refresh google is not defined problem. app will no more crash on refresh

yoavgecht on 2 Mar 2018

You mean your error occurs here?
https://github.com/tomchentw/react-google-maps/blob/master/src/withGoogleMap.jsx#L59
If so, you should have got a warning.

Great you solved it, but the compose version should have done the same thing.

ZephD on 2 Mar 2018

With compose google was undefined on withGoogleMap.js file, because I didn't reference maps api on index head. Once I reference the maps api on the head it complained I called the maps api multipile times. and also was crahing every 2nd refresh. bad cycle.

yoavgecht on 2 Mar 2018

That's because you continued to use "withScriptjs". Either use the head script, or withScripjs.
It's still strange that the error occurred on that line with withScriptjs alone, though.

ZephD on 2 Mar 2018

I don't know I did exactly like step 5 in the documentation and still google was undefined. sorry it was not defined

yoavgecht on 2 Mar 2018

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

CodingToBeWithHer on 8 Mar 2018

👍6

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

yoavgecht on 8 Mar 2018

👍1

you need withScriptjs(withGoogleMap( ... ))

ZephD on 9 Mar 2018

@oshalygin is this issue ok to lock as it's been solved?

dylmye on 9 Mar 2018

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

yoavgecht on 11 Mar 2018

👍1

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

jwm0 on 23 Mar 2018

👍3 ❤1 🎉1

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

Alfreddatui on 28 Apr 2018

👍1

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!