Open Google Map in Facebox

Question

I'm opening an edit formula within a jQuery Facebox. And under that formular there is a Google Map which indicates with the geocoder the position of the given address with a marker. Unfortunately, the map isn't shown within the facebox. At my normal page, it works great. The strange thing is, that I can see a part of the map for a short time, then it becomes grey (as the background).

I found some posts, which says that I should attach the map after the afterReveal event of facebox, like this

$(document).bind("afterReveal.facebox", function(){

  var center = new google.maps.LatLng(Globals.DEFAULTLAT, Globals.DEFAULTLNG)
  var options = {
    panControl: false,
    zoomControl: true,
    zoomControlOptions: {
      style: google.maps.ZoomControlStyle.SMALL,
      position: google.maps.ControlPosition.TOP_CENTER
    },
    scaleControl: false,
    streetViewControl: false,
    mapTypeControl: false,
    zoom: 12,
    center: center,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  var venue_map = new google.maps.Map($("#venue_map")[0], options);

  // google.maps.event.trigger(venue_map, 'resize');
});

Another post told me to trigger the resize event to the venue (google.maps.event.trigger(venue_map, 'resize'), but this doesn't work either.

The #venue_map has a fixed width and height of 400px. I've also played with the z-index of the div, no luck.

Hope someone can help me, thx, tux

[Edit:]

Here is a screenshot of the broken map. It loads the Google Maps Logo, Terms of Use text and a small bar on the left side. The grey background is the one of my facebox.

[Edit2:]

It's going to be weird. Sometimes, the map is displayed like this:

Answer 1

is it possible that there are some css definitions for the content in the facebox body?