带有谷歌地图的 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 设置为@ 987654329@.

当内联地图可见时，fancybox 能够计算其尺寸，因此当您删除 display:none 时它可以工作。

解决方法应该是在fancybox 已经打开后调整地图的大小，以便地图适合fancybox 的尺寸。您可以为此使用onComplete 回调。

其他注意事项：

• 您可能需要将autoDimensions 设置为true 或false，具体取决于选择器#mapcontainer 是否具有css 尺寸（如果没有则设置为false，否则设置为true。）会认为它有尺寸，因为您可以内联显示地图，因此初始值为true。
• 由于您使用的是内联内容 (fancybox v1.3.x)，请注意 this 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
 });

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

您可以查看https://stackoverflow.com/a/2590049/1055987 以获取更多参考。

更新：我添加了DEMO here

Answer 2

这是hideContentOnClick 参数。尝试将该参数设置为false。