2012-07-06 249 views
2

您好,我有隱藏的fancybox與谷歌地圖加載問題谷歌地圖API V3 2.0.6

enter image description here

我的例子:gidzior.net/fancyMap基於此線程寫stackoverflow.com/questions/10890948/jquery-fancybox-with-google-maps

什麼都可以我會解決這個問題嗎?

這是我的代碼:

<body style="padding: 20px;"> 
    <!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]--> 
    <header> 
     <a id="inline" href="#inline1" >show map</a> 
    </header> 
    <div role="main"> 
     <div id="inline1" style="width:800px; height: 350px; display: none;"> 
      <div id="map_canvas" style="width: 100%; height: 100%"></div> 
     </div> 
    </div> 


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js"><\/script>')</script> 

    <script src="js/plugins.js"></script> 
    <script src="js/libs/jquery.fancybox.pack.js"></script> 
    <script src="js/libs/jquery.mousewheel-3.0.6.pack.js"></script> 
    <script src="js/script.js"></script> 

    <script type="text/javascript"> 
    var map=""; 
    $(document).ready(function(){ 
    $("a#inline").fancybox({ 
     'hideOnContentClick': false, // so you can handle the map 
     'overlayColor'  : '#ccffee', 
     'overlayOpacity' : 0.2, 
     'autoDimensions': true, // the selector #mapcontainer HAS css width and height 
     'onComplete': function(){ 
     google.maps.event.trigger(map, "resize"); 
     }, 
     'onCleanup': function() { 
     var myContent = this.href; 
     $(myContent).unwrap(); 
     } // fixes inline bug 
    }); 
    // map 
    map = new google.maps.Map(
     document.getElementById("map_canvas"), { 
     zoom: 9, 
     center: new google.maps.LatLng(49.261226,-123.113928), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
     } 
    ); 
    }); // ready 
</script> 
</body> 
+2

,因爲你正在使用的fancybox v2.x.這是行不通的與fancybox v1.3.4的選項(這是不兼容的)。檢查http://fancyapps.com/fancybox/#docs是否正確使用您正在使用的版本 – JFK 2012-07-07 01:07:34

回答

7

有一個在V2的fancybox不onComplete了,它現在被稱爲afterLoad

但是你最好使用afterShow,它會稍後啓動。

http://fancyapps.com/fancybox/#docs

+1

for v2.0.6我會建議'beforeShow' – JFK 2012-07-07 03:11:43