google is not defined? #414

sho13 · 2017-01-02T19:46:40Z

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?

The text was updated successfully, but these errors were encountered:

max8hine · 2017-01-04T11:24:24Z

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

ZephD · 2017-01-06T16:02:33Z

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

josephmisiti · 2017-02-01T19:50:59Z

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

Bazze · 2017-02-15T20:45:46Z

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

sho13 · 2017-02-15T20:49:11Z

@Bazze i think @ZephD has the right idea.

Bazze · 2017-02-15T20:52:03Z

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

ZephD · 2017-02-15T23:02:25Z

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

Bazze · 2017-02-16T06:58:35Z

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

davidpatters0n · 2017-02-18T23:37:22Z

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

nodox · 2017-07-09T15:45:52Z

@davidpatters0n solution did the trick for me!

ZephD · 2017-07-09T17:59:13Z

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

oshalygin · 2017-07-10T23:03:55Z

The eslint issue is not the problem.

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

Karrsen · 2017-07-26T20:06:23Z

@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 "</script>" to "</script>" and also tried changing it to "</scr"+"ipt>" but neither worked. Thanks.

oshalygin · 2017-07-26T20:09:58Z

@Karrsen

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script>
I just get "unterminated string literal" and it messes with the rest of the code. Any ideas? I've tried to change "</script>" to "</script>" and also tried changing it to "</scr"+"ipt>" 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

ZephD · 2017-07-28T15:44:06Z

Missing " after YOUR_KEY

Autopilot9369 · 2017-08-11T10:46:30Z

@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 react-google-maps@7.2.0

ZephD · 2017-08-11T14:37:45Z

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

Autopilot9369 · 2017-08-11T14:41:48Z

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

ZephD · 2017-08-11T17:50:22Z

See #414 (comment)

dylmye · 2017-09-03T20:14:29Z

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 react-google-maps@7.0.0

Edit: same on react-google-maps@7.2.0

ZephD · 2017-09-04T12:23:48Z

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

ArtemKislov · 2017-09-16T22:02:26Z

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

dineshsdm · 2018-01-12T10:04:54Z

Excellent!

arunrajnov3 · 2018-02-15T11:20:28Z

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

ZephD · 2018-02-15T13:03:39Z

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

yoavgecht · 2018-03-02T13:34:58Z

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: <div style={{ height: 100% }} />,
containerElement: <div style={{ height: 400px }} />,
mapElement: <div style={{ height: 100% }} />,
}),
withScriptjs,
withGoogleMap
)((props) =>
<GoogleMap
....
....
....

yoavgecht · 2018-03-02T14:40:09Z

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 => (
<GoogleMap
defaultCenter={props.center}
defaultZoom={props.zoom}
.....
.....
/>
));

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

ZephD · 2018-03-02T14:41:44Z

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.

yoavgecht · 2018-03-02T14:45:40Z

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.

ZephD · 2018-03-02T14:51:12Z

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.

yoavgecht · 2018-03-02T14:55:35Z

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

CodingToBeWithHer · 2018-03-08T15:28:55Z

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

yoavgecht · 2018-03-08T21:13:29Z

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

ZephD · 2018-03-09T10:30:45Z

you need withScriptjs(withGoogleMap( ... ))

dylmye · 2018-03-09T11:46:44Z

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

yoavgecht · 2018-03-11T07:00:01Z

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

jwm0 · 2018-03-23T00:06:35Z

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

Alfreddatui · 2018-04-28T07:56:15Z

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

amangeot · 2018-05-21T16:01:48Z

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!

Piemontez · 2018-07-17T13:16:09Z

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.

AliIsmeal · 2018-09-24T18:36:19Z

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

terabytes · 2018-11-08T20:09:18Z

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

niiazemiluulu · 2022-08-18T20:41:21Z

LoooooooL, I was trying to solve that issue for the last hour. Just make sure to withScriptJs goes before withGoogleMaps

DavidAmyot · 2022-09-21T17:49:21Z

Our app still has classes and I found the easiest way was to create a wrapper component that uses the useJsApiLoader hook.

withGoogleMap.js

import React from "react";
import { useJsApiLoader } from "@react-google-maps/api";

export const withGoogleMap = (Component) => {
  const ComponentWithGoogleMapProp = (props) => {
    const { isLoaded, loadError } = useJsApiLoader({
      googleMapsApiKey: process.env.GOOGLE_MAPS_KEY,
    });

    return <Component {...props} googleMap={{ isLoaded, loadError }} />;
  };

  return ComponentWithGoogleMapProp;
};

