Показать карту в fancybox

У меня на мой взгляд fancybox.

Когда я его открываю, я должен показать на нем карту.

Вот div для fancybox

<div id = "markers_map" style = "display:none">
  <div id = "map_screen">
    <div class = "clear"></div>

  </div>
</div>

И я открываю его и пытаюсь показать карту вот так:

$('#b_google_map_table').on("click", function() {
  $.fancybox.open($("#markers_map"), {
    width: 800,
    height: 500
  });
  mapboxgl.accessToken = token;
  let map = new mapboxgl.Map({
    container: 'markers_map',
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [-96, 37.8],
    zoom: 14
  });
});

Он открывает fancybox, но не может загрузить карту. В чем моя проблема?

ОБНОВИТЬ

Пытался переписать вот так

$("#b_google_map_table").on("click", function(){
  $.fancybox.open($("#markers_map"), { width: 800,height:500, afterShow(){
    mapboxgl.accessToken = token;
    let map = new mapboxgl.Map({
          container: "map_screen",
          style: "mapbox://styles/mapbox/streets-v9",
          center: [-96, 37.8],
          zoom: 14
    });
  }, 
});
});

Но он все еще не показывает карту в fancybox