FancyBox with Google Maps Inline Div breaks

Question

<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>

The above code is what I am using to display a hidden DIV. I then use

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

To call Fancybox to display the content. However, the Google map always breaks the lightbox and is displayed by default.

Is there a reasonable workaround to force the map to hide until the DIV wrapping around it shows?

Answer 1

I have had a similar problem with flash applications which fill the browser viewport: the workaround was to pull it via a URL into an iframe with fancybox.

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

<a id="various5" href="http://mappage"&gt;Link&lt;/a&gt;

This is not ideal as you can see but it is a workaround.

Answer 2

Not quite sure how to solve this problem, but you might want to look into this plugin:

http://colorpowered.com/colorbox/

I was using fancybox for a while until I realized it made IE hang until all the images on the page were loaded. Maybe see if you get the same results using this plugin?