title: Google Maps element is just grey in react app
body: <p>I'm using the <a href="https://github.com/tomchentw/react-google-maps" rel="nofollow noreferrer"><code>react-google-maps</code></a> package for react, and for some reason when it renders it's just grey. If the responsive state changes then it does appear weirdly.</p>
  
  <p><a href="https://i.stack.imgur.com/c24BD.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/c24BD.png" alt="when rendered"></a></p>
  
  <p>I've wrapped the package in a custom component for re-usablility, and the code is:</p>
  
  <pre><code>import _ from 'lodash';
  import exact from 'prop-types-exact';
  import propTypes from 'prop-types';
  import withScriptjs from 'react-google-maps/lib/async/withScriptjs';
  import { GoogleMap as GMap, withGoogleMap } from 'react-google-maps';
  import React, { Component } from 'react';
  
  const apiKey = 'api_key';
  
  const AsyncMap = _.flowRight(
      withScriptjs,
      withGoogleMap,
      )(props =&gt; (
          &lt;GMap
              defaultCenter={props.defaultCenter}
              defaultZoom={props.defaultZoom}
              onClick={props.onClick}
              ref={props.onMapLoad}
          &gt;
              {props.children}
          &lt;/GMap&gt;
      ));
  
  class GoogleMap extends Component {
      render() {
          return (
              &lt;AsyncMap
                  googleMapURL={`https://maps.googleapis.com/maps/api/js?v=3.exp&amp;key=${apiKey}`}
                  loadingElement={&lt;div&gt;{'loading...'}&lt;/div&gt;}
                  {...this.props}
              /&gt;
          );
      }
  }
  
  GoogleMap.propTypes = exact({
      containerElement: propTypes.object,
      defaultCenter: propTypes.object.isRequired,
      defaultZoom: propTypes.number,
      mapElement: propTypes.object,
      onClick: propTypes.func,
  });
  
  GoogleMap.defaultProps = {
      containerElement: (&lt;div style={{ height: '250px' }} /&gt;),
      mapElement: (&lt;div style={{ height: '250px' }} /&gt;),
      defaultZoom: 5,
      onClick: _.noop,
  };
  
  export default GoogleMap;
  </code></pre>
  
  <p>And it's called like so:</p>
  
  <pre><code>&lt;GoogleMap
      containerElement={&lt;div className={'overnight-storage-map'} style={{ height: '250px' }} /&gt;}
      defaultCenter={storageLocation}
      defaultZoom={3}
  &gt;
      &lt;Marker
          defaultAnimation={2}
          key={`marker-${s.id}`}
          position={storageLocation}
      /&gt;
  &lt;/GoogleMap&gt;
  </code></pre>