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

• 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

3 Answers 3

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.