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:

<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 - output

If I remove Display:none everything works perfectly, but the map is displayed on the page as well..any idea how to hide it in a different way? — Vonder, Jun 05 '12 at 14:36
Maybe I am missing something here, I was expecting to see some code from google or if the map was rendering within an iframe or so. Your html code doesn't say anything to me but nested `div` with no content. QUESTION: do you really need to print the map via Drupal code or you would rather link to the map directly via fancybox?? What I mean is if the map has to be hidden in your page (which would affect the page load) or just call it directly with fancybox? — JFK, Jun 05 '12 at 16:25
The map is rendered via the drupal field, I dont have the actual gmap code, becuase it is rendered dynamically via third party module. That's also why it cannot be rendered via iframe. But that's not the issue - the map is rendered 100% ok, it is an issue with css/fanybox/display:none. When I remove display:none it renders OK in the fancybox, so no issue with the php code. I am sure it is something with html IDs and fancybox. But I read there is a lot of problems with inline fancybox embedding. — Vonder, Jun 05 '12 at 16:45
you are using fancybox v1.3.4, aren't you? got any link to see the issue? — JFK, Jun 05 '12 at 17:08
@JFK Yes - 1.3.4. Do you think that v2 can solve the problem? It is running locally, but see the image. — Vonder, Jun 05 '12 at 18:20
Have you tried hiding that div using jquery on load instead of inline style? — AR., Jun 05 '12 at 20:05

score 5 · Answer 1 · edited May 23 '17 at 12:03

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

Wow, many thanks! It didn't change anything except from close button not working now. But I checked and it seems that I am using api v2...Can you please give me the code for it, I am confused now..Thank you so muh for your help! — Vonder, Jun 05 '12 at 21:26
OK solved it! I removed display:none, put it in a wrapper with width and height equal to 0 and margin -9999px. Works perfectly. It wasn't the case with map resize - now it works with both google and yahoo maps, rather strange behaviour of display property. Many thanks for your help anyway! — Vonder, Jun 05 '12 at 21:51
For google maps v2 check https://developers.google.com/maps/documentation/javascript/v2/reference#GMap2 .... it may help somebody else (checkResize() method) — JFK, Jun 06 '12 at 01:18

score 0 · Answer 2 · edited Jun 06 '12 at 01:19

0

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

edited Jun 06 '12 at 01:19

Asherah

18,948
5
53
72

answered Jun 05 '12 at 03:53

watercolor12

15
2
5

it is not.. The map is not randered properly, no navigation buttons, no actual streets, just the bakground, however it works perfectly when outside fancybox. – Vonder Jun 05 '12 at 14:31
when I remove display:none everything works but the map appears on the page as well, not only within fancybox... – Vonder Jun 05 '12 at 14:37
maybe this will help [https://github.com/fancyapps/fancyBox/issues/115](https://github.com/fancyapps/fancyBox/issues/115) – watercolor12 Jun 05 '12 at 15:01

JQuery FancyBox with Google Maps

2 Answers2

Linked