Google地图无法正常显示

我在Twitter Bootstrap's Modal窗口上有一个Google Map小部件。

当我打开模态窗口时,此地图仅显示在窗口小部件的一部分上( 示例 )。

在重新调整浏览器窗口大小后,此地图将正确显示。

我尝试使用$('#map').resize() (在带地图的div上),但它不起作用。

对我的问题的任何建议表示赞赏。

我以前解决了这个问题。 将地图加载到“display:none”canvas时,Google Map将无法正常显示。 Bootstrap模态获胜将在开始时隐藏。 因此,您必须确保在Google Map完成加载之前无法隐藏地图canvas。

我的工作是将canvas移动到一个位置,用户无法看到它并将地图加载到其中。 几秒钟后(可能是500毫秒),将地图移动到正确的位置(在您的情况下是模态体)。

我写了一个简单的例子。 你可以尝试一下:

HTML:

 

JavaScript的:

 $(function(){ var mapOptions = { zoom: 8, center: new google.maps.LatLng(-34.397, 150.644), mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById("map"), mapOptions); setTimeout(function(){ $('.modal-body').append($("#map").css("margin-top","0px").get(0)); },500); }); 

演示屏幕截图:

在此处输入图像描述