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

Question

我在我的网络应用程序中使用 google maps 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

Google 根据地图画布元素计算地图的大小，因此它需要画布（div）在地图初始化之前可见。 有两个走来走去：

1. 不要隐藏画布，只需将它们放在其他位置（绝对位置和左侧：-99999，顶部：-99999）。

2. 重新计算地图的宽高google.maps.event.trigger(map, "resize");