Magnfifc彈出窗口中的灰色Google地圖

Question

我使用以下代碼通過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"); 但它不起作用。

這里是 codepen重現此問題。

Answer 1

由於popip的類型，似乎出現了灰色的Google地圖問題： 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");
        }
    }
});