谷歌地图在 div 内按季度呈现。浏览器调整大小正确呈现地图答案

【问题标题】：Google Map renders quaterly inside div. browser resize renders the map properly谷歌地图在 div 内按季度呈现。浏览器调整大小正确呈现地图
【发布时间】：2013-12-17 10:02:40
【问题描述】：

我在 pantheon 上使用 gmap、drupal 6。当页面刷新时，我的 gmap 出现在它自己的 div 中。

我已经检查了 gmap resize() 选项。它不起作用。即使我尝试加载 gmap，当单击选项卡（地图位于“查看地图”选项卡而不是 jquery UI 选项卡内）时，它也无法在那里工作。地图不在 iframe 内。当浏览器重新调整大小或打开检查元素工具进行调试时，地图会出现，但 matker 不可见。标记超出给定的宽度-高度。

Google Maps not rendering completely on page? 没有帮助我。

请提出建议。

【问题讨论】：

请显示地图容器的 HTML 和 CSS。
你在CSS中设置了地图的高度和宽度吗？
放一些代码和html
@DAC84: CSS=> #map-canvas {height:400px; width:100%;} HTML=>
JS=> google map JS 渲染地图。我在窗口加载时显示地图。 google.maps.event.addDomListener(window, 'load', initialize);

标签： javascript jquery html google-maps drupal-6

【解决方案1】：

您是否以编程方式呈现“#map-canvas”HTML div？
在这种情况下，请确保在尝试渲染地图之前 DOM 已准备好。
应用：google.maps.event.trigger(map, 'resize'); 我不得不用它来防止灰色区域=>但我想这是你已经尝试过的？
在 Google Chrome Element 检查器中检查地图尺寸。

【讨论】：

1.我在窗口加载时显示地图。 google.maps.event.addDomListener(window, 'load', 初始化); 2. 对我不起作用。 3. CSS=> #map-canvas {height:400px;宽度：100%;} HTML=>
在元素检查器中，将鼠标悬停在地图画布 div 上：您可以检查任何地方是否有重叠的 div。加载方法的窗口应该可以工作；你也可以尝试使用 jQuery 的 DOM 来准备它。并且调整大小功能肯定可以工作 - 我以前曾多次使用过这个技巧。但是在问题中发布您的帖子，您永远不会知道自己可能错过了什么。
没有一些重叠的 div。当单击特定选项卡（地图位于“查看地图”选项卡而不是 jquery UI 选项卡内）时，我使用了 jQuery 的 DOM 就绪或 resize() $('#check').on('click', function(){ setTimeout (function(){ google.maps.event.trigger(canvas-map, "resize"); }, 2000); });
您可以尝试在新视图被实例化为回调而不是单击按钮时实例化地图。
我没有使用 jquery UI。我的问题已解决，方法是在标签单击时调用 initialize()。非常感谢您的时间和宝贵的答案。享受假期！新年快乐.. :)