blocks|key|377067|text|如果div是您页面上唯一内容，请设置：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|377068|body,+html+{
++height:+100%25;
++width:+100%25;
}|code-block|syntax|javascript|377069|entityMap^0|2|3|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>If that <code>div</code> is the only thing on your page, set:</p>

<pre><code>body, html {
  height: 100%;
  width: 100%;
}
</code></pre>


blocks|key|377124|text|如果你想覆盖整个页面，你必须将所有的父容器设置为100%25的宽度。你必须至少为#content+div设置一个宽度和高度的绝对值。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|377125|body,+html+{
++height:+100%25;
++width:+100%25;
}

div#content+{
++width:+100%25;+height:+100%25;
}|code-block|syntax|javascript|377126|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>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.</p>

<pre><code>body, html {
  height: 100%;
  width: 100%;
}

div#content {
  width: 100%; height: 100%;
}
</code></pre>


blocks|key|593025|text|Gmap将内联样式位置写入到相对于div的位置。将其覆盖为：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|593026|google.maps.event.addListener(map,+'tilesloaded',+function(){
++++document.getElementById('maps').style.position+=+'static';
++++document.getElementById('maps').style.background+=+'none';
});|code-block|syntax|javascript|593027|希望能有所帮助。|593028|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Gmap writes inline style position to relative to the div. Overwrite that with : </p>

<pre><code>google.maps.event.addListener(map, 'tilesloaded', function(){
    document.getElementById('maps').style.position = 'static';
    document.getElementById('maps').style.background = 'none';
});
</code></pre>

<p>Hope it helps.</p>


blocks|key|593070|text|我费了很大力气才找到答案。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|593071|你真的不需要对体型做任何事情。从地图代码中删除内联样式所需的全部操作：|593072|<iframe+width="425"+height="350"+frameborder="0"+scrolling="no"+marginheight="0"+marginwidth="0"+src="https://maps.google.co.uk/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=new%2Byork&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New%2BYork,%2BUnited%2BStates&amp;t=m&amp;z=10&amp;iwloc=A&amp;output=embed"></iframe><br+/><small><a+href="https://maps.google.co.uk/maps?f=q&amp;source=embed&amp;hl=en&amp;geocode=&amp;q=new%2Byork&amp;aq=&amp;sll=53.546224,-2.106543&amp;sspn=0.02453,0.084543&amp;ie=UTF8&amp;hq=&amp;hnear=New%2BYork,%2BUnited%2BStates&amp;t=m&amp;z=10&amp;iwloc=A"+style="color:#0000FF;text-align:left">View+Larger+Map</a></small>|code-block|syntax|javascript|593073|删除所有内联样式并添加class或ID，然后按您喜欢的方式设置样式。|593074|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|O|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|P|8|@]|9|@]|A|$]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I struggled a lot to find the answer. </p>

<p>You don't really need to do anything with body size. All you need to remove the inline style from the map code:</p>

<pre><code>&lt;iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&amp;amp;source=s_q&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=new+york&amp;amp;aq=&amp;amp;sll=53.546224,-2.106543&amp;amp;sspn=0.02453,0.084543&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=New+York,+United+States&amp;amp;t=m&amp;amp;z=10&amp;amp;iwloc=A&amp;amp;output=embed"&gt;&lt;/iframe&gt;&lt;br /&gt;&lt;small&gt;&lt;a href="https://maps.google.co.uk/maps?f=q&amp;amp;source=embed&amp;amp;hl=en&amp;amp;geocode=&amp;amp;q=new+york&amp;amp;aq=&amp;amp;sll=53.546224,-2.106543&amp;amp;sspn=0.02453,0.084543&amp;amp;ie=UTF8&amp;amp;hq=&amp;amp;hnear=New+York,+United+States&amp;amp;t=m&amp;amp;z=10&amp;amp;iwloc=A" style="color:#0000FF;text-align:left"&gt;View Larger Map&lt;/a&gt;&lt;/small&gt;
</code></pre>

