title: Google Maps React stuck in 'loading map...'
body: <p>I created a component called MapContainer and my MapContainer.js looks like this:</p>
  
  <pre><code>import { Map, GoogleApiWrapper } from 'google-maps-react';
  import React from 'react';
  import '../css/MapContainer.css';
  
  const MapContainer = ({ t }) =&gt; (
      &lt;Map class="location_map"
      google={t.google}
      zoom={8}
      initialCenter={{ lat: 47.444, lng: -122.176}}/&gt;
  )
  
  export default GoogleApiWrapper({
      apiKey: '...'
  })(MapContainer);
  </code></pre>
  
  <p>Then I import this component into another .js called Details.js.
  File's very long so I only put the parts related to the MapContainer.</p>
  
  <pre><code>import MapContainer from '../components/MapContainer';
  </code></pre>
  
  <p>...</p>
  
  <p>Then inside the render part:</p>
  
  <pre><code>            &lt;div class="polaroid_des"&gt;
                  &lt;div class="container-list"&gt;
                      &lt;p class="polaroid_title"&gt;{t('details.location')}&lt;/p&gt;
                      &lt;MapContainer t={t} /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;  
  </code></pre>
  
  <p>And I end up exporting it as:</p>
  
  <pre><code>export default withTranslation()(Details);
  </code></pre>
  
  <p>Turns out I only get 'Loading map...' when I run my site. What's happening?</p>