在一页上加载多个 Google 地图 - 慢？答案

【问题标题】：Loading Several Google Maps on One Page - Slow?在一页上加载多个 Google 地图 - 慢？
【发布时间】：2013-03-14 01:58:40
【问题描述】：

我正在为一个列出其董事会的非营利组织创建一个页面。在灯箱中，我有其他信息，包括精确定位其营业地点的谷歌地图。它看起来很棒，但是他们有几个董事会（10+）并且许多谷歌地图导致页面加载非常缓慢。我几乎无法滚动它加载如此缓慢。（我使用的是 Firefox 20）当我在 Chrome 中进行测试时，它并没有那么慢，但有时会很慢。

有没有办法只加载谷歌地图，直到灯箱打开？

注意：一旦我看到 Google 地图停止加载，页面就会运行得非常流畅。只是在加载 Google 地图时会很慢且不稳定。

这是我的灯箱 HTML：

<div class="hide">
 <div id="name">
  <div class="grid_8">
   <p class="bio">Info Goes Here</p>
   <p>Info Goes Here</p>
  </div>
  <div class="grid_4">
   <iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="map-code"></iframe><br /><small><a target="_blank" href="map-link" style="color:#0000FF;text-align:left">View Larger Map</a></small>
  </div>
  </div>
</div>

我正在使用 Fancybox 2 和 jQuery 1.8.3。

如何在灯箱被触发之前停止加载地图？

【问题讨论】：

在 Fancybox 打开时而不是在 onLoad 上初始化地图
@Ares - 我该怎么做？
分享您如何初始化地图的代码。
@Ares - 我正在使用 Google 的 iframe 地图。我什么都不做初始化地图。
@Ares - 我最终选择了你可能想到的路线。请参阅下面的答案，了解我最终为解决我的问题所做的工作。

标签： javascript jquery google-maps

【解决方案1】：

我无法找到使用<iframe> 嵌入代码的方法。我所做的是在调用 Fancybox 时使用gmap3 加载地图。这是我使用的代码示例：

$(function() {
  $(".fancybox").fancybox({
         beforeLoad : function() {  
            $("#map").gmap3({
                 // MAP OPTIONS
            });
         }
   });  
});

【讨论】：