带谷歌地图的JQuery FancyBox

Question

我可以使用div中的Drupal代码打印地图.我希望这张地图出现在一个花哨的盒子里,并隐藏在网站上.我已经设法做到了(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(设置可见时效果很好)

<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

这似乎是一个问题(错误？)时,谷歌地图是一个隐藏的初始化div(使用标签时可以是相同的情况下),因为display:none可以将其width与height对0.

当内嵌地图可见时,fancybox可以计算其尺寸,因此当您移除时它可以工作display:none.

解决方法应该是在已经打开fancybox后调整地图大小,以使地图适合fancybox尺寸.你可以使用onComplete回调.

其他需要注意的事项:

• 您可能需要设置autoDimensions两种true或false取决于选择是否#mapcontainer有CSS的尺寸或不(设置为false如果没有,否则置true).我想它的尺寸,因为你可以显示地图,内嵌所以的初始值是true.
• 由于您使用的是内联内容(fancybox v1.3.x),请注意此错误.相同的链接也显示了解决方法.

所以你的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
 });

调整地图大小的方法可能会有所不同,具体取决于您使用的Google地图API的版本

您可以访问/sf/answers/181303461/以获取进一步的参考.

更新:我在这里添加了一个DEMO