React-google-maps: Adding position absolute onto the map container gets overwritten

[deadlocked247]

Whenever I try to pass any position attribute into the styling for the container element, it gets overwritten by position: relative

[nodegin]

try adding !important after absolute

[ASpehler]

I'm having the same issue, the mapElement div has a position: relative and the map does not show up on my page

Happen to me on 6.0.0 and 4.11.0 with Meteor and Bootstrap 3.3.6

It's possible to overcome the problem by putting the height of the map element in viewport height and not in percentage

mapElement={
   <div style={{ height: '100vh' }} />
}

[tomchentw]

@ASpehler would it possible to put it in containerElement with v6.0.0 and still work? I'm asking because mapElement is the actual DOM that Google Maps JavaScript API will render its DOMs on, and containerElement is just a wrapper around it.

[ASpehler]

@tomchentw yes it works too

containerElement={
   <div style={{ height: '100vh' }} />
}
mapElement={
   <div style={{ height: '100%' }} />
}

[tomchentw]

Thanks @ASpehler for the feedback!

@nodegin @deadlocked247 did this solve your issue?

[tomchentw]

Please refer to Getting Help section in the README (or #469).