google-map-react not showing up

Question

I am trying to implement google-map-react but the map is not showing up and I couldn't find the answer to my problem. I have set both height and width and markers are showing up but the map is not. Any idea?

What I see on screen: https://ibb.co/LN1CK3X

<div className="results__map-handler">
    <GoogleMapReact
         bootstrapURLKeys={{key: 'MY_KEY'}}
         defaultCenter={{lat: 59.95, lon: 30.33}}
         defaultZoom={11}
    >
         <AnyReactComponent
             lat={59.955413}
             lng={30.337844}
             text={'MY MARKER'}
         />
    </GoogleMapReact>
</div>

.results__map-handler {
     width: 100%;
     height: 100vh;
}

Answer 1

It looks like you misspelled "lng" with "lon" in defaultCenter={{lat: 59.95, lon: 30.33}} . Your code works when you amend this, check this working jsbin . Code below.

const AnyReactComponent = ({ text }) => (
  <div style={{
    color: 'white', 
    background: 'grey',
    padding: '15px 10px',
    display: 'inline-flex',
    textAlign: 'center',
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: '100%',
    transform: 'translate(-50%, -50%)'
  }}>
    {text}
  </div>
);

class SimpleMap extends React.Component {
  static defaultProps = {
    center: {lat: 59.95, lng: 30.33},
    zoom: 11
  };

  render() {
    return (
     <div className="results__map-handler" style={{width: '100%', height: '100vh'}}>
       <GoogleMapReact
         defaultCenter={{lat: 59.95, lng: 30.33}}
         defaultZoom={11}
         bootstrapURLKeys={{key: 'YOUR_API_KEY'}}
      >
        <AnyReactComponent 
             lat={59.955413}
             lng={30.337844}
             text={'MY MARKER'}
        />
      </GoogleMapReact>
      </div>
    );
  }
}

ReactDOM.render(
    <SimpleMap/>,
  document.getElementById('main')
);

Hope this helps!