Рендеринг карты Google с полным экраном при инициализации

Question

Так что я уже довольно давно работаю с картами Google, но застрял в какой-то момент. У меня есть контейнер div, в котором я рендерил свою карту, но изначально он display равен none. У меня есть плавающая кнопка, и я хочу, чтобы при ее нажатии значение display контейнера изменилось на block, и оно должно вызвать полноэкранное событие, чтобы карта отображалась в полноэкранном режиме. Пока я сделал это:

// html for map

<div id="searchMap" class="search-map">
  <div class="embed-responsive">
    <div id="searchViewMap" style="height: 540px;"></div>
    <div id="restaurant-label" class="restaurant-info-container-search"></div>
  </div>
</div>

изначально div с id="searchMap" имеет display: none

// html for button to show the map

<img src="{{asset('/images/map_button.png')}}" class="content-section__map-button" onclick="showMobileMap()">

Это кнопка изображения.

// JavaScript method onclick of the button

function showMobileMap() {
  $('#searchMap').css('display', 'block');
  $('#searchViewMap div.gm-style button[title="Toggle fullscreen view"]').trigger('click');
}

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

Answer 1

попробуйте изменить:

<div id="searchViewMap" style="height: 540px;"></div>

до

<div id="searchViewMap" style="width: 100%; min-height: 100vh;"></div>

или добавить css:

#searchMap {
  height: 100%;
  width: 100%;
  left: 0;
  position: absolute;
  top: 0;    
  z-index: 2;
}