Chrome Only Bootstrap + Google Maps Bug

Question

首先让我说地图正确绘制，这不是其他地图/引导程序错误的重复。

我遇到一个问题，即twitter bootstrap模式上的地图导致模态被视觉剪裁。

这似乎只是Chrome中的一个错误，因为它不会在Firefox或Safari上发生。

我正在使用：google maps api v3＆amp; twiter bootstrap 3.0.3

Html

       <div id="map_picker" class="modal fade" role="dialog" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-body">
              <div id="map_canvas" style="width:100%; height:300px"></div><br/>
            </div>
            <div class="modal-footer">
              <div class="row">
                <div class="col-md-2">
                  <label for="address class="control-label">Address: </label>
                </div>
                <div class="col-md-7">
                  <input id="address" class="form-control" type="text"/>
                </div>
                <div class="col-md-3">
                  <button class="btn btn-primary pull-right" id="apply_location">Apply</button>
                </div>
              </div>
            </div>
          </div> 
        </div>  
      </div>

显示模态的coffeescript

      ($ '#map_picker').on 'shown.bs.modal', () ->
        google.maps.event.trigger window.map, "resize"

地图显示没有问题，但模态的其余部分消失了。这不会发生在网站上的任何其他模式（查看图片等）。没有额外的CSS或样式。模态和所有元素都正确放置，所有z索引都显示正确。输入框和按钮仍然可用，它们只是没有正确绘制。

Answer 1

尝试.noConflict（）方法，如下所示：

var bootstrapModal = $('#map_picker').modal.noConflict();
$('#map_picker').bootstrapMdl = bootstrapModal;

Answer 2

这个bug是一个地图错误并已自行解决。我没有更改代码行或更新的chrome。

地图不再与其容器混淆。为了这个bug，我暂时冻结了chrome版本。可能发生变化的唯一因素是地图API。虽然没有公开列出新的API版本，但我没有在该页面上指定版本号，因此我可能已经获得旧版本。

我希望我有更好的解释。