0

I use Google Maps in my React app and handle all Maps API stuff in a util file.

In my index.html page, I link to Google Maps library -- see below:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?libraries=places&key=my_api_key"></script>

The problem I'm having is that in my util file, I'm getting "google is not defined" error -- see below. enter image description here

How do I handle this? I'm linking to Google Maps library so I don't think I can import anything because it's not an npm package.

Sam
  • 26,817
  • 58
  • 206
  • 383
  • It's just a linting error, not an application error. You can add a lint comment to the top of the file to ignore this lint rule (recommended) or you can update your lint rules to allow `no-undef` (not recommended). https://stackoverflow.com/questions/27732209/turning-off-eslint-rule-for-a-specific-line – Chase DeAnda Jan 20 '20 at 18:43

2 Answers2

2

Try adding window as a prefix:

const map = new window.google.maps.Map(document.createElement('div'));
BruceM
  • 1,549
  • 1
  • 18
  • 41
0

If you including google maps with <script> you will get this warning in components too because Google Maps API is added to the global object (window). You can use window.google instead, or move to npm package created for Google Maps for example google-maps-react, @react-google-maps/api, react-google-maps.

Deykun
  • 1,298
  • 9
  • 13