JQuery的的fancybox与谷歌地图(JQuery FancyBox with Google

我可以打印使用Drupal的代码在一个div地图。我想这个地图出现的fancybox内，并在网站上被隐藏。我已经成功地做到这一点（的fancybox工作正常），但是不正确显示的地图 - 没有导航地图里面只有灰色空白区域（虽然谷歌的标志是存在的）。没有人有一个想法可能是错在这里？我想这可能是ID呈现只有一个元素，所以它只是呈现的背景，其余被忽略的情况，但说实话，我不知道（使用类代替）。任何意见赞赏。谢谢

我的代码：

<script type="text/javascript">
    $(document).ready(function() {

    $("a#inline").fancybox({
    'hideOnContentClick': true,
    'overlayColor'      : '#ccffee',
    'overlayOpacity'    : 0.8
    });
});

</script>

链接显示的地图：

<a id="inline" href="#mapcontainer" >
Show Map
</a>

一个打印地图实际股利（完美的作品集时可见）

<div style="display:none">
<div id="mapcontainer">
<?php print $node->content['field_maploc']['field']['items']['#children'] ?> </div></div>

PHP代码生成下面的HTML：

<div style="width: auto; height: 400px;" id="openlayers-container-openlayers-map-auto-id-0" class="openlayers-container openlayers-container-preset-question_map"> <div style="width: auto; height: 400px;" id="openlayers-map-auto-id-0" class="openlayers-map openlayers-preset-question_map"></div> </div>

电流输出 -

Answer 1:

这似乎是一个问题，当谷歌地图在一个隐藏的初始化（？BUG） div ，因为（可以使用标签时是相同的情况下） display:none可以将其设置width和height ，以0 。

当在线地图可见，的fancybox能够计算其尺寸，因此它的工作原理，当你删除display:none 。

解决方法应该调整地图一旦被的fancybox已经打开，因此地图会融入的fancybox尺寸。您可以使用onComplete回调了点。

其他的事情要牢记：

您可能需要设置autoDimensions无论是true还是false取决于选择是否#mapcontainer有CSS的尺寸或不（设置为false ，如果不是，否则设置为true 。）我认为它有尺寸，因为你可以显示地图，内嵌所以初始值将是true 。
由于使用的是内嵌的内容（的fancybox v1.3.x）提防这个bug 。相同的链接也显示了解决方法。

所以，你的fancybox自定义脚本应该是这样的：

 $("a#inline").fancybox({
  'hideOnContentClick': false, // so you can handle the map
  'overlayColor'      : '#ccffee',
  'overlayOpacity'    : 0.8,
  '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
 });

以调整图的方法可能因谷歌地图API，你的版本是不同的使用

您可以检查https://stackoverflow.com/a/2590049/1055987以备将来参考。

更新：我已经添加了此DEMO