React, accessing a var from a script in a component

Question

I have been trying to import an external library (google Maps) in order to use it in a React component

index.html file

<div id="app"></div>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>

react file

  componentDidMount() {
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }

The error I get is:

Uncaught ReferenceError: google is not defined

I have tried everything but nothing seems to be working. How do I access the variable from this script inside my component?

This is just an example, please do not tell me to use one of the NPM packages for React Google Maps.

Thanks, Harris

Did you load your component before importing google map api ? — Olivier Boissé, Jan 06 '17 at 15:12
@TMitchell I tried your solution even inside the head and body but same error occurs. — Eristikos, Jan 06 '17 at 15:16

Darkisa · Answer 1 · 2020-03-03T19:31:48.623

A little late to the party but I also had this issue and for me it was caused by eslint. To disable it just add the comment /*global google*/ above where you declare the variable and it should work e.g.

  componentDidMount() {
    /*global google*/ // To disable any eslint 'google not defined' errors
    this.map = new google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }

You can also use the window object to make the call:

  componentDidMount() {
    /* Use new window.google... instead of new google... */
    this.map = new window.google.maps.Map(this.refs.map, {
      center: {lat: this.props.lat, lng: this.props.lng},
      zoom: 8
    });   
  }

    render() {
      return <div>
        <p>I am a map component</p>
        <div id="map" ref="map"/>
      </div>
    }

score 3 · Answer 2 · answered Oct 16 '19 at 09:57

In general you can import a script with the following:

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";
document.head.appendChild(aScript);

NOTE: Before you can use the variable, the script has to load in!

After the script is loaded you can use a variable from the script with

window.variable

(in this case)

window.google.maps.whatever

If you want to use a variable directly after a script is imported (on page load etc) you can do something like this:

let aScript = document.createElement('script');
aScript.type = 'text/javascript';
aScript.src = "link to script";

document.head.appendChild(aScript);

aScript.onload = function() {
    window.variableFromScript.whatever
}

window.google did the trick for me // I placed the – williamsi Oct 22 '19 at 16:13 — williamsi, Oct 22 '19 at 16:13

score 2 · Accepted Answer · answered Jan 06 '17 at 15:18

2

The error is because the google api is not loaded before your React Component is loading.

Place the script tag for google in the header, before loading your react scripts.

<head>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY_GOES_HERE&callback=initMap" async defer>

    <!-- React scripts here -->
</head>

If you're still having trouble, try adding a debugger; line in didComponentMount() function and check in the console if google is loaded and available.

answered Jan 06 '17 at 15:18

Phil Poore

2,086
19
30

Can you post your whole html file? Should be in this order: - Google script in head, then: - React lib script in head, then: - In body, `div#app`, then: - App JS file end of body – Phil Poore Jan 06 '17 at 15:19
1

I don't know how this didn't work earlier but this time it did work. Thank you very much – Eristikos Jan 06 '17 at 15:23
@Eristikos perhaps the script is now cached and loading quicker. I would suggest removing the async attribute, there's a possible race condition here – T Mitchell Jan 06 '17 at 16:08

React, accessing a var from a script in a component

3 Answers3

Linked