Gmaps.js 不在 bootstrap 模态中加载

Question

hello world 我正在使用 gmaps.js 我有一个我无法解决的问题，问题是当我创建地图时 div 它工作得很好但是当我把 div（地图容器）在 bootstrap 模态中它不加载或显示任何我认为它与 css 中的 "display" 属性有关的东西，但我无法修复感谢您的帮助，这是我的代码

内置文档准备功能

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

这是我在模态

中的 bootstrap 行

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

Answer 1

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

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

Answer 2

您需要使用

手动调用模态

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

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

$('#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/

Gmaps.js 不在 bootstrap 模态中加载

Gmaps.js does not load inside bootstrap modal

html

javascript

jquery

twitter-bootstrap

gmaps.js