React-google-maps: Map not rendering

[Sachavent]

Hi,

My map is not rendering (I have a "blank screen").

Otherwise, I don't have any error in the console...

I added " <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=MY_KEY"></script>" in public\index.html

Here is my Js file:

import React, {Component } from 'react';
import logo from './logo.svg';
import './App.css';

import { withGoogleMap ,
    GoogleMap,
    } from "react-google-maps";


const GettingStartedGoogleMap = withGoogleMap(props => (
    <GoogleMap
        defaultZoom={3}
        defaultCenter={{ lat: -25.363882, lng: 131.044922 }}
    >
    </GoogleMap>
));

class App extends Component {

    render() {

    return (

        <div style={{height: `100%`}}>
            <GettingStartedGoogleMap
                containerElement={
                    <div style={{ height: `100%` }} />
                }
                mapElement={
                    <div style={{ height: `100%` }} />
                }
            />
      </div>
    );
  }
}

export default App;

Thanks a lot for your help

[Sachavent]

I found a solution...

I changed the style of the container and the map like that :

 containerElement={
                    <div style={{    position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                        justifyContent: 'flex-end',
                        alignItems: 'center',}} />
                }
                mapElement={
                    <div style={{    position: 'absolute',
                        top: 0,
                        left: 0,
                        right: 0,
                        bottom: 0,
                   }} />
                }

[Pentatonic]

@Sachavent I ran into the same problem with the demo example.

[Sachavent]

@Pentatonic did you add my style?

To display a Mapview, you need "position : 'absolute' " (position relative may also work)

[tomchentw]

Please refer to Getting Help section in the README (or #469).