JQuery FancyBox与Google地图 [英] JQuery FancyBox with Google Maps

问题描述

我可以使用Drupal代码在div中打印地图。我想让这张地图出现在一个fancybox内，并隐藏在网站上。我设法做到（fancybox工作确定），但地图不正确显示 - 没有导航和地图内只有灰色空白区域（虽然google标志在那里）。有没有人有一个想法，这里可能是错误的？我想这可能是这样的情况下，ID只呈现一个元素，所以它只呈现背景，其余的被忽略，但老实说，我不知道（使用类）。任何建议赞赏。感谢

I am able to print the map using Drupal code in a div. I would like this map to appear inside a fancybox and to be hidden on the website. I've managed to do it (fancybox works ok) however the map is not displayed correctly - there is no navigation and only grey empty area inside Map (though google logo is there). Does anyone have an idea what could be wrong here? I guess it might be the case that ID renders only one element, so it only renders the background and the rest is ignored, but to be honest I have no idea(use class instead). Any advice appreciated. Thanks

我的代码：

<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（设置为可见时完美）

Actual Div that prints the map (works perfectly when set visible)

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

PHP代码生成以下html：

The PHP code generates the following 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> 

当前输出 -

推荐答案

google地图初始化时似乎是一个问题因为 display：none 可以设置 $ c> width 和 height 至 0 。

It seems to be an issue (bug?) when google maps is initialized in a hidden div (can be the same case when using tabs) since display:none may set its width and height to 0.

当内联映射可见时，fancybox可以计算其尺寸，因此当您移除 display：none 时，它可以工作。

When the inline map is visible, fancybox is able to compute its dimensions, hence it works when you remove display:none.

解决方法应该是一旦fancybox已经打开，重新调整地图大小，以便地图适合fancybox尺寸。您可以使用 onComplete 回调。

The workaround should be resizing the map once the fancybox is already opened so the map will fit into the fancybox dimensions. You can use the onComplete callback for that.

其他注意事项：

• 您可能需要设置 autoDimensions true 或 false c $ c> #mapcontainer 有css维或不设置（如果没有设置为 false ，否则设置为 true 。）我认为它有维度，因为你可以显示地图内联，所以初始值将 true 。


• 由于您使用内嵌内容（fancybox v1.3.x），请注意此错误。

• You may need to set autoDimensions either true or false depending on whether the selector #mapcontainer has css dimensions or not (set to false if not, otherwise set to true.) I would think it has dimensions since you can display the map inline so the initial value would be true.
• Since you are using inline content (fancybox v1.3.x) beware of this bug. The same link also shows the workaround.

因此，您的fancybox自订指令码应如下所示：

So your fancybox custom script should look like:

 $("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的版本

the method to resize the map might be different depending on the version of google maps API you are using

您可以检查 http://stackoverflow.com/a/2590049/1055987 以供进一步参考。

You can check http://stackoverflow.com/a/2590049/1055987 for further reference.

UPDATE ：我添加了 DEMO here

这篇关于JQuery FancyBox与Google地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！