Google Map is taking up entire screen

Question

I am using a library, google-map-react: https://github.com/istarkov/google-map-react

I have followed the instructions in the readme and the map appears on screen, but it takes up the entire screen by default, and i can't get it to change. Here is my code. I have tried:

 <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    style={{height: '400px', width: '400px'}}
  >

and

<GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    size={{height: '400px', width: '400px'}}
  >

and

 <GoogleMapReact
    defaultCenter={this.props.center}
    defaultZoom={this.props.zoom}
    style={height: '400px', width: '400px'}
  >

and I have also tried using percents instead of hard coding pixels. The documentation doesn't say anything about how to set the size, how can I do that? I even tried putting it inside a (from bootstrap) and it still takes up the entire area. How can I manually set the size?

This is weird, would you mind posting your code, also some CSS rules applied on the page. Perhaps your map-container's width is overwritten by width 100% somewhere from parent-DOM, I just guess so — thinhvo0108, Apr 25 '17 at 09:25

score 1 · Answer 1 · answered Apr 25 '17 at 08:15

The documentation here:

https://github.com/istarkov/google-map-react/blob/master/DOC.md

gives an example, although it isn't obvious to me how you pass that to the GoogleMapReact tag:

{
  center: { lat, lng }, // current map center
  zoom: 4, // current map zoom
  bounds: { nw, se, sw... }, // map corners in lat lng
  size: { width, height... } // map size in px
}

There's also this example:

https://jsbin.com/roqutisoqu/1/edit?js,console,output

where the width and height are supplied as inline styles on the div the map gets rendered in:

ReactDOM.render(
  <div style={{width: '100%', height: 400}}>
    <SimpleMap/>
  </div>,
  document.getElementById('main')
);

score 1 · Answer 2 · edited Sep 13 '20 at 07:42

1

I was having the same problem which have now been fixed at my end after reading the documentation thoroughly. The documentation says:

By default map will not raise onChange event if parent size has changed, to change such behavior add resetBoundsOnResize = {true} property.

I just added the attribute resetBoundsOnResize = {true} in GoogleMapReact as below:

<GoogleMapReact
    resetBoundsOnResize={true}
    bootstrapURLKeys={{ key: "your api key" }}
    defaultCenter={location}
    defaultZoom={zoomLevel}
  >

And the map is now rendering inside the parent.

edited Sep 13 '20 at 07:42

Dharman

30,962
25
85
135

answered Sep 13 '20 at 07:37

Syed Shoaib Abidi

2,356
17
19

I get an error `Type '{ resetBoundsOnResize: boolean; mapContainerStyle: { width: string; height: string; }; center: { lat: any; lng: any; }; zoom: number; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly & Readonly<...>'.` – Fiddle Freak Feb 16 '22 at 20:34

score 0 · Answer 3 · edited May 23 '17 at 12:34

It's important where you put your GoogleMapReact component, because the size (width) of the container is important

Please also refer to this answer of mine, which is using the same library: Implementing google maps with react

In your case here, you may use the following code: (using another DIV as a wrapper with width & height set as you prefer)

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 (
      <div style={{height: '400px', width: '400px'}}>
        <GoogleMapReact
          defaultCenter={this.props.center}
          defaultZoom={this.props.zoom}
          style={{height: '400px', width: '400px'}}
        >
          <AnyReactComponent
            lat={59.955413}
            lng={30.337844}
            text={'Google Map'}
          />
        </GoogleMapReact>
      </div>
    );
  }
}
MyClass.defaultProps = {
  center: {lat: 59.95, lng: 30.33},
  zoom: 11
};

export default MyClass;

Google Map is taking up entire screen

3 Answers3