响应式调整谷歌地图的大小？答案

【问题标题】：Responsive Resizing Google Maps?响应式调整谷歌地图的大小？
【发布时间】：2014-12-18 02:51:38
【问题描述】：

我在我的网站上设置了不依赖于屏幕分辨率调整大小的地图。我对网页设计完全陌生，需要知道如何调整这个东西的大小。谢谢各位。

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<div style="overflow:hidden;height:300px;width:380px;">
<div id="gmap_canvas" style="height:300px;width:380px;"></div>

<style>
#gmap_canvas img{
max-width:none!important;
background:none!important
}
</style>

<a class="google-map-code" href="http://www.mapsembed.com/baur/" id="get-map-data">mapsembed.com</a>
</div>

<script type="text/javascript">

function init_map(){
  var myOptions={
    zoom:16,
    center:new google.maps.LatLng(51.4105461,-3.4874177),
    mapTypeId:google.maps.MapTypeId.ROADMAP
  };
  map=new google.maps.Map(document.getElementById("gmap_canvas"),myOptions);
  marker=new google.maps.Marker({
    map:map,
    position:new google.maps.LatLng(51.4084782,-3.4836197)
  });
  infowindow=new google.maps.InfoWindow({
    content: "<b>Nina Davies Opticians</b><br/>6 Barons Close House<br/>Llantwit Major | CF62 4NR"
  });
  google.maps.event.addListener(marker,"click",function(){
    infowindow.open(map, marker);
  });
}
google.maps.event.addDomListener(window,'load',init_map);

</script>

【问题讨论】：

请正确缩进您的代码。您是在向真正的人类寻求帮助，而不是文本解析机器人。另外，请更具体地说明您尝试了什么以及为什么它不起作用。
对不起，伙计。对此很陌生，但是将其复制/粘贴到记事本中真的那么难吗？
不，但是当您期望忙碌的人仍然愿意阅读和回答您的问题时，这有点浪费每个人的时间。正确的格式化是如此简单，期待它并非不合理。如果您正在寻求帮助，请尽量让人们轻松地帮助您。请不要将其视为个人；这个网站是关于教人的，我想教你如何写出更好的问题。

标签： google-maps autoresize

【解决方案1】：

设置gmap_canvas的宽度为100%；

CSS：

#gmap_canvas { width:100%; height:100%; }

HTML：

<div id="gmap_canvas"></div>

【讨论】：

最后我自己想通了，但这基本上就是我所做的 - 谢谢！