react google map returns empty element _ react

Question

this is my react Map component.

import GoogleMapReact from 'google-map-react';


this.state = {
            center: {
                lat: 59.95,
                lng: 30.33
            },

        }
<div  style={{ height: '100vh', width: '100%', position:"absolute" }}>
                <GoogleMapReact
                    bootstrapURLKeys={{ key: "some token" }}
                    defaultCenter={this.props.center}
                    defaultZoom={16}
                >  
                </GoogleMapReact>
            </div>

but nothing renders .why? in github page documentation they said parrent element must have an absolute position with '100vh', width: '100%'. nothing shows On page .

Well `defaultCenter={this.props.center}` is most likely undefined. Guess you want to change that to `defaultCenter={this.state.center}` — Björn Böing, Apr 30 '19 at 12:09

score 0 · Answer 1 · answered Apr 30 '19 at 12:19

Try this

import GoogleMapReact from 'google-map-react'

const SomeText = ({ text }) => <div>{ text }</div>;

<div className='google-map' style={{width:'100%',height:'400px',margin:'auto'}}>
    <GoogleMapReact defaultCenter={ this.props.center } defaultZoom={16}>
        <SomeText lat={ this.props.center.lat } lng={ this.props.center.lng } text={ 'Here you are?' } />
    </GoogleMapReact>
</div>

My map doesn't appear!

Make sure the container element has width and height. The map will try to fill the parent container, but if the container has no size, the map will collapse to 0 width / height. This is not a requirement for google-map-react, its a requirement for google-maps in general.

react google map returns empty element _ react

1 Answers1