React Google Maps not working?

JavaScript
1

So I am trying to create a map component using the google maps API and React.

Following this tutorial:

My code looks like this:

import React from 'react';
import ReactDOM from 'react-dom';
import { Map, GoogleApiWrapper } from 'google-maps-react';

class App extends React.Component {
  render() {
    return (
      <div>
        <p>Hello Google Maps</p>
        <Map
          google={this.props.google}
        />
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ('MY_API_KEY')
})(App);

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

But there is no map rendering on the screen, just a div with the text Loading map....

Is there anything obvious that I’m doing wrong here? There are no error messages in the console. I have been trying to debug this for hours

2

Any suggestions on the above issue?

3

Are you sure your api key is correct ?

4

Yeah, I’ve used this key on other non-react projects and it works correctly

5

Try to add style={{width: '100%', height: '100%', position: 'relative'}} in Map component.

6

This is the npm package documentation: https://www.npmjs.com/package/google-maps-react
Try some examples in the link.

7

Hey, I’ve tried setting style style={{width: '100%', height: '100%', position: 'relative'}} and I tried a few of the examples in the link. No luck so far …

8

The examples works fine for me. It’s very strange.

9

So I have been attempting this using my own React/web pack boilerplate.

I just retried the above code using create React app instead and it all worked correctly :grin:

Which would suggest that the issue lies in my web pack setup. So I’ll investigate this further.

But that’s for your help @JivkoJelev91

1 Like