Gray Google Map in Magnfifc Popup

Question

I am creating a popup through Magnific Popup with this 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");
        }
    }
});

The problem is that map is completely gray! (only Google logo and "Terms of using" are showing)

I tried to use trigger(map, "resize"); but it is not working.

Here is codepen reproducing this problem.

Answer 1

It seems that gray google maps problem occurs because of the type of popip: type: 'image'. So I had to change it to type: 'inline'. However it requires some markup code changes in order for image to be rendered correctly. Basically we need to insert html code with an image directrly in src::

$.magnificPopup.open({
    items: { type: 'inline', 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>'
    },
    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");
        }
    }
});