Magnific Popup 中的灰色 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 徽标和 "Terms of using"）

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

Here is codepen 重现了这个问题。

Answer 1

似乎灰色 google 映射问题是由于 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");
        }
    }
});

Magnific Popup 中的灰色 Google 地图

Gray Google Map in Magnfifc Popup

javascript

google-maps

popup

magnific-popup