【问题标题】：Show one google map one page one in bootstrap modal在引导模式中显示一张谷歌地图一页一页
【发布时间】：2015-09-01 12:47:24
【问题描述】：

我无法让两张地图工作，其中一张处于引导模式。我已经尝试过其他修复，例如在加载模式后调整地图大小，但我没有成功。

我只需要模态的正常工作，我不介意更改任何现有代码。

function initialize(mapNum) {
  var map;
  var myLatlng = new google.maps.LatLng(50.676,-70.786);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
    			
  map = new google.maps.Map(document.getElementById("map"+mapNum), myOptions);
    			
  var marker = new google.maps.Marker({
    position: myLatlng, 
    map: map, 
    title:"Hello"
  });
}

initialize(1);	
initialize(2);

$('#mapModal').on('shown.bs.modal', function(){
  map.setCenter(new google.maps.LatLng(54, -2));
  google.maps.event.trigger(map, 'resize');
});

.map {
  height: 50vh;
  width: 100%;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div class="container-fluid">
  <div class="row">
    <div class="col-md-8">
      <div id="map1" class="map"></div>
    </div>
    <div class="col-md-4">
      <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mapModal"><h4>Dialog Box Pop-Up Map</h4>    </button>
    </div>
  </div>
</div>

<div id="mapModal" class="modal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
	  <div class="modal-header">
	    <button type="button" class="close" data-dismiss="modal">&times;</button>
	    <h4 class="modal-title text">Map</h4>
	  </div>
	  <div class="modal-body">
	    <div id="map2" class="map"></div>
	  </div>
	  <div class="modal-footer">
	    <button type="button" class="btn btn-fresh" data-dismiss="modal">Close</button>
	  </div>
	</div>
  </div>
</div>

【问题讨论】：

bootstrap模型中的容器持有地图的宽度和高度是固定的吗？
我不认为这会影响我的问题，我很好奇为什么我的模态不刷新，所以谷歌地图可以正确显示。
地图 UI 出现了，所以我知道这个问题与尺寸无关，当模式出现时我无法刷新它
检查了你的代码，on('shown.bs.modal' 你的代码应该可以工作吧！
code sn-p 没有打开模型。

标签： jquery twitter-bootstrap google-maps google-maps-api-3

【解决方案1】：

找到答案！

我之前错过了控制台中的一些内容： map not defined

这意味着解决方案是从初始化函数中获取映射变量并将其移出它。

旧

function initialize(mapNum) {
  var map;
  var myLatlng = new google.maps.LatLng(50.676,-70.786);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
}

新

var map;

function initialize(mapNum) {
  var myLatlng = new google.maps.LatLng(50.676,-70.786);
  var myOptions = {
    zoom: 14,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
   }
 }

【讨论】：