title: Inline content for colorbox not being displayed
body: <p>i'm trying to display the google map into colorbox popup window by clicking a link that pulls the map from a hidden div. i'm using the <code>inner html</code> concept of colorbox <a href="http://www.jacklmoore.com/colorbox/example1/" rel="nofollow">http://www.jacklmoore.com/colorbox/example1/</a> for loading the map from a hidden div <code>&lt;div id="map_canvas"&gt;&lt;/div&gt;</code> into it's window.</p>
  
  <p>The whole blocks of code is are following</p>
  
  <pre><code>&lt;link rel="stylesheet" href="colorbox.css" /&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="../colorbox/jquery.colorbox.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"src="http://maps.googleapis.com/maps/api/js?key=xyxyxyxyxyxyxyxyxyxyxyxyxyx&amp;sensor=false"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;script type="text/javascript" language="javascript"&gt;
  function initialize() 
  {
      var cenLatlng = new google.maps.LatLng(/////////,///////////);
      var myOptions = {
                         zoom: 15,
                         center: cenLatlng,
                         mapTypeId: google.maps.MapTypeId.ROADMAP
                      }
  
      var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);
  
      var myLatlng = new google.maps.LatLng(/////////,////////////);
      var marker = new google.maps.Marker({
                                            position: myLatlng,
                                            map: map,
                                            title:"XXXXXXXXXXX"
                                         });
  
      var contentString =  '&lt;div class="info"&gt;&lt;img style="float:left;padding-right:10px;" src="/dummy.jpg"&gt;&lt;b&gt;YYYYYYYY&lt;/b&gt; &lt;br/&gt;' +
  
               'ZZZZZZZZZZ &lt;br /&gt;' +
  
               'AAAAAAAAA &lt;br /&gt;' + 
  
               'Telephone: BBBBBBBBB&lt;/div&gt;';
  
      var infowindow = new google.maps.InfoWindow({
                                                    content: contentString,
                                                    width:150,
                                                    height:90
                                                 });
  
      infowindow.open(map,marker);
  
      // Start of newly added code block
      google.maps.event.addListener(marker, 'click', function() {
                                      infowindow.open(map,marker);
                                           });
      // End of newly added code block
  }
      google.maps.event.addDomListener(window, 'load', initialize);
  &lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>    &lt;script&gt;
              $(document).ready(function(){
              $(".inline").colorbox({
                                    inline:true,  
                                    scroll:false
  
  
                                    });
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <hr>
  
  <pre><code> &lt;div id="map_canvas" style=width:700px; height:500px; display:none;&gt;&lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;p&gt;&lt;a class='inline' href="#map_canvas"&gt;Display map in colorbox&lt;/a&gt;&lt;/p&gt;
  </code></pre>
  
  <p>the problem is that the the map isn't displayed at all when it is loaded from the hidden div. On the other hand the map is loaded perfectly both into the hidden div and colorbox window when the div <code>map_canvas</code> isn't hidden.</p>
  
  <p>i shall have to use all the blocks of code for my application but the map should be loaded properly from the hidden div.</p>
  
  <p>Any idea?</p>
  
  <p>By the way, i'm using google api v-3</p>