在初始化时全屏渲染谷歌地图

Question

所以我使用谷歌地图已经有一段时间了，但我被困在了一个点上。我有一个容器 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>

最初带有id="searchMap" 的div 有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;
}