为什么我看不到正确的google javascript地图？

Question

我在我的web应用中使用谷歌地图javascript api来显示地图。 下面是显示地图代码：

var map; 
var jsMap; 

$(function() { 

     // doing stuff here 

     // showing map 
     $('#map_div_1').append('<div id="map_1" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>'); 
     var centerLatLng = new google.maps.LatLng(centerlat, centerlong); 
     var myOptions = { 
      center: centerLatLng, 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      draggable: true 
     }; 

     map = new google.maps.Map(document.getElementById("map_1"), myOptions); 

      // markerArray is initialized with values in beginning    
      var triangleCoords = new Array(); 

      for(var x=0;x<markerArray.length;x++){ 
       triangleCoords.push(new google.maps.LatLng(markerArray[x].latitude, markerArray[x].longitude)); 
         } 

      jsMap = new google.maps.Polygon({ 
       paths: triangleCoords, 
       strokeColor: "#FF0000", 
       strokeOpacity: 0.8, 
       strokeWeight: 2, 
       fillColor: "#FF0000", 
       fillOpacity: 0.35 
      }); 

      jsMap.setMap(map); 

     // if this button will be clicked then i want to make another javascript google map in another div map_2 
     $('#show_2nd_map').unbind("click"); 
     $('#show_2nd_map').bind('click', function(){ 
       // doing stuff 
        jsMap.setMap(null); 
       jsMap = null; 
       map = null; 
       // showing 2nd map 

       $('#map_div_2').append('<div id="map_2" style="width:640px; height:427px; margin-left:auto; margin-right:auto"></div>'); 

      var centerLatLng1 = new google.maps.LatLng(centerlat2, centerlong2); 

      var myOptions = { 
      center: centerLatLng1, 
      zoom: 17, 
      mapTypeId: google.maps.MapTypeId.ROADMAP, 
      draggable: true 
     }; 

     map = new google.maps.Map(document.getElementById("map_2"), myOptions); 

     var triangleCoords2 = new Array(); 

     for(var x=0;x<markerArray2.length;x++){ 
       triangleCoords2.push(new google.maps.LatLng(markerArray2[x].latitude, markerArray2[x].longitude)); 
         } 

     jsMap = new google.maps.Polygon({ 
      paths: triangleCoords2, 
      strokeColor: "#FF0000", 
      strokeOpacity: 0.8, 
      strokeWeight: 2, 
      fillColor: "#FF0000", 
      fillOpacity: 0.35 
     }); 

     jsMap.setMap(map); 

     }); 
    });  

第一张地图创建罚款。但是，当我点击show_2nd_map按钮然后地图被创建，但它不显示它的权利。我附上两个屏幕截图。

Answer 1

谷歌计算基于地图的canvas元素在地图的大小，因此它需要画布（DIV）可见地图初始化之前。 有两个走周围：

1. 不要隐藏你的画布，只是放到别的地方去（绝对位置和左：-99999，顶部：-99999）。地图google.maps.event.trigger(map, "resize");