Javascript 在初始化时全屏渲染google地图

因此，我一直在谷歌地图工作了相当长的一段时间，但我被困在一个点。我有一个容器div，在其中我正在渲染我的地图，但最初它的

显示

是

none

。我有一个浮动按钮，我希望在单击时容器的

显示

应更改为

块

，并应触发全屏事件，以便全屏显示地图。到目前为止，我已经做到了：

// 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>

这是一个图像按钮

// JavaScript method onclick of the button

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

现在我面临的问题是，当我第一次单击按钮时，它会显示带有地图的容器，但不会使其全屏显示。当我再次点击按钮时，它会显示全屏。我不知道为什么会发生这种情况，但我希望地图在第一次单击时呈现全屏。

尝试更改：

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

---

问题是全屏，而不是完整的浏览器。

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

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

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