Jquery 在引导模式中显示一张谷歌地图一页

我很难让两个贴图正常工作，其中一个处于引导模式。我尝试过其他修复，比如在加载模式后调整地图大小，但没有成功

我只需要模态一正确工作，我不介意修改任何现有的代码

函数初始化（mapNum）{
var映射；
var mylatng=newgoogle.maps.LatLng（50.676，-70.786）；
变量myOptions={
缩放：14，
中心：myLatlng，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map”+mapNum），myOptions）；
var marker=new google.maps.marker({
职位：myLatlng，
地图：地图，
标题：“你好”
});
}
初始化（1）；	
初始化（2）；
$（'#mapModal'）.on（'show.bs.modal'，function（）{
map.setCenter（新的google.maps.LatLng（54，-2））；
google.maps.event.trigger（映射，'resize'）；
});
.map{
高度：50vh；
宽度：100%；
}

对话框弹出地图
&时代；
地图
接近
找到了答案！
我之前在控制台中遗漏了以下内容：
地图未定义

这意味着解决方案是从initialize函数中获取map变量，然后将其移出

古老的
新的
如果bootstrap模型中的容器存放地图的宽度和高度是固定的，这会不会有帮助？我不认为这会影响我的问题，我很好奇为什么我的模式没有刷新以便google地图能够正确显示。地图界面出现了，所以我知道这个问题与大小无关，当模态出现时，我无法让它刷新检查您的代码，
on（'show.bs.modal'
您的代码是否正常工作！代码片段未打开模型。
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
   }
 }