title: JQuery FancyBox with Google Maps
body: <p>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</p>
  
  <p>My code:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
  
      $("a#inline").fancybox({
      'hideOnContentClick': true,
      'overlayColor'      : '#ccffee',
      'overlayOpacity'    : 0.8
      });
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>Link to show the map:</p>
  
  <pre><code>&lt;a id="inline" href="#mapcontainer" &gt;
  Show Map
  &lt;/a&gt;
  </code></pre>
  
  <p>Actual Div that prints the map (works perfectly when set visible)</p>
  
  <pre><code>&lt;div style="display:none"&gt;
  &lt;div id="mapcontainer"&gt;
  &lt;?php print $node-&gt;content['field_maploc']['field']['items']['#children'] ?&gt; &lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The PHP code generates the following html:</p>
  
  <pre><code>&lt;div style="width: auto; height: 400px;" id="openlayers-container-openlayers-map-auto-id-0" class="openlayers-container openlayers-container-preset-question_map"&gt; &lt;div style="width: auto; height: 400px;" id="openlayers-map-auto-id-0" class="openlayers-map openlayers-preset-question_map"&gt;&lt;/div&gt; &lt;/div&gt; 
  </code></pre>
  
  <p>The current output - <img src="https://i.stack.imgur.com/yARxH.jpg" alt="output"></p>