JQuery FancyBox with Google Maps

问题

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

My code:

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

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

</script>

Link to show the map:

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

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>

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>

The current output -

回答1:

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.

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

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.

Other things to bear in mind:

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.

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
 });

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

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

UPDATE: I have added a DEMO here