当我尝试创建第二个地图实例时，为什么GoogleMapsJavaScriptAPIv3不能正常工作？

在我的web应用程序中，我使用的是Google Maps JavaScript API v3。在网页中，我使用以下代码创建谷歌地图：

 var centerLatLng = new google.maps.LatLng(obj.centerlat, obj.centerlong);
 var myOptions = {
     center: centerLatLng,
     zoom: 17,
     mapTypeId: google.maps.MapTypeId.ROADMAP,
     draggable: true
 };

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

 var markerArray = obj.locations;
 var triangleCoords = new Array();

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

 var polypath = new google.maps.Polyline({
       path: triangleCoords,
       strokeColor: "#FF0000",
       strokeOpacity: 1.0,
       strokeWeight: 2
 });

 polypath.setMap(map);

单击按钮后，将显示第二张地图，但其显示不正确。我附上了第一张和第二张地图的截图。如果我对第一个映射实例代码进行注释，那么第二个映射就可以正常工作。这意味着当我创建第二个map实例时，问题就出现了。有人知道为什么第二张地图不好，以及如何解决这个问题吗

在这一行之后

var map2=new google.maps.Map（document.getElementById（“Map\u convas\u 2”），myOptions2）

加



您可能需要将新行在代码中向下移动一点，或者设置一个超时。问题是，
.show（）
需要一些时间来重置DOM中的映射大小，并且API在设置映射时被告知映射大小仍然为零。因此，在左上角只显示最小数量的平铺以显示零大小的贴图。

<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>

.map img{背景色：透明；}
#地图画布{宽度：400px；高度：450px；}
能否为两个画布提供HTML代码？可能还有CSS规则。或者将代码上传到某个地方，以便我们可以尝试。更新了我的问题。包括html和css。如果不够的话，我会制作一个html页面并上传到某个地方。如前所述，如果我禁用了第一个地图代码，那么第二个地图就可以了。请在查看代码时记住这一点。谢谢你的时间，没用。如果你看到右角，地图就在它的正确位置。使用地图选项。你觉得怎么样？@Piscean我认为，正如你所建议的，一个演示者将是一个好主意。只在左上角看到地图是一个常见的问题，这是由于API没有为map canvas div获取正确的大小而导致的。现在可以正常工作了。我把那行代码移得很低。它开始工作了。谢谢你的时间和帮助
 <div id='map_convas'></div>
 <div id='map_convas_2'></div>

 #map_convas{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 50px;
    left: 100px;
 }

 #map_convas_2{
position: absolute;
    border-radius: 8px;
    width:657px; 
    height:592px;
    top: 700px;
    left: 100px;
    display:none;
 }

 google.maps.event.trigger(map2, 'resize');

<style>
.map img { background-color: transparent; }
#map-canvas { width:400px; height:450px; }
</style>