[英]Embedding Google My Maps in an iframe with Phonegap
I'm trying to embed a map into my Phonegap app. 我正在尝试将地图嵌入到我的Phonegap应用程序中。 It works well when I test it in a browser. 当我在浏览器中对其进行测试时,它运行良好。 Everything in the app is working perfectly in the Xcode iOS emulator as well. 该应用程序中的所有内容也可以在Xcode iOS模拟器中完美运行。 However, when I try to embed the map and view it in the emulator, the map doesn't appear at all. 但是,当我尝试嵌入地图并在模拟器中查看时,地图根本不显示。 Attached is the relevant html: 附件是相关的html:
<div id="map-container">
<iframe src="https://www.google.com/maps/d/embed?mid=1WVW2iTQgoHSU1Bm3DkQJtlVYSAU" width="640" height="480" frameborder="none"></iframe>
</div>
This is a picture of the page working fine in Safari: 这是该页面在Safari中正常运行的图片:
This is a picture of the page not loading the map in Xcode's iPhone emulator (after waiting some time): 这是该页面未在Xcode的iPhone模拟器中加载地图的图片(等待了一段时间):
Try to add this to the config.xml file 尝试将其添加到config.xml文件中
<allow-navigation href="*"/>
If still not working add to "Content-Security-Policy" the frame rule 如果仍然无法使用,请添加到“ Content-Security-Policy”框架规则
frame-src * gap://ready 'unsafe-inline' 'unsafe-eval';
I am using it in this form with dynamic content 我正在以这种形式使用动态内容
function AddMap() {
// The Url
var mapUrl = "http://www.google.com/maps/d/embed?mid=1WVW2iTQgoHSU1Bm3DkQJtlVYSAU";
// The iframe, don't forget to use the sandbox options
var iframe = '<iframe src="' + mapUrl + '&ll=38.66174332764711%2C-121.12734470700838&z=18" id="frameMap" width="640" height="480" sandbox="allow-same-origin allow-scripts"></iframe>';
var doc = '<!DOCTYPE html><html><body>' + iframe + '</body></html>';
// Assign it to the div
$("#map-container").html(doc);
// Write to log when is full loaded
$("#frameMap").load(function () {
console.log("Frame loaded.");
});
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.