我装谷歌地图API v3和打印谷歌地图div 。 但是，设置宽度和高度时，100％和经销商的我不能看地图。
下面是HTML代码段。
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法来解决这个问题？
Answer 1:
你有，如果你想用它覆盖整个页面设置的所有父容器到100％的宽度。 你必须至少是设置在宽度和高度为＃内容DIV的绝对值。
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Answer 2:
设置地图集装箱定位到相对做的伎俩。 这里是HTML。
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
和简单的CSS。
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
测试在所有的浏览器。 下面是截图 。
Answer 3:
很少有人知道CSS定位的力量。 要在地图占据100％的高度的它的父容器做到以下几点：
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
如果您有内部#map_canvas_container任何非绝对定位的元素，他们将设置它的高度和地图将采取确切的可用空间。
Answer 4:
这为我工作。
<!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>
Answer 5:
GMAP写道内嵌样式位置相对股利。 覆盖现有：
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
希望能帮助到你。
Answer 6:
您可以设置高度-webkit-填充可用
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Answer 7:
如果你不能影响你的父母元素（如在嵌套部件的情况），你可以使用height: 100vh这将使其成为一个完整的窗口（=视图）的高度;
Answer 8:
迟到总比不到好！ 我做了我的一个类：
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
然后
<div id="map" class="map"></div>
Answer 9:
如果div是页面上的唯一的事情，设置：
body, html {
height: 100%;
width: 100%;
}
Answer 10:
我挣扎了很多寻找答案。
你并不真正需要做的与身体的大小事情。 所有你需要从地图代码中删除内嵌样式：
<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>
删除所有内嵌样式并添加类或ID，然后它风格你喜欢的方式。
Answer 11:
这为我工作。
左：0;}
Answer 12:
我只是增加了内嵌样式。
<div id="map_canvas" style="width:750px;height:484px;"></div>
它为我工作。
文章来源: Set Google Maps Container DIV width and height 100%
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://i.stack.imgur.com/k8GpG.jpg', '推荐 仙女界的扛把子 的文章《设置谷歌地图容器DIV的宽度和高度100％设置谷歌地图容器DIV的宽度和高度100％(Set Goo》','https://www.manongdao.com/article-835172.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}