How can I make Google Maps take only 50% of height within a div?

Ionic Framework ionic-v3
1

Hello guys,

Ionic native google maps should have height of 100% by default.

I want my google maps to take only the half of its containing div (ion-content).
But as you guys know, if I set its height to 50%, the map will not render.

Is there any way to work around this?

or should I make a container div google maps and set its height to 50%?
but I found when I put the google map div inside another div, it doesn’t work.

Thanks,

2

Hi @jamesharvey

Have you tried vertical units yet?

#map { height: 50vh }

Let me know if it works.
Cheers!

1 Like