In React Google Maps, Getting "'google' Is Not Defined" Even When Component Is Wrapped With Withscriptjs?

I'm trying to reproduce the example in https://tomchentw.github.io/react-google-maps/#groundoverlay in a React project created with create-react-app; what I have so far is at https

Solution 1:

You need to define for eslint that google is the global variable like

/* global google */

You can put this at the top of the file where you use

defaultBounds={new google.maps.LatLngBounds(
    new google.maps.LatLng(40.712216, -74.22655),
    new google.maps.LatLng(40.773941, -74.12544)
)}

To make your code work, you need to also export correctly component from the groundOverlay.js file, like this:

/* global google */importReactfrom'react';

const { compose } = require("recompose");
const {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  GroundOverlay,
} = require("react-google-maps");

constMapWithGroundOverlay = compose(
  withScriptjs,
  withGoogleMap
)(props =><GoogleMapdefaultZoom={12}defaultCenter={{lat:40.740, lng:-74.18}}
  ><GroundOverlaydefaultUrl="https://www.lib.utexas.edu/maps/historical/newark_nj_1922.jpg"defaultBounds={newgoogle.maps.LatLngBounds(
        newgoogle.maps.LatLng(40.712216, -74.22655),
        newgoogle.maps.LatLng(40.773941, -74.12544)
      )}
      defaultOpacity={.5}
    /></GoogleMap>
);

exportdefaultMapWithGroundOverlay;

When you do this, it should work, screen below.

I will create a PR to your repo, so you will can merge it and continue working.

Pull request created: https://github.com/khpeek/trailmaps/pull/1

Solution 2:

Sing google is a global variable, you need to read it explicitly using window this way

const google = window.google;

or you can directly access it

newwindow.google.maps.LatLngBounds()

The ESlint fix can be done this way by declaring it at the top of your file

/*global google*/

Solution 3:

try to use declare var google; before @Component

Example:

importReact, { Component } from'react';
import'./App.css';
importMapWithAnOverlayViewfrom'./components/overlayView';
importMapWithGroundOverlayfrom'./components/groundOverlay';

declarevar google;

classAppextendsComponent {

}