title: react google map not appearing
body: <p>react-google-maps is not showing on screen. I have a Home component that is rendering a container MapNavigation component that is rendering view Map Component. Basically is Home -> MapNavigation -> Map</p>
  
  <p>I am trying to get a simple map showing up, but is not working. </p>
  
  <p>I am following this tutorial -> <a href="https://tomchentw.github.io/react-google-maps/basics/simple-map" rel="nofollow noreferrer">https://tomchentw.github.io/react-google-maps/basics/simple-map</a></p>
  
  <p>When I check the elements in the browser it shows that the div exists but it isn't populated with any map. </p>
  
  <p><a href="https://i.stack.imgur.com/Xk59M.png" rel="nofollow noreferrer">enter image description here</a></p>
  
  <p>What am I missing?</p>
  
  <p>Home.js </p>
  
  <pre><code>import React, {Component} from 'react';
  import {Posts, MapNavigation} from '../containers';
  
  
  class Home extends Component {
    render() {
      return (
        &lt;div className='container'&gt;
          Home Layout
          &lt;div className='row'&gt;
  
            &lt;div className='col-md-3'&gt;
              &lt;MapNavigation/&gt;
            &lt;/div&gt;
  
            &lt;div className='col-md-6'&gt;
              &lt;Posts/&gt;
            &lt;/div&gt;
            &lt;div className='col-md-3'&gt;
              Account
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Home
  </code></pre>
  
  <p>MapNavigation.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Map } from '../view';
  
  class MapNavigation extends Component {
    render () {
      return (
        &lt;div&gt;
          MapNavigation
          &lt;div&gt;
              &lt;Map /&gt;
          &lt;/div&gt;
  
  
        &lt;/div&gt;
      )
    }
  }
  
  export default MapNavigation;
  </code></pre>
  
  <p>Map.js</p>
  
  <pre><code>import React, {Component} from 'react';
  import { withGoogleMap, GoogleMap, Marker} from 'react-google-maps';
  
  class Map extends Component {
  
    render() {
  
      const GettingStartedGoogleMap = withGoogleMap( props =&gt; (
        &lt;GoogleMap
          defaultZoom={3}
          defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
          &gt;
  
  
        &lt;/GoogleMap&gt;
  
      ))
  
  
      return (
          &lt;GettingStartedGoogleMap
            containerElement={
              &lt;div style={{height: `100%`, width: `100%`}} /&gt;
            }
  
            mapElement={
              &lt;div style={{height: `100%`, width: `100%`}} /&gt;
            }
  
            /&gt;
      )
  
  
    }
  }
  
  export default Map;
  </code></pre>