Как получить элемент API Google Map для заполнения доступного пространства в столбце Bootstrap под заголовком

Question

Я часами ломал голову, пытаясь сам разобраться в этом и выискивая ответы в Интернете, но все еще не смог этого понять.Я надеюсь, что один из вас, ребята, мог бы потратить несколько минут, чтобы помочь мне разобраться в этом.Спасибо!

Я пытаюсь, чтобы элемент API Карт Google заполнил доступное пространство под тегом "Посетить", чтобы он мог изменять свой размер при изменении размера области просмотра.Я пытался использовать различные комбинации высоты: 100% и классы начальной загрузки, но, похоже, ничего не работает.

Вот изображение того, что я хотел бы сделать.

Вот ссылка на сайт, над которым я работаю.

Спасибо!

Answer 1

<div class="col-12" style="height: 200px;">
<div id="map" style="position: relative; overflow: hidden;" class="h-100 w-100 rounded">
...
</div>
</div>

просто добавьте высоту в div этой карты контента в вашем коде как