相关疑难解决方法(0)

我正在尝试使用Twitter Bootstrap将Google地图插入模式.模态显示当前地图的形状,但仅显示地图的一部分,其余为灰色.调整屏幕大小后,地图始终显示正确,但位于错误的位置.

我搜索并找到了一些建议,例如调用地图的resize事件,或者将地图图像的max-width设置为none,但这些建议都没有帮助到目前为止.似乎地图无法确定它的正确大小,只要它隐藏在一个元素中即可.

JS

function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(51.219987, 4.396237),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapCanvas"),
    mapOptions);
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.219987, 4.396237)
  });
  marker.setMap(map);
}

HTML

<div class="modal hide fade" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3></h3>
  </div>
  <div class="modal-body">
    <div id="mapCanvas" style="width: 500px; height: 400px"></div>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
  </div>
</div>

我正在使用Twitter Bootstrap v2.0.4.我需要一些帮助,因为我没有正确触发调整大小事件或编辑css,因此谷歌地图是独立的.