google is not defined in react app using create-react-app

Question

I create a react app using the cli called create-react-app. Look like Facebook did lots of things underneath, such as webpack etc. However, I guess it may also has some limi

Answer 1

I think the google variable is already available when you import google map from script in html. This error caused by Eslint, you can try and add the below line to the top of your file to disable ESlint

/*global google*/

Answer 2

I have a better solution then @Dan's you can do it like this

window.google = window.google ? window.google : {}

OR

const google = window.google = window.google ? window.google : {}

If google is available then no problem if not then empty will be assigned till your scripts are loaded.

Answer 3

As mentioned in the user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:

const google = window.google;

The reason we enforce this is because people commonly misunderstand the difference between local variables, imported modules, and global variables, and so we want to always make it clear in the code when you use a global variable.

By the way, this is not related to Webpack or HTTPS. You see this because we use a linting rule that forbids unknown global variables.

Answer 4

Hi you can use withGoogleMap like so:

import { withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps";

const google = window.google;

class MapComponent extends Component {
....

<GoogleMap>
.....
.....
.....
</GoogleMap>

export default withGoogleMap(MapComponent);