谷歌地图只加载灰色框并在拖动事件中工作

Question

我正在尝试在我的模板中添加谷歌世界地图。但最初它以灰色加载，而拖动灰色则加载世界地图。

  <script src="https://maps.googleapis.com/maps/api/js"></script>
  var mapOptions = {
        center: new google.maps.LatLng(10.8505, 76.2711),
        zoom: 8,
        minZoom: 1,
        mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById(chartId), mapOptions); 

这是我用来绘制图表的代码。This将是加载时出现的灰色图表。 拖动图表时会加载this。任何人都可以建议一种方法来解决这个问题。我非常感谢您提供的任何帮助。

Answer 1

如果地图在启动时是可见的，但您只有一个灰色框

确保地图div id正确设计了宽度和高度e：

 <div id='chartId' style='width: 400px; height: 400px;'></div>

如果使用这个分配，但你想要一个100％的高度，那么你必须分配给所有父母div高100％;或固定高度

Answer 2

检查地图容器最初是否具有正确的高度和宽度。如果没有，请尝试明确指定高度和宽度。