Google-maps-react: div wrapping map style

Created on 23 Dec 2018 · 5Comments · Source: fullstackreact/google-maps-react

When ever I check the map element I see an outer div surrounding it. I want to change that div style.
How can I do that?

Source

t1a2l

Most helpful comment

Any updates on this? It's very frustrating when you want to have map adopt to the styles of its parent.

reinvanimschoot on 18 Sep 2019

👍2

All 5 comments

Same problem, and when I put the containerStyle={{width: '100%', height: '250px', position: 'relative'}} mentioned by other people my map does not load

luisfellipe7 on 24 Dec 2018

👍1

I had a similar issue, setting `containerStyle={{position:'static'}} did work for me. See https://stackoverflow.com/questions/53970359/anchor-link-under-map-component-not-clickable/53972516#53972516 . Hope it helps

KingBrado on 29 Dec 2018

🎉2

Any solution on this issue?

tfmcunha on 4 Mar 2019

Any updates on this? It's very frustrating when you want to have map adopt to the styles of its parent.

reinvanimschoot on 18 Sep 2019

👍2

Guys, it took too much time to be fixed this and I've forked and created my own version to fixed. I've also opened a pull request on this repo, let's see if they'll merge it, eventually.

The pull request:
https://github.com/fullstackreact/google-maps-react/pull/483

My branch with the fix:
https://github.com/bertuz/google-maps-react/tree/stylized-div-wrapper

My branch with built files, in order to use it with npm (or yarn or whatever):
https://github.com/bertuz/google-maps-react/tree/wrapping-div-with-styles

To use it directly you can add it like this:

yarn add "https://github.com/bertuz/google-maps-react.git#v2.0.7-alpha.1"