javascript - React, accessing a var from a script in a component - Stack Overflow

admin 管理员组

文章数量: 1184232

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=";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

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

• javascript
• google-maps
• reactjs

Share Improve this question Follow edited Jan 6, 2017 at 15:19 harrisgeo asked Jan 6, 2017 at 15:00 harrisgeoharrisgeo 51555 gold badges99 silver badges2525 bronze badges 4

• Try moving the google <script> include above your app javascript file and load it synchronously. This isn't the best way, but should fix your problem if you don't want to use the NPM package – T Mitchell Commented Jan 6, 2017 at 15:05
• Did you load your component before importing google map api ? – Olivier Boissé Commented Jan 6, 2017 at 15:12
• @TMitchell I tried your solution even inside the head and body but same error occurs. – harrisgeo Commented Jan 6, 2017 at 15:16
• Do you use webpack? – blckt Commented Jan 6, 2017 at 15:20

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 12

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

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
}

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.

本文标签： javascriptReact accessing a var from a script in a componentStack Overflow