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.Mapinstance 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();