在引导模式中打开地图答案

【问题标题】：open map in bootstrap modal在引导模式中打开地图
【发布时间】：2015-07-06 13:39:12
【问题描述】：

1.如何在引导模式下打开谷歌地图，当用户点击显示的谷歌地图下方的放大地图按钮时。 codepen link

当用户单击信息窗口中的在谷歌地图中查看链接时，任何可能性都会显示谷歌地图中的特定位置。

     var storeArray = new Array(
     ["23.589242", "58.412586", "ST1"],["23.628695", "58.266483","ST2"],["23.622155", "58.488977","ST3"],
     ["23.239333", "58.312586", "ST4"],["23.151933", "58.312586", "ST5"],["23.609027", "58.538858", "ST6"],["23.608280", "58.538343", "ST7"],["23.607789", "58.538021", "ST8"],["23.606412", "58.537399", "ST9"]);

var myOptions = {
  center: new google.maps.LatLng(storeArray[0][0], storeArray[0][3]),
  zoom: 9,
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var map = new google.maps.Map(document.getElementById("map-canvas"), myOptions); 

  function testmap() {

      for (i = 0; i < storeArray.length; i++) {  
            marker = new google.maps.Marker({
            position: new google.maps.LatLng(storeArray[i][0], storeArray[i][1]),
            map: map
         });


    var infowindow = new google.maps.InfoWindow({
        content: storeArray[i][2]

    });
    infowindow.open(map, marker); 

      }

  }
  google.maps.event.addDomListener(window, 'load', testmap);

【问题讨论】：

标签： javascript twitter-bootstrap google-maps bootstrap-modal

【解决方案1】：

这很容易。见：http://codepen.io/anon/pen/qdorLN

$('#myModal').on('shown.bs.modal', function (e) {
    var mapNode = map.getDiv();
    $('#map-canvas-modal').append(mapNode);
});

在你的模态显示事件上添加一个监听器
使用 getDiv() 检索包含地图 div 的节点功能
将该节点附加到模态框内的 div 中

P.S.：注意不要给多个 div 赋予相同的 id。 ID 必须始终是唯一的。

【讨论】：