React-google-maps: Responsive container

Created on 10 Aug 2016 · 9Comments · Source: tomchentw/react-google-maps

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.

Source

brandonmp

Most helpful comment

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 on 10 Aug 2016

👍8 🎉3

All 9 comments

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 on 10 Aug 2016

👍8 🎉3

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

brandonmp on 10 Aug 2016

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.

mattmcdonald39 on 4 Oct 2016

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 on 6 Oct 2016

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/

tomchentw on 6 Oct 2016

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

o-aloqaily on 11 Jun 2018

👍4

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:

${window.innerHeight - 300}px, width:100% }} />,
containerElement:

${window.innerHeight - 300}px, width:100% }} />,
mapElement:

${window.innerHeight - 300}px, width:100% }} />,
center: props.center,
ref: React.createRef()
})),

roberthchapman on 21 Jan 2019

👍2

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!