google maps api v3 in fancybox 2.0.6
gid*_*ior 2 html jquery fancybox google-maps-api-3 fancybox-2
嗨我有一个问题与隐藏的fancybox谷歌地图加载
我的例子: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>
onComplete在fancyBox V2中没有了,它afterLoad现在被称为.
但是你最好使用afterShow它,稍后会发射.
http://fancyapps.com/fancybox/#docs
| 归档时间： |
|
| 查看次数： |
4332 次 |
| 最近记录： |