谷歌地图在div之上

Question

早上好！ 我有以下问题： 我有一个包含网页（容器）主要信息的div和一个包含Google Map的div。用户点击div，Google Map应该显示在容器之上（隐藏网页）。当我点击div时，我得到的全部内容如下图所示。 http://prntscr.com/38ytlb 请注意，地图正确显示在屏幕上（左下方的Google徽标和右下方的使用条款）。但是，地图只占视口的一小部分。

<div id="container">
...
</div>
<div id="map-container">
    <div id="map-canvas"></div>
</div>

#map-container {
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
}

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

$(document).ready(function () {
    $("#map-container").hide();

    $("#map-toggle").click(function () {
        $("#container").hide();
        $("#map-container").show();
    });
});

提前致谢。

Answer 1

你应该检查两件事

1. 地图div的大小正确
2. 您在显示后在地图上触发调整大小。这将重绘地图并修复它的大小以填充div。

它应该是这样的：

window.google.maps.event.trigger(map, 'resize');

map是你用谷歌地图对象命名的。其网站上的所有示例都将其命名为map。

这将紧接着：

$("#map-container").show();