react maps google outsie Grid - reactjs

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>