<p>remove all the inline style and add class or ID and then style it the way you like.</p>


blocks|key|593090|text|我刚刚添加了内联样式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|593091|<div+id="map_canvas"+style="width:750px;height:484px;"></div>|offset|length|style|CODE|593092|这对我很管用。|593093|entityMap^0|0|0|1P|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|M|8|@$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|I|5|6|7|P|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|K|$]]

<p>I just added inline style .<br>
<code>&lt;div id="map_canvas" style="width:750px;height:484px;"&gt;&lt;/div&gt;</code> <br>
And it worked for me .</p>


blocks|key|377236|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|377237|map_canvas+{位置:绝对；顶部:+0；右侧:+0；底部:+0；左侧:+0;}|377238|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>This worked for me.</p>
<h1>map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}</h1>


blocks|key|377278|text|您可以将高度设置为-webkit-fill-available|type|unstyled|depth|inlineStyleRanges|entityRanges|data|377279|
<div+id="map_canvas"+style="height:-webkit-fill-available;width:100px;"></div>|code-block|syntax|javascript|377280|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>You can set height to -webkit-fill-available</p>

<pre><code>&lt;!-- Maps Container --&gt;
&lt;div id="map_canvas" style="height:-webkit-fill-available;width:100px;"&gt;&lt;/div&gt;
</code></pre>


blocks|key|377310|text|这对我很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|377311|++++<!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%25;+height:+100%25;"></div>
</div>
</body>
</html>|code-block|syntax|javascript|377312|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>This Work for me.</p>

<pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;Untitled Document&lt;/title&gt;
&lt;style type="text/css"&gt; 

#cont{
    position: relative;
    width: 300px;
    height: 300px;
}
#map_canvas{
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
&lt;/style&gt; 
&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
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);
}
&lt;/script&gt;
&lt;/head&gt;

&lt;body onload="initialize()"&gt;
&lt;div id="cont"&gt;
&lt;div id="map_canvas" style="width: 100%; height: 100%;"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|593236|text|如果你不能影响你的父元素(比如在嵌套组件的情况下)，你可以使用height:+100vh，这将使它成为一个完整的窗口(=视图)高度；|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|593237|entityMap^0|V|D|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|K|8|@]|D|@]|E|$]]]|G|$]]

<p>If you can't affect your parents elements (like in a nested components situation) you can use <code>height: 100vh</code> which will make it a full window (=view) height;</p>


blocks|key|593260|text|晚做总比不做强!我把我的做了一个类：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|593261|.map
{
++++position:absolute;
++++top:64px;
++++width:1100px;
++++height:735px;
++++overflow:hidden;
++++border:1px+solid+rgb(211,211,211);
++++border-radius:3px;
}|code-block|syntax|javascript|593262|然后|593263|<div+id="map"+class="map"></div>|593264|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>Better late than never!  I made mine a class:</p>

<pre><code>.map
{
    position:absolute;
    top:64px;
    width:1100px;
    height:735px;
    overflow:hidden;
    border:1px solid rgb(211,211,211);
    border-radius:3px;
}
</code></pre>

<p>and then</p>

<pre><code>&lt;div id="map" class="map"&gt;&lt;/div&gt;
</code></pre>


<p>I loaded Google Maps API v3 and print Google Map in <code>div</code>. But when set width &amp; height to 100% and auto I can't see the Map.</p>

<p>Here is HTML code snippet.</p>

<pre><code>&lt;!-- Maps Container --&gt;
&lt;div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"&gt;&lt;/div&gt;
</code></pre>

<p>Is there a way to fix this issue?</p>


Set Google Maps Container DIV width and height 100%

容器

我在div中加载了Google Maps API v3并打印了Google Map。但是当宽度和高度设置为100%和自动时，我看不到贴图。下面是HTML代码片段。<div id="map_canvas" style="height:100%;width:100px;marg...

问设置Google Maps Container DIV宽度和高度100%
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置Google Maps Container DIV宽度和高度100%EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问设置Google Maps Container DIV宽度和高度100%
EN