Gmaps.js 不会在引导模式中加载答案

【问题标题】：Gmaps.js does not load inside bootstrap modalGmaps.js 不会在引导模式中加载
【发布时间】：2015-11-06 07:24:49
【问题描述】：

你好世界，我正在使用 gmaps.js 我有一个我无法解决的问题，问题是当我创建地图 div 时它工作得很好，但是当我将 div（地图容器）放在引导模式中时它没有加载或显示任何我认为与 CSS 中的“显示”属性有关的内容，但我无法修复感谢您的帮助，这是我的代码

内部文档准备功能

  map = new GMaps(
 {
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
 }
});

这是我在模态框内的引导行

 <div class="row" style="background: red;">
    <div class="col-lg-12">
            <div id="map"></div>
    </div>
</div>

【问题讨论】：

标签： javascript jquery html twitter-bootstrap gmaps.js

【解决方案1】：

你需要手动调用模态

$('#myModal').modal('show')

之后，您需要在 modal 'shown.s.modal' 事件回调中初始化 Gmaps，如下所示：

$('#myModal').on('shown.bs.modal', function (e) {
  map = new GMaps({
   el: '#map',
   lat:36.184164,
   lng:43.975181,
   click:function (e) {
    console.log(e.latLng.lat());
   }
  });
});

工作 JSFiddle：http://jsfiddle.net/9n4592jv/1/

【讨论】：

【解决方案2】：

也许这只是一个 CSS 问题？例如尝试以下样式

#map {
    width: 300px;
    height: 200px;
}

【讨论】：