Google maps in Fancybox-wrong display on reopening

Question

Hi, I have a problem with Google maps API. I'm using V3 API and fancybox for show up map in lightbox-like div. When I click on the link for the first time, fancybox opens and map loads as well. Everything seems to be OK, but when I close the fancybox and try to reopen, the map is loaded wrong..It loads only at about half area than it has to. Something may be wrong with the map object which is created at second time opening. When I am reloading the page each time I want to get correct map, it's ok..Problems coming out when I try to open-close-open-close and so on..Does anybody know what I should to do? I like fancybox, but now I am totaly screwed:)bottom are some pieces of my code..Thanks

    $(document).ready(function(){
    $("a.maps").fancybox({
        'overlayOpacity '   : 0.5,
        'transitionIn'      : 'fade',
        'transitionOut'     : 'fade',
        'type'              : 'ajax'
            });
});

THIS CONTENT OF THE FANCYBOX. THE LINK IS CALLED FROM SIMPLE a href=""...

 <script type="text/javascript">
function initialize() {
var myLatlng = new google.maps.LatLng(49.095354,17.749553);
  var myOptions = {
    zoom: 15,
    center: myLatlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    streetViewControl: false
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var marker = new google.maps.Marker({
        position: myLatlng, 
        map: map, 
        title:"DAMN"
    });
}
function detectBrowser() {
  var useragent = navigator.userAgent;
  var mapdiv = document.getElementById("map_canvas");

  if (useragent.indexOf('iPhone') != -1 || useragent.indexOf('Android') != -1 ) {
    mapdiv.style.width = '100%';
    mapdiv.style.height = '100%';
  } else {
    mapdiv.style.width = '400px';
    mapdiv.style.height = '400px';
  }
}
initialize();
detectBrowser();
</script>
<div id="mapaOkolo">
<div id="map_canvas"></div>
</div>

Answer 1

This is a very common problem Please take a look here. Try to use google.maps.event.trigger(map, "resize");

Hope this helps