Rendering a Google Map without react-google-map

Question

Has anyone been able to render a google map using React and not using the react-google-map plugin? I\'m trying something like this:

var MapTab = React.creat         


        

Answer 1

You can render a google map easily using React Refs Which are an ideal solution when integrating with third party libraries. Like this:

class App extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      // no state for now..
    }

    // Use createRef() to create a reference to the DOM node we want
    this.myMapContainer = React.createRef()
  }

  componentDidMount() {
    // Instead of using: document.getElementById, use the ref we created earlier to access the element
    let map = new google.maps.Map(this.myMapContainer.current, {
      center: { lat: -34.9973268, lng: -58.582614 },
      scrollwheel: false,
      zoom: 4
    })
  }

  render() {
    return (
      

        

        
Google Maps now requires the use of a valid API Key.
          That's why you see the popup window "This page can't load Google Maps correctly."
          Go get one!
        
      
    )
  }
}

Working Example here

Note: Don't forget to place the