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 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: ``` ``` Link to show the map: ``` Show Map ``` Actual Div that prints the map (works perfectly when set visible) ```

Accepted Answer

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

JQuery FancyBox with Google Maps

Solution

Problem

Related problems