在bootstrap模态中打开地图

Question

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

1. 当用户点击infowindow中的查看谷歌地图链接时，任何可能性都会显示谷歌地图中的特定位置。



JS

     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);

Answer 1

这很容易。请参阅：http://codepen.io/anon/pen/qdorLN

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

1. 在您的模态显示事件
上添加一个监听器
2. 使用getDiv（）检索包含地图div的节点 功能
3. 将该节点附加到模态
中的div

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