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

Didnt work. If i dont set any height, map is not visible. This question is very specific to angular-google-maps library. — hendrix, Aug 27 '17 at 13:04
@Vega height 100% does not work (agm module requires exact height, otherwise map isnt shown) — hendrix, Aug 28 '17 at 08:46

score 18 · Accepted Answer · answered Aug 28 '17 at 01:11

18

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>

answered Aug 28 '17 at 01:11

JayChase

11,174
2
43
52

Works. This is exactly what i was looking for, thanx ;) – hendrix Aug 28 '17 at 08:44
Genius. Thank you. – MadMac May 21 '19 at 02:01
In my case getting map.offsetHeight = 0 – Techiemanu Oct 10 '20 at 11:55

score 9 · Answer 2 · answered Aug 27 '17 at 13:48

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.

Thanks a lot. This was the least intrusive solution for me – Supun De Silva Jun 02 '20 at 10:28 — Supun De Silva, Jun 02 '20 at 10:28

score 2 · Answer 3 · answered Aug 10 '20 at 15:27

2

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.

answered Aug 10 '20 at 15:27

AbhinavRatHor

21
1

score 1 · Answer 4 · answered Feb 26 '19 at 17:46

1

This worked for me:

agm-map {
  height: 100%;
}

answered Feb 26 '19 at 17:46

Flavio Marques

79
1
4

Angular 4 - Google map height fill remaining space

4 Answers4