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