Question

嗨我在隐藏的fancybox中加载谷歌地图有问题

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>

Answer 1

fancyBox V2中没有 onComplete ，现在称为 afterLoad 。

但你最好使用 afterShow ，稍后会触发。

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

google maps api v3 in fancybox 2.0.6

1 个答案: