Clever Geek Handbook

Reactive Google Maps Implementation

React newbie here please bear with me :) Hope it will be very easy to solve

At the moment I am just trying to display the map on the screen, but when I run the code the page is completely blank and even my other divs are not showing. Here is my code nested in the gist: https://gist.github.com/JoeyBodnar/f76c5d434d57c6cc6108513ad79d4cb7

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

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

Also note that if I remove all Google related code from this file everything works fine.

any help is appreciated, thanks

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

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


source to share


4 answers


This is an improved version of my previous answer

I just checked your code containing a lot of errors, undefined and unused variables! So you can use the following code, which is pretty simple (it will allow you to view the current issue and show the map!)

Install the required libraries first:



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

Then you can 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;
+3


source


set the height <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}
  />
+2


source


The point is that GoogleMap requires the element length to be set correctly before rendering! Therefore, you can:

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

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

    OR

  • use a script to set it dynamically after the page has 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 to test your code, I see an issue based on my own experience! So if the map isn't showing yet, feel free to also set the height in pixels for your containerElement!

CONNECTED VERSION BELOW:

Please read my new answer

+1


source


npm modules like google-map-react

during debugging all div elements are in absolute position

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

will fix the problem

0


source






More articles:


All Articles