Angular 4 - Google map height fill remaining space

11k views Asked by At

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

4

There are 4 answers

3
JayChase On BEST ANSWER

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>
0
Flavio Marques On

This worked for me:

agm-map {
  height: 100%;
}
1
diopside On

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.

0
AbhinavRatHor On

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.