adjust map height / width

[mderazon]

Is there any way of setting width to be 100% of wrapping container ?

[mderazon]

For some reason setting width={"100%"} didn't work the first time I tried, now it works

:+1:

[mderazon]

I was wrong, setting width={"100%"} is okay but can't seem to make the height dynamically adjust to the width of the map. This makes it problematic embedding this in a responsive layout. Any idea ?

[nikdo]

I struggled with the same thing and I solved that by setting class to the map element and styling it with CSS. Which I believe should be the best practice anyway.

<Map className="map" ...

.map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

[mderazon]

did not work for me... Usually when adding a google map I just set the width to 100% of the container and the height adjusts itself perfectly.

[mderazon]

you can try using vh units:

height={"100vh"}

some old browsers don't support it though

[mderazon]

turns out vh is a nightmare in terms of browser compat, so i'm back to trying to use % based width / height Don't know if i'm writing this into void or if someone's listening, but i'll write anyway:

Debugging a little further, I found out that if I give the map component's wrapping element height: 100% and remove it from the map component itself then things are working as expected

i.e. instead of

<div data-reactid=".0.2">
  <div style="width: 100%; height: 100%; position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);" data-reactid=".0.2.0">
    <div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
    </div>
  </div>
</div>

(notice the height / width in the second div)

<div data-reactid=".0.2" style="width: 100%; height: 100%;">
  <div style="position: relative; overflow: hidden; transform: translateZ(0px); background-color: rgb(229, 227, 223);" data-reactid=".0.2.0">
    <div class="gm-style" style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%; z-index: 0;">
    </div>
  </div>
</div>

(notice it now in the first div)

Problem is I don't have any access to the wrapping div, as it's generated internally by the component.

I looked at the code a little but couldn't pinpoint an easy solution for this problem.

Any idea ?

[ghost]

Hi there. Your problem can be solved with CSS. Let's say that you want to render map in parent component like this:

render() {
  <div className="wrapper">
     <OtherComponent />
     <Map width="100%" />
  </div>
}

Now you know that Map will render div so you can do in css:

.wrapper > div {
  height: 100%;
  width: 100%;
}

Yes. We can style that javascripticaly-inaccessible div with CSS child selector. But remember that this will affect all children elements of type div. As you can see in the example I have OtherComponent, to build that component I now must use other element for example section.

Also if our OtherComponent is div and there is no way to change it, we can use nth:child selector to select our Map's div wrapper and style it.

Try it :)

[mderazon]

I have tried wrapping it in a div and applying css. Didn't work for me.

I wish I could put a jsfiddle example, but not sure how to pack browserify and react-googlemaps

[cab11918]

I struggled with the same thing and I solved that by setting class to the map element and styling it with CSS. Which I believe should be the best practice anyway.

<Map className="map" ...

.map {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

After struggling for 24 hours, you made my day. Thank you sooooooooo much!!!!!!