Google-map-react: Map Not Showing At All

Created on 13 Oct 2016  路  3Comments  路  Source: google-map-react/google-map-react

I installed the google-map-react and the map not showing. This code is my map component.

`
import React, { Component } from 'react';
import GoogleMap from 'google-map-react';
import MyGreatPlace from './map-pin.jsx';
import { fitBounds } from 'google-map-react/utils';
import shouldPureComponentUpdate from 'react-pure-render/function';

export default class RestoMap extends Component {

static defaultProps = {
center: [59.938043, 30.337157],
zoom: 9,
greatPlaceCoords: {lat: 59.724465, lng: 30.080121}
};

shouldComponentUpdate = shouldPureComponentUpdate;

constructor(props) {
    super(props);
}

render() {

    const bounds = {
    nw: {
        lat: 50.01038826014866,
        lng: -118.6525866875
    },
    se: {
        lat: 32.698335045970396,
        lng: -92.0217273125
    }
    };

    const size = {
    width: 640, // Map width in pixels
    height: 380, // Map height in pixels
    };

    const {center, zoom} = fitBounds(bounds, size);

    return (
        <GoogleMap
            bootstrapURLKeys={{ key: _apiMapKey, language: 'ru' }}
            center={center}
            zoom={zoom}>
            <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /* Kreyser Avrora */ />
            <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /* road circle */ />
        </GoogleMap>
    );
}

}`

Most helpful comment

In most cases this is because map parent container has zero height.

All 3 comments

In most cases this is because map parent container has zero height.

Thanks! that was a quick response. I set a

with height as the parent container of the component.

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings