Responsive container

[brandonmp]

From reading through the issues in this project, it looks like the container has to have a height/width set in px.

Has anyone figured out how to circumvent that and make this component responsive? I can render it fine w/ fixed height/width, but that's not really tenable for the long-term.

[brandonmp]

classic: I posted an issue/question, then immediately found a solution

These settings seem to work:

Wrapping the entire GoogleMapLoader component:

<div 
 style={{ height: 350, 
width: '100%', 
display: 'flex', 
flexFlow: 'row nowrap', 
justifyContent: 'center', 
padding: 0 }}
>

Then, the containerElement prop:

<div
style={{
  width: "100%"
  marginLeft: 0
}}
            />

[brandonmp]

Going to leave open for now since a lot of issues in this project instruct users to give dimensions in absolute pixel values. Would be interested to hear from a dev on the project re: best practices for responsive layout of this component

[mattmcdonald39]

I set the containerElement to a div with 100% width and height. Then wrapped the GoogleMapLoader in a Div and gave it a height: 100vh. This may not work for everyone but so far its worked for me.

[tomchentw]

I don't have a good solution either. The only thing I knew is Google Maps API requires the div to have certain dimension instead of leaving it auto.

[tomchentw]

Also, 6.0.0 is released on npm beta tag now. We also have a new demo page. Feel free to try it:
https://tomchentw.github.io/react-google-maps/

[o-aloqaily]

I managed to solve this problem by doing the following

const mapHeight = window.innerHeight
then in the style object of the map I have set the height to height: ${mapHeight}px

[roberthchapman]

Yes the key is putting the px at the end.

For me, with recompose, the props were:

withProps( props => ({
googleMapURL: https://maps.googleapis.com/maps/api/js?key=${googleApiKey}&libraries=places,
loadingElement: <div style={{ height: ${window.innerHeight - 300}px, width:100% }} />,
containerElement: <div style={{ height: ${window.innerHeight - 300}px, width:100% }} />,
mapElement: <div style={{ height: ${window.innerHeight - 300}px, width:100% }} />,
center: props.center,
ref: React.createRef()
})),

[devenovil]

classic: I posted an issue/question, then immediately found a solution

These settings seem to work:

Wrapping the entire GoogleMapLoader component:

<div 
 style={{ height: 350, 
width: '100%', 
display: 'flex', 
flexFlow: 'row nowrap', 
justifyContent: 'center', 
padding: 0 }}
>

Then, the containerElement prop:

<div
style={{
  width: "100%"
  marginLeft: 0
}}
            />

Great job @brandonmp, it's work like a charm for me!! Thanks!

[Jarrettgohh]

Thank you so much @devenovil ! It works well!

[miljkovicjovan]

Can someone point me to a direction for why is a pixel width and height needed and why percentages can't be used?