将谷歌地图的大小设置为屏幕大小的百分比？

Question

我正在尝试创建一个网站，可以在Google地图上显示位置。我想将地图大小设置为用户屏幕大小的百分比。对于地图的宽度，这样做很好，但是当我尝试将高度设置为百分比时，地图就会消失。我尝试将body设置为100％宽度和100％高度，也尝试使用容器div，但由于我刚开始学习html和CSS，所以不确定还能尝试什么其他方法。

此处为CSS代码；

#map {
    position: relative;
    width: 35%;
    height: 350px;
    background-color: #CCC;
    margin: 1% 0 0 15%;
    }

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

我使用的地图代码直接来自https://developers.google.com/maps/tutorials/fundamentals/adding-a-google-map，如果需要，我可以上传完整的 .html 文档。

- CDickson

Answer 1

将所有包含元素的高度和宽度设置为:

width: 100%;
height: 100%;

Mike Williams的Google Maps API v2教程中的讨论：在地图div中使用百分比高度

概念验证代码示例

代码片段：

function initialize() {
  var mapCanvas = document.getElementById('map');
  var mapOptions = {
    center: new google.maps.LatLng(44.5403, -78.5463),
    zoom: 8,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(mapCanvas, mapOptions)
}
google.maps.event.addDomListener(window, 'load', initialize);

html,
body,
#map {
  width: 100%;
  height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

- geocodezip

Answer 2

在您使用子元素的%高度之前，需要为地图容器定义px高度。

尝试：

#map-container{
    height: 350px;
}

#map{
    height: 100%;
}

- luke

Answer 3

除非你有一个具有固定高度的父元素，否则无法设置HTML元素的百分比高度。

不过，现代浏览器支持使用关键字“vh”相对于视口设置高度，而不是用“％”。

否则，您需要通过JavaScript / jQuery计算视口的高度并设置元素的高度。

更多信息请参见此处。

- thbaan

Answer 4

如果你遇到地图在移动设备上显示细节变小的问题，那么你必须检查meta标签中的width、device-width和initial-scale属性。我发表这篇文章是因为我复制了开发者的所有HTML代码，但没有包括meta标签，花费了很多时间才找到解决方法。否则，在工作中所有的百分比和像素大小都能完美地运行。

- shaian kiany