html - 谷歌地图未显示在 div 中

Question

我有一个谷歌地图 div，当我以像素而不是百分比定义高度时显示；在我的示例中，我尝试将高度设置为 100%。

我已经阅读了一些 SOF 答案，这些答案建议还必须设置父 div 高度，我已经通过在 css 中定位 map 的所有父 div 来完成，如您所见，但 map 没有显示。谁能帮忙？

这是我确实有效的代码:

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

html, body, #map-wrapper #map-canvas {
    margin: 0;
    padding: 0;
    height: 840px;
    width: 100%;  }

这是我不工作的代码:

            <div id="map-wrapper">
                <div id="map-canvas"></div>
            </div>

html, body, #map-wrapper #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;  }

JavaScript:

        var map;
        function initialize() {
            var mapOptions = {
                zoom: 8,
                center: new google.maps.LatLng(-34.397, 150.644)
                };
                map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

请记住，对于 100% 的高度，您需要将所有父元素也设置为 100% 的高度。

在my fiddler ¹ map 位于 html -> body -> div#map-wrapper -> div#map-canvas。每个元素的高度必须为 100%。

所以基本上我只是将 map-wrapper div 添加到您的 css 中:

html, body, #map-wrapper, #map-canvas {
    margin: 0;
    padding: 0;
    height: 100%;
    width: 100%;
}

您现有的带有 #map-wrapper #map-canvas 的 css(注意缺少的逗号!)会忽略周围的 div。

¹ 我没有添加任何 api key ，因此您会收到错误警报，为了调试，我给 map 设置了红色背景。