Как я могу сделать так, чтобы Google Maps занимал только 50% высоты в пределах div? (Ионная 3, Кордова)

Question

Ионные нативные карты Google должны иметь высоту 100% по умолчанию.

Я хочу, чтобы мои карты Google занимали только половину содержимого div (ion-content). Но, как вы, ребята, знаете, если я установлю ее высоту на 50%, карта не будет отображаться.

Есть ли способ обойти это?

или я должен сделать контейнер div google maps и установить его высоту на 50%? но я обнаружил, что когда я помещаю div карты Google в другой div, он не работает.

Спасибо

Answer 1

Вы можете сделать так:

HTML:

<div class="mapDiv">
    <div id="map_canvas_test" class="map_canvas_test"></div>
</div>

CSS:

.mapDiv
{
  height: 50%;
}

.map_canvas_test
{
  height:100%;
}

Результат:

Я использую это для отображения карты в верхней половине экрана вместе с деталями в нижней половине.