CODEWITHSUNDEEP
htmlcssnode.jsreactjsgoogle-maps
douglasrcjames
douglasrcjames

Reputation: 1645

Google Map overlapping onto div below

I am trying to display the Google map between two divs, but the map seems to be overlapping with the div below it. I have tried a bunch of styles on the component, but it doesn't want to take up the full space and always overlaps with that next section. This might be because of the div within the component from the package that isn't being overwritten, which is what might be referenced by these issues:

Check out my Code Sandbox for the full example: https://codesandbox.io/s/compassionate-wildflower-zkt8b

Looking to find a quick work around for this, I feel like it shouldn't be this difficult for how common it is, so maybe I am missing something. Anything helps, thanks!

Upvotes: 0

Views: 739

Answers (1)

joseluismurillorios
joseluismurillorios

Reputation: 1014

Try this:

class SimpleMap extends Component {
  constructor(props) {
    super(props);

    // Filling our parent container
    this.state = {
      mapStyles: {
        width: "100%",
        height: "100%"
      }
    };
  }

  render() {
    return (
      // Wrapping your component on a relative div container with the desired size
      <div style={{ position: 'relative', width: '100vw', height: '40vh' }}>
        <Map
          google={this.props.google}
          zoom={15}
          style={this.state.mapStyles}
          initialCenter={{ lat: 40, lng: -80 }}
        >
          <Marker position={{ lat: 40, lng: -80 }} />
        </Map>
      </div>
    );
  }
}

Updated code here.

Upvotes: 4

Related Questions