Стили Google Maps по умолчанию скрывают всю карту

Question

Попытка добавить Google Maps на новую веб-страницу в существующем проекте Laravel, что оказывается огромной болью в задней части.

https://www.beenleighrum.com.au/findme

Код надежен, так как работает на нескольких других сайтах.

Проблема в том, что по умолчанию элемент имеет относительную позицию:

style="position: relative;overflow: hidden;"

Если я открою DevTools (F12) и поменяю положение на Статическое, то карта отобразится.Проблема в том, что API карт Google хочет, чтобы оно было относительным, и если я не смогу изменить его, я не вижу, как будет правильно отображаться моя карта?

Answer 1

Установите ширину и высоту для вашей карты:

#map {
    width: 100vw;
    height: 100vh;
}

, что означает 100% ширины области просмотра и 100% высоты области просмотра.С vw и vh вам не нужно иметь дело с контейнером вашего #map.

Answer 2

Вам необходимо установить ширину и высоту для вашего контейнера карты.

#map {
  width: 100%;
  height: 100%
}