title: Fancybox Not Opening Google Map Correctly
body: <p>I am trying to open Google Map inside fancybox by clicking thumbnail which is also a Google Map. Fancybox is opening fine but did not show map properly on fancybox.</p>
  
  <p>If I zoom/resize map on fancybox then it is working fine. Here is my code that I am using to generate map.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"&gt;     
  &lt;/script&gt;
  
  &lt;script&gt;
  var mapHash = [];
  var bound = new google.maps.LatLngBounds();
  finishedCoding = false;
  function initMap(map_container_div) {
  
      var latlng = new google.maps.LatLng(38.5111, -96.8005);
      if(map_container_div == 'map1')
      {
          var myOptions = {
          zoom:0,
          center:latlng,
          mapTypeId:google.maps.MapTypeId.ROADMAP
      };
  
      }
      else
      {
      var myOptions = {
          zoom:1,
          center:latlng,
          mapTypeId:google.maps.MapTypeId.ROADMAP,
          streetViewControl: false
      };
      } 
  
      if(map_container_div == 'map1')
      {
          var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);
      }
      else
      {
          var map = new google.maps.Map(document.getElementById(map_container_div), myOptions);           
      }
  
      if (!getMap(map_container_div)) {
          var mapInfo = {
              mapkey:'',
              map:'',
              geocoder : new google.maps.Geocoder()
          };
          mapInfo.map = map;
          mapInfo.geocoder = new google.maps.Geocoder();
          mapInfo.mapKey = map_container_div;
          mapHash.push(mapInfo);
      }
  }
  
  function palceMarker(myAddress, mapId) {
          mapIndex = getMap(mapId)
      //alert(myAddress + mapId + map)
      mapHash[mapIndex].geocoder.geocode({
          'address':myAddress
      }, function (results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
              mapIndex = getMap(mapId)
              var marker = new google.maps.Marker({
                  map:mapHash[mapIndex].map,
                  position:results[0].geometry.location,
                  title: results[0].formatted_address
              });
              bound.extend(results[0].geometry.location);
              mapHash[mapIndex].map.fitBounds(bound);
  
              finishedCoding = true;
  
          }
      });
  }
  
  function getMap(mapKey) {
  
      for (var i = 0 ; i &lt; mapHash.length ; i++) {
          if (mapHash[i].mapKey == mapKey) {
              return i;
          }
      }
      return false;
  }
  
  function init() {
      initMap("map1")
      initMap("map_thumb")
  
      palceMarker("1/86-100 Market St, Sydney New South Wales 2000", "map1")
      palceMarker("120 Market St, Sydney New South Wales 2000", "map_thumb")
  }
  </code></pre>
  
  <p></p>
  
  <p>HTML Code Is :
      
      
      
      </p>
  
  <pre><code>&lt;div style="display:none;"&gt;
  &lt;div id="map1" style="width: 900px; height: 480px; position: relative; background-color: rgb(229, 227, 223); overflow: hidden;" &gt;
  &lt;/div&gt;
  &lt;/div&gt; &lt;!-- large map div ends --&gt;
  </code></pre>
  
  <p>Code For FancyBox:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
      $(document).ready(function() {
      init();
      $("a#inline").fancybox({
      'hideOnContentClick': false,
      'overlayColor'      : '#6b0202',
      'overlayOpacity'    : 0.8,
      'width' : '100%',
      'height' : '100%',
      'afterLoad': function(){
      google.maps.event.trigger(map, "resize");
    }
  
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>Currently Opening Popup:</p>
  
  <p>![enter image description here][1]</p>