爲什麼我看不到正確的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");