Error with react-map:"Did you wrap <GoogleMap> component with withGoogleMap() HOC?"

Question

I am starting a web app using react-google-maps. I just begun coding it and I am getting this error:

Did you wrap <GoogleMap> component with withGoogleMap() HOC?
▶ 21 stack frames were collapsed.
./src/index.js
src/index.js:7
   4 | import App from './App';
   5 | import registerServiceWorker from './registerServiceWorker';
   6 | 
>  7 | ReactDOM.render(<App />, document.getElementById('root'));
   8 | registerServiceWorker();
   9 | 
  10 | 
View compiled
▶ 6 stack frames were collapsed.

Here's the code:

class App extends Component {
  render() {
    return (
      <div className="App">
          <GoogleMap/>
      </div>
    );
  }
}

export default App;

Obviously there's nothing wrong with the code and might be a version problem. Here's my dependencies:

"react": "^16.4.0",
"react-dom": "^16.4.0",
"react-google-maps": "^9.4.5",
"react-scripts": "1.1.4"

Any ideas?

Answer 1

Add

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_KEY></script>

in your html file and you should be fine (change they key of course).

Or wrap the script via withScript() like so:

import withScriptjs from 'react-google-maps/lib/async/withScriptjs';


const myMap = withScriptjs(withGoogleMap((props) => 
(<GoogleMap />)));