【发布时间】：2012-07-06 23:50:01
【问题描述】：
嗨，我在隐藏的幻想框中加载谷歌地图时遇到问题
我的例子：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>
【问题讨论】：
-
它不起作用，因为您使用的是 fancybox v2.x。带有fancybox v1.3.4 的选项（不兼容）。检查fancyapps.com/fancybox/#docs 以获取您正在使用的版本的正确选项
标签： jquery html google-maps-api-3 fancybox fancybox-2