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

Вышеприведенный код - это то, что я использую для отображения скрытого DIV. Затем я использую

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

Для вызова FancyBox для отображения содержимого. Однако карта Google всегда разбивает лайтбокс и отображается по умолчанию.

Есть ли разумное обходное решение, чтобы заставить карту спрятаться до тех пор, пока не появится обтекание DIV вокруг нее?

Answer 1

У меня была аналогичная проблема с флеш-приложениями, которые заполняют окно просмотра браузера: обходным путем было вытащить его через URL-адрес в iframe с fancybox.

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

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

Это не идеальное, как вы можете видеть, но это обходное решение.

Answer 2

Не совсем уверен, как решить эту проблему, но вы можете захотеть взглянуть на этот плагин:

http://colorpowered.com/colorbox/

Я использовал FancyBox на некоторое время, пока я не понял, что это сделал IE повесить, пока все изображения на странице были загружены. Может быть, посмотрите, получаете ли вы те же результаты с помощью этого плагина?