CSS 将 Google Maps Container DIV 宽度和高度设置为 100%
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10209704/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Set Google Maps Container DIV width and height 100%
提问by BBKing
I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.
我加载了 Google Maps API v3 并在div. 但是当将宽度和高度设置为 100% 和自动时，我看不到地图。
Here is HTML code snippet.
这是 HTML 代码片段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Is there a way to fix this issue?
有没有办法解决这个问题？
回答by Machiel
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.
如果您想用它覆盖整个页面，您必须将所有父容器设置为 100% 宽度。您必须至少为 #content div 设置宽度和高度的绝对值。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
回答by Madan Sapkota
Setting Map Container to position to relative do the trick. Here is HTML.
将 Map Container 设置为相对位置就可以了。这是HTML。
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
和简单的CSS。
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Tested on all browsers. Here is the Screenshot.
在所有浏览器上测试。这是截图。
回答by YaroslavS120
Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:
很少有人意识到 css 定位的威力。要将地图设置为占据其父容器的 100% 高度，请执行以下操作：
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.
如果您在 #map_canvas_container 中有任何非绝对定位的元素，它们将设置它的高度，并且地图将占用确切的可用空间。
回答by Mostafa
This Work for me.
这对我有用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
回答by YoniXw
If you can't affect your parents elements (like in a nested components situation) you can use height: 100vhwhich will make it a full window (=view) height;
如果你不能影响你的父元素（比如在嵌套组件的情况下），你可以使用height: 100vh它使它成为一个完整的窗口（=视图）高度；
回答by Naresh Chennuri
You can set height to -webkit-fill-available
您可以将高度设置为 -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
回答by abhilashv
Gmap writes inline style position to relative to the div. Overwrite that with :
Gmap 将内联样式位置写入相对于 div 的位置。用以下内容覆盖它：
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hope it helps.
希望能帮助到你。
回答by developer68
Better late than never! I made mine a class:
迟到总比不到好！我做了我的一个类：
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
and then
进而
<div id="map" class="map"></div>
回答by Juan G. Hurtado
If that divis the only thing on your page, set:
如果这div是您页面上唯一的内容，请设置：
body, html {
height: 100%;
width: 100%;
}
回答by Andy
I struggled a lot to find the answer.
我费了好大劲才找到答案。
You don't really need to do anything with body size. All you need to remove the inline style from the map code:
你真的不需要对体型做任何事情。从地图代码中删除内联样式所需的一切：
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small><a href="https://maps.google.co.uk/maps?f=q&source=embed&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A" style="color:#0000FF;text-align:left">View Larger Map</a></small>
remove all the inline style and add class or ID and then style it the way you like.
删除所有内联样式并添加类或 ID，然后按照您喜欢的方式对其进行样式设置。
