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

Have you got some console errors ? A snippet could be a must — soywod, Apr 24 '17 at 05:35

thinhvo0108 · Accepted Answer · 2017-04-24T07:27:36.750

3

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;

edited Apr 24 '17 at 07:27

answered Apr 24 '17 at 07:14

thinhvo0108

2,212
1
13
23

1

You can also use the solution in my previous answer for setting map-height dynamically. I also suggest you read some document about React Component Life Cycle: https://facebook.github.io/react/docs/react-component.html#the-component-lifecycle – thinhvo0108 Apr 24 '17 at 12:08
Hey Can you provide a sample code for adding Markers dynamically, with a Image.. If Could I'll be very thankfull to you! – Gayan Kavirathne May 12 '17 at 12:09
@HelpingHand you may try: (change only 1 line) `const AnyReactComponent = ({ text }) =>
;` You can also add style in the react's way like: `style={{width: '100px', height: '100px',}}` If this works for you, please consider give me an up-vote too, thanks – thinhvo0108 May 12 '17 at 12:14
@thinhvo0108 That solved Adding Image! But can you give me a example how to add markers dynamically? Or I'll ask a question on that and send you the link? Thanks a lot! – Gayan Kavirathne May 12 '17 at 12:22
Hey @thinhvo0108 Here is the Link.. http://stackoverflow.com/questions/43937887/dynamically-adding-markers-on-react-google-map – Gayan Kavirathne May 12 '17 at 12:34

Ashh · Answer 2 · 2018-07-11T17:53:00.563

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

edited Jul 11 '18 at 17:53

answered Apr 24 '17 at 05:56

Ashh

44,693
14
105
132

score 2 · Answer 3 · answered Sep 26 '19 at 17:15

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

answered Sep 26 '19 at 17:15

Palash Gupta

390
3
10

thinhvo0108 · Answer 4 · 2017-04-24T07:12:59.830

1

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

edited Apr 24 '17 at 07:12

answered Apr 24 '17 at 05:44

thinhvo0108

2,212
1
13
23

I have tried that, but still the page renders a blank white screen, see my edit. – jjjjjjjj Apr 24 '17 at 06:46
I have just posted new edit, would you mind trying that again. Besides, if possible, please show me some errors in case the code doesn't work yet! (maybe you still need to install some missing react libraries or so) – thinhvo0108 Apr 24 '17 at 07:05
Sorry I've just added another edit: "npm install --save prop-types" It seems that the GoogleMap library I used in that example requires that library, so feel free to install it, too! – thinhvo0108 Apr 24 '17 at 07:28

Implementing google maps with react

4 Answers4

Linked