如何在bootstrap模式中添加谷歌地图 [英] How to add google map in bootstrap modal

问题描述

我使用Google嵌入地图选项将地图插入Bootstrap模式，但模式显示地图的形状，但只显示地图的一部分，其余为灰色。

下面是我用过的代码：

 <按钮类型=buttonclass =btn btn-primarydata-toggle =modaldata-target =＃myModal>点击地图< /按钮> 
< div class =modal fadeid =myModaltabindex = -  1role =dialogaria-labelledby =myModalLabelaria-hidden =true> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< button type =buttonclass =closedata-dismiss =modalaria-label =Close>< span aria-hidden =true>& times;<<< ; /跨度>< /按钮> 
< h4 class =modal-titleid =myModalLabel>模式标题< / h4> 
< / div> 
< div class =modal-body> 
< / div> 
< div class =modal-footer> 
< button type =buttonclass =btn btn-defaultdata-dismiss =modal>关闭< / button> 
< button type =buttonclass =btn btn-primary>保存更改< / button> 
< / div> 
< / div> 
< / div> 
< / div> 
  

在这里，jquery附加了

<$ p $ （'shown.bs.modal'，（function（））{
var mapIsAdded = false;

返回函数（）{
if（！mapIsAdded）{
$（'。modal-body'）。html（'< iframe src =https://www.google.com/maps/embed？ pb =！1m14！1m12！1m3！1d9808.974038062652！2d4.3244048859985185！3d52.07529689519739！2m3！1f0！2f0！3f0！3m2！1i1024！2i768！4f13.1！5e0！3m2！1snl！2snl！4v1419588821379width =100％height =400frameborder =0style =border：0>< / iframe>'）;

mapIsAdded = true;
}
};
}）（））;

我无法找到确切的问题，不胜感激。 p>

解决方案

最初它与模式 display：none 有关。我认为这会导致 iframe 中的Google Maps JavaScript无法正常工作。要自己去尝试删除 .modal 类并打开模式。

最简单的解决方案可能是注入使用 shown.bs.modal 事件首次打开模式时的iframe：

<$ p $ （'shown.bs.modal'，（function（））{
var mapIsAdded = false;

返回函数（）{
if（！mapIsAdded）{
$（'。modal-body'）。html（'< iframe src =https://www.google.com/maps/embed？ pb =！1m14！1m12！1m3！1d9808.974038062652！2d4.3244048859985185！3d52.07529689519739！2m3！1f0！2f0！3f0！3m2！1i1024！2i768！4f13.1！5e0！3m2！1snl！2snl！4v1419588821379width =100％height =400frameborder =0style =border：0>< / iframe>'）;

mapIsAdded = true;
}
};
}）（））;

或看到 Codepen

code> iframe 具有固定的 width =800属性。我建议你将它改为 width =100％，因为模式窗口没有固定的宽度。

I am using Google Embed map option to insert a map into Bootstrap Modal, but the modal shows up with the shape of the map present, but only part of the map is displayed, the rest is gray.

Here is code i have used:

    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Click For Map</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Here jquery i have attached

$('#myModal').on('shown.bs.modal', (function() {
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }    
  };
})());

I am not able find out the exact problem for this , any help would be greatly appreciated.

解决方案

It has to do with the modal being display: none initially. I think this makes the Google Maps JavaScript inside the iframe unable to work properly. To see for yourself try removing the .modal class and open the modal.

The easiest solution might be to inject the iframe when the modal is opened for the first time, using the shown.bs.modal event:

$('#myModal').on('shown.bs.modal', (function() {
  var mapIsAdded = false;

  return function() {
    if (!mapIsAdded) {
      $('.modal-body').html('<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d9808.974038062652!2d4.3244048859985185!3d52.07529689519739!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1419588821379" width="100%" height="400" frameborder="0" style="border:0"></iframe>');

      mapIsAdded = true;
    }    
  };
})());

or see this Codepen

Next to this the iframe has a fixed width="800" attribute. I would suggest you to change this into width="100%" as the modal window doesn't have a fixed width.

这篇关于如何在bootstrap模式中添加谷歌地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！