Error connecting google maps through script tag in react.js

I am developing an application on meteor.js and I need to connect the Google maps application only on the page. I do it in the class constructor.

class Map extends React.Component {
  constructor() {
    const script = document.createElement("script");
    script.src = "";
    script.async = true;
    script.defer = true;

    this.panToArcDeTriomphe = this.panToArcDeTriomphe.bind(this);
  componentDidMount() { = new google.maps.Map(, 
       { center: {lat:48.858608, lng:2.294471}, zoom:16 }
  panToArcDeTriomphe() {
    console.log(this){ lat:48.873947, lng:2.295038});
  render() {
    const mapStyle = {width:500, height:300, border:'1px solid black' };    
    return (
        <button onClick={this.panToArcDeTriomphe}>Go to</button>
        <div ref="map" style={mapStyle}>I should be a map</div>
ReactDOM.render(<Map />, document.getElementById('root'));

But I am get an error:

Uncaught ReferenceError: google is not defined

This example on codepen:

In what here there can be a problem? The script on the page is visible:

I don’t really React, but figured I’d give it a shot, just to see if I could figure it out =)

Borrowed a function from, and moved some things around. Hope it helps!

1 Like

Yes to work, this is what I need, thank you very much :slight_smile:.