选项卡式谷歌地图，首先显示而不是第二个地图

Question

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

这是我的CSS，JS和HTML

#map-canvas, #map-canvas-2{width:90%; height:400px;}
ul#tabs {
    list-style-type: none;
    padding: 0;
    text-align: center;
}
ul#tabs li {
    display: inline-block;
    background-color: #32c896;
    border-bottom: solid 5px #238b68;
    padding: 5px 20px;
    margin-bottom: 4px;
    color: #fff;
    cursor: pointer;
}
ul#tabs li:hover {
    background-color: #238b68;
}
ul#tabs li.active {
    background-color: #238b68;
}
ul#tab {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
ul#tab li {
    display: none;
}
ul#tab li.active {
    display: block;
}

<!-- and the JS and HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("ul#tabs li").click(function(e){
        if (!$(this).hasClass("active")) {
            var tabNum = $(this).index();
            var nthChild = tabNum+1;
            $("ul#tabs li.active").removeClass("active");
            $(this).addClass("active");
            google.maps.event.trigger(map2, 'resize');
            $("ul#tab li.active").removeClass("active");
            $("ul#tab li:nth-child("+nthChild+")").addClass("active");
        }
    });
});
</script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
	var mapCanvas = document.getElementById('map-canvas');
    var mapCanvas2 = document.getElementById('map-canvas-2');
	var mapOptions = {
		center: new google.maps.LatLng(40.727201, -73.908737),
		zoom: 12,
		mapTypeId: google.maps.MapTypeId.ROADMAP
	}
    var mapOptions2 = {
		center: new google.maps.LatLng(40.727201, -73.908737),
		zoom: 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(window, 'load', initialize);

</script>


<ul id="tabs">
	<li class="active">first</li>
	<li>second</li>
</ul>
<ul id="tab">
	<li class="active">
    	<div id="map-canvas"></div>
    </li>
    <li>
    	<div id="map-canvas-2"></div>
    </li>
</ul>

Answer 1

使用发布的代码段，我收到一个javascript错误：Uncaught ReferenceError: map2 is not defined

1. 要修复javascript错误，请将map2设为全局。
2. 要修复调用initialize时隐藏的第二个标签的显示，请在显示div后触发地图调整大小事件。

代码段

＆＃13;
＆＃13;
$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    if (!$(this).hasClass("active")) {
      var tabNum = $(this).index();
      var nthChild = tabNum + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("ul#tab li.active").removeClass("active");
      $("ul#tab li:nth-child(" + nthChild + ")").addClass("active");
      google.maps.event.trigger(map2, 'resize');
      // reset the map center once the map has the correct size
      map2.setCenter(mapOptions2.center);
    }

  });
});
// make map2 global
var map2;
var mapOptions2;

function initialize() {
  var mapCanvas = document.getElementById('map-canvas');
  var mapCanvas2 = document.getElementById('map-canvas-2');
  var mapOptions = {
    center: new google.maps.LatLng(40.727201, -73.908737),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  mapOptions2 = {
    center: new google.maps.LatLng(40.727201, -73.908737),
    zoom: 12,
    mapTypeId: google.maps.MapTypeId.SATELLITE
  }
  var map = new google.maps.Map(mapCanvas, mapOptions);
  var m = new google.maps.Marker({
    position: mapOptions.center,
    map: map
  });
  map2 = new google.maps.Map(mapCanvas2, mapOptions2);
  var m2 = new google.maps.Marker({
    position: mapOptions2.center,
    map: map2
  });

}
google.maps.event.addDomListener(window, 'load', initialize);
＆＃13;
#map-canvas,
#map-canvas-2 {
  width: 90%;
  height: 400px;
}
ul#tabs {
  list-style-type: none;
  padding: 0;
  text-align: center;
}
ul#tabs li {
  display: inline-block;
  background-color: #32c896;
  border-bottom: solid 5px #238b68;
  padding: 5px 20px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}
ul#tabs li:hover {
  background-color: #238b68;
}
ul#tabs li.active {
  background-color: #238b68;
}
ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul#tab li {
  display: none;
}
ul#tab li.active {
  display: block;
}
＆＃13;
<!-- and the JS and HTML -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js"></script>
<ul id="tabs">
  <li class="active">first</li>
  <li>second</li>
</ul>
<ul id="tab">
  <li class="active">
    <div id="map-canvas"></div>
  </li>
  <li>
    <div id="map-canvas-2"></div>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;