响应式调整Google地图大小?

时间:2014-07-10 17:53:17

标签: google-maps autoresize

我的网站上设置的地图根据屏幕分辨率不会调整大小。我对网页设计完全陌生,需要知道如何调整大小。谢谢你们。

<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>

1 个答案:

答案 0 :(得分:1)

将gmap_canvas的宽度设置为100%;

CSS:

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

HTML:

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