设置Google地图容器DIV的宽度和高度100％
我加载了Google Maps API v3并以div格式打印Google地图。 但是，当宽度和高度设置为100％，自动我看不到地图。
这里是HTML代码片段。
<!-- Maps Container --> <div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
有没有办法解决这个问题？
如果要覆盖整个页面，必须将所有父容器设置为100％宽度。 您必须至less为#content div设置宽度和高度的绝对值。
body, html { height: 100%; width: 100%; } div#content { width: 100%; height: 100%; }
设置地图容器定位到相对的伎俩。 这里是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>
在所有浏览器上testing。 这是截图 。
很less有人意识到css定位的力量。 要将地图设置为占据其父容器的100％高度，请执行以下操作：
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
如果在#map_canvas_container中有任何非绝对定位的元素，他们将设置它的高度，地图将采用确切的可用空间。
Gmap写内联样式位置相对于div。 覆盖：
google.maps.event.addListener(map, 'tilesloaded', function(){ document.getElementById('maps').style.position = 'static'; document.getElementById('maps').style.background = 'none'; });
希望它有帮助。
您可以将高度设置为-webkit-fill-available
<!-- Maps Container --> <div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
如果该div是您的网页上唯一的东西，请设置：
body, html { height: 100%; width: 100%; }
我努力寻找答案。
你真的不需要做任何事情与体型。 所有你需要从地图代码中删除内联样式：
<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，然后按照您喜欢的方式进行设置。
这对我有效。
map_canvas {position：absolute; 顶部：0; 正确：0; 底部：0; left：0;}
我只是添加了内联样式。
<div id="map_canvas" style="width:750px;height:484px;"></div>
它为我工作。
