使用Display时谷歌地图被裁剪:继承;

Question

我试图通过在display:none;和之间切换来隐藏/显示谷歌地图display:inherit;.当我申请display:inheritGoogle地图时,部分地图会被裁剪,我不确定原因.如何在使用时解决这个问题display:none;？

链接到示例

//HTML
<button id="toggleMap">Toggle Google Map</button>
<button id="toggleImage">Toggle Image</button>

<div id="image">
  <img src="http://jdm-digital.com/wp-content/uploads/2012/04/google-jquery-opt-465x346.jpg">
</div>

<div id="map" style="width:500px; height:500px; display:none;">
  <div id="map_canvas" style="height:100%;"></div>
</div>


//JavaScript
$('#toggleImage').click(function() {
  $('#image').css('display', 'inherit');
  $('#map').css('display', 'none');
});

$('#toggleMap').click(function() {
  $('#image').css('display', 'none');
  $('#map').css('display', 'inherit');
});

Answer 1

如果您在隐藏地图时创建地图,则API不知道它应该有多大,因为浏览器报告它的大小为零.API仅为零大小的地图加载足够的图块,并将中心定位在(0,0) - 左上角.

取消隐藏地图时,通过触发resize事件告诉API获取新大小:

google.maps.event.trigger(map,'resize')

文档 - 向下滚动到事件.