Magnific Popup 中的灰色 Google 地图
Gray Google Map in Magnfifc Popup
我正在使用以下代码通过 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 重现了这个问题。
似乎灰色 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 创建弹出窗口:
$.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 重现了这个问题。
似乎灰色 google 映射问题是由于 popip 的类型引起的:type: 'image'
。所以我不得不把它改成type: 'inline'
。但是,它需要更改一些标记代码才能正确呈现图像。基本上我们需要直接在 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");
}
}
});