SomeComponent.js

import { withGoogleMap } from "@utils/withGoogleMap";

class SomeComponent extends PureComponent {
  // ...

  render() {
    const { isLoaded, loadError } = this.props.googleMap;  

    return (
      {!loadError ? (
          isLoaded ? (
             <GoogleMap {...mapProps}>{this.renderMapMarkers()}</GoogleMap>
          ) : (
            <MapLoadingSpinner />
          )
        ) : (
          <MapErrorView />
        )}
      }
    )
  }


export default withGoogleMap(SomeComponent);

sho13 closed this as completed Feb 15, 2017

davidpatters0n mentioned this issue Feb 26, 2017

error 'google' is not defined no-undef #434

Closed

rdbll mentioned this issue Jul 5, 2018

Cannot find namespace 'google', 'Calculator', 'ClusterIconStyle' and 'Cluster' even with corresponding types installed #866

Closed

google is not defined? #414

google is not defined? #414

Comments

sho13 commented Jan 2, 2017

max8hine commented Jan 4, 2017 • edited Loading

ZephD commented Jan 6, 2017 • edited Loading

josephmisiti commented Feb 1, 2017

Bazze commented Feb 15, 2017

sho13 commented Feb 15, 2017

Bazze commented Feb 15, 2017

ZephD commented Feb 15, 2017 • edited Loading

Bazze commented Feb 16, 2017

davidpatters0n commented Feb 18, 2017 • edited Loading

nodox commented Jul 9, 2017

ZephD commented Jul 9, 2017

oshalygin commented Jul 10, 2017

Karrsen commented Jul 26, 2017

oshalygin commented Jul 26, 2017 • edited Loading

ZephD commented Jul 28, 2017 • edited Loading

Autopilot9369 commented Aug 11, 2017 • edited Loading

ZephD commented Aug 11, 2017

Autopilot9369 commented Aug 11, 2017 • edited Loading

ZephD commented Aug 11, 2017

dylmye commented Sep 3, 2017 • edited Loading

ZephD commented Sep 4, 2017

ArtemKislov commented Sep 16, 2017

dineshsdm commented Jan 12, 2018

arunrajnov3 commented Feb 15, 2018 • edited Loading

ZephD commented Feb 15, 2018 • edited Loading

yoavgecht commented Mar 2, 2018 • edited Loading

yoavgecht commented Mar 2, 2018

ZephD commented Mar 2, 2018

yoavgecht commented Mar 2, 2018 • edited Loading

ZephD commented Mar 2, 2018

yoavgecht commented Mar 2, 2018 • edited Loading

CodingToBeWithHer commented Mar 8, 2018

yoavgecht commented Mar 8, 2018

ZephD commented Mar 9, 2018

dylmye commented Mar 9, 2018 • edited Loading

yoavgecht commented Mar 11, 2018

jwm0 commented Mar 23, 2018

Alfreddatui commented Apr 28, 2018

amangeot commented May 21, 2018 • edited Loading

Piemontez commented Jul 17, 2018

AliIsmeal commented Sep 24, 2018

terabytes commented Nov 8, 2018

niiazemiluulu commented Aug 18, 2022

DavidAmyot commented Sep 21, 2022

max8hine commented Jan 4, 2017 •

edited

Loading

ZephD commented Jan 6, 2017 •

edited

Loading

ZephD commented Feb 15, 2017 •

edited

Loading

davidpatters0n commented Feb 18, 2017 •

edited

Loading

oshalygin commented Jul 26, 2017 •

edited

Loading

ZephD commented Jul 28, 2017 •

edited

Loading

Autopilot9369 commented Aug 11, 2017 •

edited

Loading

Autopilot9369 commented Aug 11, 2017 •

edited

Loading

dylmye commented Sep 3, 2017 •

edited

Loading

arunrajnov3 commented Feb 15, 2018 •

edited

Loading

ZephD commented Feb 15, 2018 •

edited

Loading

yoavgecht commented Mar 2, 2018 •

edited

Loading

yoavgecht commented Mar 2, 2018 •

edited

Loading

yoavgecht commented Mar 2, 2018 •

edited

Loading

dylmye commented Mar 9, 2018 •

edited

Loading

amangeot commented May 21, 2018 •

edited

Loading