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 whe

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

npm modules like google-map-react

while debugging it all the divs are in absolute position

  width: 100%;
  height: 85vh;
  position: relative;

will fix the issue

Answer 3

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}
  />

Answer 4

The fact is: GoogleMap requires the length of element is correctly set before being rendered! Therefore, you can either:

• Set a static height for your map element: (line 62)

  mapElement={
    <div style={{ height: `300px` }} />
  }
  

  OR

• use script to set it dynamically after the page has been loaded:

  componentDidMount() {
      console.log("component is mounted");
      this.setState({
        pageHeight = document.documentElement.offsetHeight + 'px'
      });
  }
  ...
  mapElement={
    <div style={{ height: this.state.pageHeight }} />
  }        
  

Sorry I don't have enough time for testing your code, I can see the problem based on my own experience! So if the map doesn't show up yet, please feel free to set the height in pixel for your "containerElement" element, too!

EDITED VERSION BELOW:

Please read the new answer of mine