JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://fancyapps.com/fancybox/source/jquery.fancybox.js"></script>
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/jquery.fancybox.css">
<link rel="stylesheet" href="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.css">
<script src="http://fancyapps.com/fancybox/source/helpers/jquery.fancybox-thumbs.js"></script>
<a class="fancybox-media" href="#map" title="Некоторый заголовок FancyBox">Хочу карту</a>.

<div id="map"></div>

CSS

.fancybox-media {
  display: inline-block;
  margin: 1em;
  padding: 5px 10px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: bold;
  background: #5A8AB1;
  color: #fff;
}

#map {
  display: none;
  width: 950px;
  height: 600px;
}

JavaScript

$(function() {
  var init = false;

  $('.fancybox-media').fancybox({
    openEffect: 'none',
    closeEffect: 'none',
    beforeLoad: function() {
      if (init) return;
      loadMap(950, 650, 'map');
      init = true;
    },
    helpers: {
      title: {
        type: 'inside',
        position: 'bottom'
      },
      media: {}
    }
  });

  function loadMap(width, height, target) {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = '//api-maps.yandex.ru/services/constructor/1.0/js/?sid=XVr6Wn450cnx--RaZkc_gtiOXSQFMB9O&width=' + width + '&height=' + height + '&lang=ru_RU&sourceType=constructor&id=' + target;
    document.head.appendChild(script);
  }
});