Question

我正在尝试使用Google Maps API使我的地图具有100％的高度。（过去我想让我的Google Charts API图表也有百分比高度）

到目前为止我所读过的每个地方都说首先将html和身高设置为100％。我已经这样做了，但除非我让它的容器有一个固定的高度，否则地图不会显示出来。

<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Map</title>
        <style>
            html, body{
                width:100%;
                height:100%;
            }
            .map{
                width:100%;
                height:100%;
            }
        </style>
    </head>
    <div class="mainWrap">
        <div id="mainMap" class="map">
        </div>
    </div>
    </div>
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>


    <script  type="text/javascript">

        /////Global variables and arrays/////
            var markerArray = [];
            var myID;
            var mapZoom = 9; /

            var mapCenterLat = 41.82454868;
            var mapCenterLon = -87.6341629;

        //Initiate the initialize function to build map, after page loads
        google.maps.event.addDomListener(window, 'load', initialize); //when window loads, start initialize function (below)

        //Google API Initialize function that builds map
        function initialize() {
            /////Variables/////
            var infoWindow = new google.maps.InfoWindow({
            });
            var map_canvas = document.getElementById('mainMap');    
            var map_options = {
                center: new google.maps.LatLng(mapCenterLat,mapCenterLon),
                zoom: mapZoom, 
                mapTypeId: google.maps.MapTypeId.TERRAIN 
            };  

            //Draw the map 
            var map = new google.maps.Map(map_canvas, map_options);


        } //End initialize()



    </script>
</html>

Answer 1

您的地图div的CSS中似乎缺少position: absolute;

百分比高度/宽度仅在您为元素提供位置时才有效。

在浏览器窗口中显示div：

.map {
position: absolute;
top: 0px;
left: 0px;
width:100%;
height:100%;
}

将Google API地图（和图表）设置为100％高度

1 个答案: