Open Google Map in Facebox

I open the editing formula in jQuery Facebox. And under this formula there is a Google map that indicates with geocoding the position of a given address with a marker. Unfortunately, the map does not appear in the layout. On my regular page, it works great. It is strange that I see a part of the map for a short time, then it turns gray (as a background).

I found several posts saying that I should attach the card after the afterReveal event in facebox, e.g.

$(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');
});

In another article, I was asked to fire a resize event ( google.maps.event.trigger(venue_map, 'resize')but that won't work either).

#venue_maphas a fixed width and height of 400 pixels. I also played with z-index div, no luck.

Hope someone can help me, thanks, tux

[Edit:]

. Google Maps, . - .

[Edit2:]

. :