Angular 4 - Google map height fill remaining space

Question

I am using https://github.com/SebastianM/angular-google-maps in my angular 4 application.

I must specify map height in CSS, like this, otherwise, map won't show:

agm-map {
  height: 300px;
}

Is it possible for <agm-map> to fill remaining space in parent container?

PS: i would prefer solution using https://github.com/angular/flex-layout

Answer 1

You could use a template ref to get the height of the map's parent element and set the map's height that way.

    <div class="container" fxLayout="column">
      <div class="map" fxFlex="1 1 100%" #map>
        <agm-map [style.height.px]="map.offsetHeight" [latitude]="lat" [longitude]="lng"></agm-map>
      </div>
    </div>

Answer 2

This worked for me:

agm-map {
  height: 100%;
}

Answer 3

Height 100% won't work unless its parent element has a height that the percentage can be used to compare against (or if you use fixed or absolute positioning). Height 100% doesn't work as reliably as 'width 100%', because a page can be infinitely tall in height but only so wide. The map's parent, or parent's parent, etc. needs to eventually have a specified height unless there is content in the box other than the map. If there's other content like text, then height:100% will just fill up the same amount of height that the other content occupies. Without that, you can try to use vh units to specify absolute percentage of screen height

height : 100vh

This will make it take the full screen height but that's not usually ideal if you are wrapping it inside another element that you want flexibility with. You could also try setting a min-height.

Answer 4

Add this to for angular / ionic projects global.scss

.agm-map {
height: 90%;
//To add styling to container :)
.agm-map-container-inner .sebm-google-map-container-inner{
border: 2px solid red;
border-radius: 15px;
}

I hope it helps someone.