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

Question

У меня 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

Answer 1

Похоже, вы должны использовать afterShow обратный вызов, см. Примеры здесь http://fancyapps.com/fancybox/3/docs/#events

Примерно так:

$('#b_google_map_table').on("click", function() {

  $.fancybox.open(
    src: "#markers_map",
    type: 'inline', 
    afterShow : function() {

      mapboxgl.accessToken = token;
      let map = new mapboxgl.Map({
        container: 'markers_map',
        style: 'mapbox://styles/mapbox/streets-v9',
        center: [-96, 37.8],
        zoom: 14
      });

    }
  });

});