Implementing google maps with react

Question

React newbie here, please bear with me : ) Hopefully this will be very simple to solve

For the moment, I am simply trying to get the map to appear on screen, but when I run the code, the page is completely blank, and even my other divs do not appear. Here is my code, put in a gist: https://gist.github.com/JoeyBodnar/f76c5d434d57c6cc6108513ad79d4cb7

A few things to note: 1) from project directory, i already ran npm install --save react-google-maps 2) the code to make the map appear is taken from here: https://github.com/tomchentw/react-google-maps

so what exactly am I doing wrong? is my declaration of "const GettingStartedGoogleMap" in the wrong place? or am I doing something wrong in the div?

also note, if I remove all google maps related code from that file, everything works as normal.

any help is appreciated, thanks

Edit, here is my code, still showing blank screen even hard coding height:

 return (
     <GettingStartedGoogleMap
 containerElement={
    <div style={{ height: `400px` }} />
 }
 mapElement={
 <div style={{ height: `400px` }} />
 }
 onMapLoad={_.noop}
 onMapClick={_.noop}
 markers={markers}
 onMarkerRightClick={_.noop}
/>
  );

Answer 1

This is an improved version of my previous answer

I've just tested your code, which contains lots of errors, undefined and unused variables! Therefore, you can use the following code instead, which is quite simple (this will let you through the current problem and show the map!)

First, install necessary libraries:

npm install --save google-map-react
npm install --save prop-types

Then, you may copy the whole thing below:

import React, { Component } from 'react';
import GoogleMapReact from 'google-map-react';

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

class MyClass extends Component {
  constructor(props){
    super(props);

  }

  render() {
    return (
      <GoogleMapReact
        defaultCenter={this.props.center}
        defaultZoom={this.props.zoom}
        style={{height: '300px'}}
      >
        <AnyReactComponent
          lat={59.955413}
          lng={30.337844}
          text={'Google Map'}
        />
      </GoogleMapReact>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

Answer 2

set height of the <div style={{ height: 400px }} /> in pixels.

    <GettingStartedGoogleMap
     containerElement={
        <div style={{ height: `400px` }} />
   }
   mapElement={
     <div style={{ height: `400px` }} />
   }
   onMapLoad={_.noop}
   onMapClick={_.noop}
   markers={markers}
   onMarkerRightClick={_.noop}
  />