CODEWITHSUNDEEP
google-mapsreactjs
jjjjjjjj
jjjjjjjj

Reputation: 4523

Google Map is taking up entire screen

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?

Upvotes: 2

Views: 5381

Answers (3)

Syed Shoaib Abidi
Syed Shoaib Abidi

Reputation: 2366

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.

Upvotes: 1

thinhvo0108
thinhvo0108

Reputation: 2242

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;

Upvotes: 0

duncan
duncan

Reputation: 31930

The documentation here:

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:

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')
);

Upvotes: 1

Related Questions