Search code examples
javascriptreactjsgoogle-maps-react

Google Maps React stuck in 'loading map...'

I created a component called MapContainer and my MapContainer.js looks like this:

import { Map, GoogleApiWrapper } from 'google-maps-react';
import React from 'react';
import '../css/MapContainer.css';

const MapContainer = ({ t }) => (
    <Map class="location_map"
    google={t.google}
    zoom={8}
    initialCenter={{ lat: 47.444, lng: -122.176}}/>
)

export default GoogleApiWrapper({
    apiKey: '...'
})(MapContainer);

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.

import MapContainer from '../components/MapContainer';

...

Then inside the render part:

            <div class="polaroid_des">
                <div class="container-list">
                    <p class="polaroid_title">{t('details.location')}</p>
                    <MapContainer t={t} />
                </div>
            </div>

And I end up exporting it as:

export default withTranslation()(Details);

Turns out I only get 'Loading map...' when I run my site. What's happening?

Solution

  • Had the same problem like 2 days ago. This library is out-of-date and not maintained anymore. I'd suggest you to use google-map-react instead. I found that library much more solid.

    Github: https://github.com/google-map-react/google-map-react

    NPM: https://www.npmjs.com/package/google-map-react