google-maps-react icon indicating copy to clipboard operation
google-maps-react copied to clipboard

inline styles on the map container are breaking my view

Open ChadMartinson opened this issue 8 years ago • 6 comments

    container: {
      position: 'absolute',
      width: '100vw',
      height: '100vh'
    }

is causing the map to leave my container

it used to be

    container: {
      position: 'absolute',
      width: '100%',
      height: '100%'
    },

and it worked just fine.

ChadMartinson avatar Oct 24 '16 22:10 ChadMartinson

You can override this through the Map component's containerStyle prop:

const containerStyle = {position: 'absolute', width: '100%', height:'100%'}

<Map google={this.props.google} containerStyle={containerStyle}/>

tomjschuster avatar Oct 26 '16 21:10 tomjschuster

I used the following and absolute was still being set.

style={{position: 'relative', width: '93.5%', height: '400px' }}
#map {
  position: relative !important;
}

kevinSuttle avatar Oct 28 '16 14:10 kevinSuttle

@kevinSuttle, it looks like you're just changing the map style, but not the container style. Try including:

containerStyle={{position: 'relative'}}

as well.

tomjschuster avatar Oct 28 '16 15:10 tomjschuster

Thanks!

kevinSuttle avatar Oct 28 '16 17:10 kevinSuttle

Can this issue be closed?

ryanoboril avatar Sep 24 '18 06:09 ryanoboril

if I do position: relative map is not displaying..

mukhtorov avatar Oct 06 '20 19:10 mukhtorov