Javascript 选项卡式谷歌地图，显示第一张而不是第二张地图

正如标题所说……第二张地图应该是卫星视图，但它显示的是第一张地图，为什么

这是我的CSS、JS和HTML

#地图画布，#地图画布-2{宽度：90%；高度：400px；}
ul#标签{
列表样式类型：无；
填充：0；
文本对齐：居中；
}
ul#tabs li{
显示：内联块；
背景色：#32c896；
边框底部：实心5px#238b68；
填充：5px20px；
利润底部：4倍；
颜色：#fff；
光标：指针；
}
ul#tabs li:悬停{
背景色：#238b68；
}
ul#tabs li.active{
背景色：#238b68；
}
ul#标签{
列表样式类型：无；
保证金：0；
填充：0；
}
ul#tab li{
显示：无；
}
ul#tab li.active{
显示：块；
}

$（文档）.ready（函数（）{
$（“ul#tabs li”）。单击（功能（e）{
if（！$（this.hasClass（“活动”））{
var tabNum=$（this.index（）；
var nthChild=tabNum+1；
$（“ul#tabs li.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
google.maps.event.trigger（map2，“resize”）；
$（“ul#tab li.active”）.removeClass（“active”）；
$（“ul#tab li:nth child（+nthChild+））.addClass（“active”）；
}
});
});
函数初始化（）{
var mapCanvas=document.getElementById（'map-canvas'）；
var mapCanvas2=document.getElementById（'map-canvas-2'）；
变量映射选项={
中心：新google.maps.LatLng（40.727201，-73.908737），
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
变量映射选项2={
中心：新google.maps.LatLng（40.727201，-73.908737），
缩放：12，
mapTypeId:google.maps.mapTypeId.SATELLITE
}
var map=new google.maps.map（mapCanvas，mapOptions）
var map2=new google.maps.Map（mapCanvas2，mapOptions2）
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

首先
第二

对于发布的代码片段，我得到一个javascript错误：

未捕获引用错误：未定义map2

要修复javascript错误，请将map2设置为全局

要修复调用

initialize

时隐藏的第二个选项卡的显示，请在div变为可见后触发map resize事件

代码片段：

$（文档）.ready（函数（）{
$（“ul#tabs li”）。单击（功能（e）{
if（！$（this.hasClass（“活动”））{
var tabNum=$（this.index（）；
var nthChild=tabNum+1；
$（“ul#tabs li.active”）.removeClass（“active”）；
$（此）.addClass（“活动”）；
$（“ul#tab li.active”）.removeClass（“active”）；
$（“ul#tab li:nth child（+nthChild+））.addClass（“active”）；
google.maps.event.trigger（map2，“resize”）；
//地图大小正确后，重置地图中心
地图2.设置中心（地图选项2.中心）；
}
});
});
//使map2全球化
var-map2；
var映射选项2；
函数初始化（）{
var mapCanvas=document.getElementById（'map-canvas'）；
var mapCanvas2=document.getElementById（'map-canvas-2'）；
变量映射选项={
中心：新google.maps.LatLng（40.727201，-73.908737），
缩放：12，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
地图选项2={
中心：新google.maps.LatLng（40.727201，-73.908737），
缩放：12，
mapTypeId:google.maps.mapTypeId.SATELLITE
}
var map=new google.maps.map（mapCanvas，mapOptions）；
var m=新的google.maps.Marker({
位置：mapOptions.center，
地图：地图
});
map2=新的google.maps.Map（mapCanvas2，mapOptions2）；
var m2=新的google.maps.Marker({
位置：地图选项2.1.1.2中心，
地图：map2
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）
#地图画布，
#map-canvas-2{
宽度：90%；
高度：400px；
}
ul#标签{
列表样式类型：无；
填充：0；
文本对齐：居中；
}
ul#tabs li{
显示：内联块；
背景色：#32c896；
边框底部：实心5px#238b68；
填充：5px20px；
利润底部：4倍；
颜色：#fff；
光标：指针；
}
ul#tabs li:悬停{
背景色：#238b68；
}
ul#tabs li.active{
背景色：#238b68；
}
ul#标签{
列表样式类型：无；
保证金：0；
填充：0；
}
ul#tab li{
显示：无；
}
ul#tab li.active{
显示：块；
}


首先
第二






您的选项卡有问题。您只能看到第一个选项卡。另外，
map2
变量在另一个作用域中，因此如果单击选项卡按钮，会出现错误。正如graubnla指出的：
Uncaught ReferenceError:map2未定义