Google Maps React not loading

Question

I am showing a basic example of Google Maps React with a valid key but isntead of showing me the map it shows me a text saying "Loading map..."

import {GoogleApiWrapper, Map, MapProps} from 'google-maps-react';
import * as React from 'react'

export class MapContainer extends React.Component<MapProps> {

public render() {
  return (
    <Map 
        google={this.props.google} 
        centerAroundCurrentLocation={true}
        zoom={20}
    />
  );
 }
}

export default GoogleApiWrapper({
  apiKey: (API_KEY)
})(MapContainer)

There is no error in console log and anything.

Answer 1

First of all please make sure on the places you're including the MapContainer you're using the default export as follows:

import MapContainer from './pathToContainer/MapContainer'

Otherwise importing it via named export { MapContainer } you will skip GoogleApiWrapper HOC.

---

Also you may need to provide the width and height maps properties as follows:

<Map 
  style={{ width: '100%', height: '100%' }}
  google={this.props.google} 
  centerAroundCurrentLocation={true}
  zoom={20}
/>

Or you may need to style the map's wrapper div:

<div
  style={{
    position: "relative",
    height: "calc(100vh - 20px)"
  }}
>
  <Map 
    google={this.props.google} 
    centerAroundCurrentLocation={true}
    zoom={20}
  />
</div>

Here's a complete working example, taken from the docs.