Having an issue setting up react google maps

Question

I am getting multiple errors and have no clue where to go from there.

Required props containerElement or mapElement is missing. You need to provide both of them.

The google.maps.Map instance will be initialized on mapElement and it's wrapped by containerElement. You need to provide both of them since Google Map requires the DOM to have height when initialized.

These are all the errors showing. I looked at the documentation and I know I am probably setting this up wrong, but I don't really know what to do from the documentation.

Here is the code:

GoogleMapPage:

import React, { Component } from 'react';

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
const googleMapURL =
  'https://maps.googleapis.com/maps/api/js?v=3.27&libraries=places,geometry&key=AIzaSyA7XEFRxE4Lm28tAh44M_568fCLOP_On3k';

const GettingStartedGoogleMap = withGoogleMap(props =>
  <GoogleMap
    ref={props.onMapLoad}
    defaultZoom={3}
    defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    googleMapURL={googleMapURL}
    onClick={props.onMapClick}
  >
    {props.markers.map(marker =>
      <Marker
        {...marker}
        onRightClick={() => props.onMarkerRightClick(marker)}
      />
    )}
  </GoogleMap>
);

class GettingStartedExample extends Component {
  render() {
    return (
      <GettingStartedGoogleMap
        containerElement={<div style={{ height: `100%` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    );
  }
}
export default withGoogleMap(GettingStartedExample);

App.js:

import React, { Component } from 'react';

import GettingStartedExample from './components/GoogleMapPage';

class App extends Component {
  render() {
    return (
      <div>
        <GettingStartedExample />
      </div>
    );
  }
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

Answer 1

You have export default withGoogleMap(GettingStartedExample);

containerElement and mapElement have to be props outside of withGoogleMaps to not throw the error for me. Does it work as: export default GettingStartedExample;