Error adding Google Maps with react - TypeError: Cannot read property 'maps' of undefined

Question

// App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Map from "./Map.js"


class App extends React.Component {



  constructor(props) {
    super(props);

    this.loadScript = this.loadScript.bind(this);
  }

  loadScript() {

    const API_KEY = process.env.REACT_APP_API_KEY;
    const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

    const s = document.createElement("script");
    s.src = url;
    document.head.appendChild(s);
  }

  componentWillMount() {

    this.loadScript();

  }


  render() {

    return (

      <div>

        <Map />


      </div>


    );

  }
}

export default App;

//Map.js

import React from "react"

export default class Map extends React.Component {

    constructor(props) {
        super(props);

        this.loadMap = this.loadMap.bind(this);
    }

    loadMap() {

        const map = new window.google.maps.Map(document.getElementById('map'), {
            center: { lat: -34.397, lng: 150.644 },
            zoom: 8
        });
    }

    componentWillMount() {

        this.loadMap();
    }


    render() {


        return (


            <div id="map" style={{ width: 100, height: 100 }}></div>

        );

    }




}

Hi there, I am totally new to React, I am trying to load Google Maps without the help of a third-party library.

I have dynamically created a script tag and inserted it into the DOM. I am getting this error, trying to access the variables in the script.

My guess is that 'maps' is being accessed before the script is loaded. I am lost, on how to fix this error.

The solution on this question (stackoverflow.com/questions/47421602/…) will fix your problem that is related to access google before google script is loaded. — MohammadAmin Mohammadi
– MohammadAmin Mohammadi, Commented Apr 14, 2020 at 20:05

Anna Miroshnichenko · Accepted Answer · 2020-04-14 19:45:57Z

1

When you load a script programmatically you can listen for "onload" event and do the rest of your logic when the script will be loaded. In this case, your loadScript function might look like this:

loadScript() {

  const API_KEY = process.env.REACT_APP_API_KEY;
  const url = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&libraries=places`;

  const s = document.createElement("script");
  s.src = url;
  document.head.appendChild(s);
  s.onload = function(e){
     console.info('googleapis was loaded');            
  }
}

You can add a scriptLoaded state to your App component and change it in the onload function, in this case, you need to render only if scriptLoaded is true :

  <div>
    {this.state.scriptLoaded && <Map />}
  </div>

edited Apr 14, 2020 at 19:45

answered Apr 14, 2020 at 19:39

Anna Miroshnichenko

1,2131 gold badge9 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Marry Joanna Over a year ago

I get "A cross-origin error was thrown. React doesn't have access to the actual error object in development. " error.. Only when I try to render the map {this.state.isLoaded && <Map /> } if I instead write {this.state.isLoaded && <h1>True</h1> } .. it Displays the heading.

Anna Miroshnichenko Over a year ago

In your <Map/> component you call the loadMap method in the componentWillMount , at that time your component wasn't rendered yet, try to change it to componentDidMount.

Collectives™ on Stack Overflow

Error adding Google Maps with react - TypeError: Cannot read property 'maps' of undefined

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related