2

I'm using this link to include Google Maps in my Ionic app. It works fine, but I would like it to fill the entire height that is still available beneath the header.

I'm only able to give it a height in px, like so:

.angular-google-map-container { height: 200px;}

The moment I change it to %, it doesn't show the map anymore.

Anyone who can help me with this?

binoculars
  • 2,226
  • 5
  • 33
  • 61

2 Answers2

1

Everytime you are using a percentage you have to ask yourself "Percentage of what?"... Since you didn't provide the whole code it is impossible to answer you perfectly.

By using .angular-google-map-container { height: 200px;} you are forcing all parents container to increase their size to fit the 200px height. That's why it works.

A dumb fix would be using view port height value. Something like :

height: 80vh;

Which is 80% of the view port height.

Community
  • 1
  • 1
ForguesR
  • 3,558
  • 1
  • 17
  • 39
1

I managed to make it work using:

.angular-google-map-container {
    position: absolute;
    top: 20px;
    bottom: 0;
    right: 0;
    left: 0;
}
binoculars
  • 2,226
  • 5
  • 33
  • 61