Implementing google maps with react

Question

React newbie here, please bear with me : ) Hopefully this will be very simple to solve

For the moment, I am simply trying to get the map to appear on screen, but whe

Answer 1

The fact is: GoogleMap requires the length of element is correctly set before being rendered! Therefore, you can either:

• Set a static height for your map element: (line 62)

  mapElement={
    
  
  }
  

  OR

• use script to set it dynamically after the page has been loaded:

  componentDidMount() {
      console.log("component is mounted");
      this.setState({
        pageHeight = document.documentElement.offsetHeight + 'px'
      });
  }
  ...
  mapElement={
    
  
  }        
  

Sorry I don't have enough time for testing your code, I can see the problem based on my own experience! So if the map doesn't show up yet, please feel free to set the height in pixel for your "containerElement" element, too!

EDITED VERSION BELOW:

Please read the new answer of mine