div wrapping map style

[t1a2l]

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?

[luisfellipe7]

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

[KingBrado]

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

[tfmcunha]

Any solution on this issue?

[reinvanimschoot]

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

[bertuz]

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"

[LucasBrandt]

After running into this problem myself, and seeing that it's unlikely to be resolved here, I "solved" it by using @googlemaps/react-wrapper instead. One caveat is that I couldn't just replace it in one place or component, I had to make the same change everywhere in my application to avoid loading the Google Maps API twice. That library didn't exist when this issue was first reported, so it's a new option for anyone running into the problem today.