Gray Google Maps in Magnific Popup. How to fix?

Question

JavaScript

Hello!
I'm using the Magnific Popup library to display photo popups.
I also need to display a Google map below the photo. To implement this idea, I use the following code:

$.magnificPopup.open({
    items: { src: 'http://lorempixel.com/1920/1080/', type: 'image' },
    image: { markup: '' +
        '<div class="mfp-figure">' +
        '    <div class="mfp-close"></div>' +
        '    <div class="mfp-img"></div>' +
        '    <div class="mfp-bottom-bar"><div id="map"></div></div>' +
        '</div>'
    },
    callbacks: {
        open: function () {
            var map_options = {
                center: {lat: latitude, lng: longitude},
                streetViewControl: false,
                zoom: 8
            };

            var map = new google.maps.Map(document.getElementById('map'), map_options);

            google.maps.event.trigger(map, "resize");
        }
    }
});

In the code above, I simply add a container with a Google Maps map below the photo. The problem is that the map is all grey. Even calling trigger(map, "resize"); doesn't help!
Here is an example on CodePen illustrating the problem.
I can't figure out what could be the problem. Please help.
Already on SO, and in Russian SO asked. Everyone is silent.

Answer 1

I think the point is type: image
Remade to type: inline(universal for custom content):

$('.btn').magnificPopup({
  items: { 
    src: 
          '' +
          '<div class="mfp-figure">' +
          '<button title="Close (Esc)" type="button" class="mfp-close">×</button>' +
          '<img class="mfp-img" src="http://lorempixel.com/1920/1080/">' +
          '<div class="mfp-bottom-bar"><div id="map"></div></div>' +
          '</div>',
    type: 'inline' 
  },
  callbacks: {
    open: function(){
      var map_options = {
                center: {lat: 55.753994, lng: 37.622093},
                //streetViewControl: false,
                zoom: 8
            };

            var map = new google.maps.Map(document.getElementById('map'), map_options);
          
          google.maps.event.trigger(map, "resize");
    }
  },
  
});

See CodePen
PS: slightly changed map coordinates, just for clarity