谷歌地图调整全屏无法正常工作

Question

以下代码正常工作。

<div id="map_wrapper">
   <div id="map_canvas" class="mapping"></div>
</div>
<style>
  #map_wrapper {
    height: 750px;
  }
  #map_canvas {
    width: 100%;
    height: 100%;
  }
</style>

将#map_wrapper内容从height: 750px调整为height: 100%时，它变为空白。

我尝试了google.maps.event.trigger(map, 'resize');

我做错了什么？

Answer 1

您需要具有父容器的大小（0的100％为0）。

Mike Williams' explanation from his Google Maps Javascript API v2 tutorial

#map_wrapper {
    height: 100%;
}
html, body, #map_canvas {
    width: 100%;
    height: 100%;
}

proof of concept fiddle

代码段

＆＃13;

＆＃13;

var geocoder;
var map;

function initialize() {
  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1419),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
}
google.maps.event.addDomListener(window, "load", initialize);

＆＃13;

#map_wrapper {
  height: 100%;
}
html,
body,
#map_canvas {
  width: 100%;
  height: 100%;
}

＆＃13;

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map_wrapper">
  <div id="map_canvas" class="mapping"></div>
</div>

＆＃13;

＆＃13;

＆＃13;