JQuery FancyBox with Google Maps

Question

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 wo

Answer 1

It's the hideContentOnClick parameter. Try setting that parameter to false.

Answer 2

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