JQuery FancyBox with Google Maps

Question

I can print the map using the Drupal code in the div. I would like this map to appear inside fancybox and hide on the website. I managed to do this (fancybox is working fine), but the map does not display correctly - there is no navigation on the map and only a gray blank area (although there is a google logo). Does anyone have an idea what might be wrong here? I suppose it could be that the identifier only displays one element, so it only displays the background, and the rest are ignored, but to be honest, I have no idea (use the class instead). Any advice is appreciated. Thanks

My code is:

<script type="text/javascript"> $(document).ready(function() { $("a#inline").fancybox({ 'hideOnContentClick': true, 'overlayColor' : '#ccffee', 'overlayOpacity' : 0.8 }); }); </script> 

Link to display the map:

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

The actual div that prints the card (works fine if set to visible)

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

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> 

Current output -

Answer 1

It seems like a problem (bug?) When google maps are initialized in a hidden div (maybe the same case when using tabs), since display:none can set its width and height to 0 .

When a built-in card is displayed, fancybox is able to calculate its size, so it works when you delete display:none .

The workaround is to resize the card after the fancybox is already open so that the card fits into the fancybox size. You can use the onComplete callback for this.

Other things to keep in mind:

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

So your own fancybox script should look like this:

  $("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 of resizing the map may vary depending on the version of google api maps you are using

You can check fooobar.com/questions/56619 / ... for further reference.

UPDATE I added demo here

Answer 2

This is the hideContentOnClick parameter. Try setting this parameter to false .