Magnific Popup 中的灰色 Google 地图答案

【问题标题】：Gray Google Map in Magnfifc PopupMagnific Popup 中的灰色 Google 地图
【发布时间】：2017-03-11 13:10:05
【问题描述】：

我正在使用以下代码通过 Magnific Popup 创建一个弹出窗口：

$.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");
        }
    }
});

问题是地图完全是灰色的！（仅显示 Google 徽标和“使用条款”）

我尝试使用trigger(map, "resize");，但它不起作用。

Here iscodepen 重现此问题。

【问题讨论】：

标签： javascript google-maps popup magnific-popup

【解决方案1】：

似乎由于popip类型：type: 'image'而出现灰色谷歌地图问题。所以我不得不把它改成type: 'inline'。但是，它需要更改一些标记代码才能正确呈现图像。基本上我们需要在src:中直接插入带有图像的html代码：

$.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");
        }
    }
});

【讨论】：