带有 Google Maps Inline Div 的 FancyBox答案

【问题标题】：FancyBox with Google Maps Inline Div breaks带有 Google Maps Inline Div 的 FancyBox
【发布时间】：2010-07-21 13:40:10
【问题描述】：

<div style="display: none;">
        <div id="location<?php echo $r->id ?>">

            <?php echo $r->address; ?>, <?php echo $r->city; ?>, <?php echo $r->province; ?>

            <h3 class="sub">Map of Location</h3>
                <?php
                    $CI->conjunction->showMap($r->id, $r->lat, $r->lon, $r->postal, 'map_canvas');
                ?>  
            <div id="map_canvas" style="width: 250px; height: 250px;"></div>            
        </div>
    </div>

上面的代码是我用来显示隐藏的 DIV 的。然后我使用

$('a#inline').fancybox({
      'autoScale': true
    , 'autoDimensions': true
    , 'centerOnScroll': true
});

调用 Fancybox 显示内容。但是，Google 地图总是会破坏灯箱并默认显示。

是否有合理的解决方法强制地图隐藏，直到环绕它的 DIV 显示？

【问题讨论】：

标签： codeigniter maps fancybox

【解决方案1】：

我在填充浏览器视口的 Flash 应用程序中遇到过类似的问题：解决方法是通过 URL 将其拉入带有 fancybox 的 iframe。

        $("a#inline").fancybox({
            'width'             : '95%',
            'height'            : '95%',
            'autoScale'         : false,
            'transitionIn'      : 'slow',
            'transitionOut'     : 'none',
            'type'              : 'iframe'
        });

<a id="various5" href="http://mappage">Link</a>

如您所见，这并不理想，但它是一种解决方法。

【讨论】：

【解决方案2】：

不太清楚如何解决这个问题，但你可能想看看这个插件：

http://colorpowered.com/colorbox/

我使用了 fancybox 一段时间，直到我意识到它让 IE 挂起，直到页面上的所有图像都被加载。也许看看你使用这个插件是否得到相同的结果？

【讨论】：