react maps google outsie Grid

Question

I use google-maps-react in my project. On the side on my page I would like to put the map. To separate content I am using Grid and my website looks like this

  render() {
   return (    
    <Grid container spacing={8}>
      <Grid item sm={7}>Some content here</Grid>
       <Grid item sm={5}>
         <Grid container spacing={8}>
           <Grid item sm={12}> <MAPCONTAINER /> </Grid>
           <Grid item sm={12}> <OTHER_COMPONENT /> </Grid>
         </Grid>
       </Grid>
     </Grid>
   )}

and the <MAPCONTAINER /> looks like this

const style = {
  width: '100vw',
  weight: '100hx',
}

class MapContainer extends Component { 
  render() {
    return (
      <Map 
        google={this.props.google} 
        zoom={4}
        style = {style}
        >
      </Map>      
    );
  }
}

export default GoogleApiWrapper({
    apiKey: (GOOGLE_KEY)
  })(MapContainer)

There are two problems: one is that the map goes out of the Grid , it is very wide, and the weird thing is that when I inspect this Grid element, it shows that it has height:0, like there is nothing inside that Grid. The second problem is that <OTHER_COMPONENT /> overlap on the map, like it cannot see that there is some other Component above.

I cannot find way to fit the map into the Grid, how it should be properly.

Thank You from help.

Answer 1

The Map component renders the map in <div style="position: absolute;... So you need to wrap it in a <div style="position: relative;

Easiest way is to do this is by adding position: relative; to the Grid item like so:

<Grid item sm={12} style={{position: 'relative', height: '50vh'}}><MapContainer /></Grid>

This way you do not need to add style to the Map component

<Map 
    google={this.props.google} 
    zoom={4}>
</Map>