Embedding Google My Maps in an iframe with Phonegap

Question

I'm trying to embed a map into my Phonegap app. It works well when I test it in a browser. Everything in the app is working perfectly in the Xcode iOS emulator as well. 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:

<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:

This is a picture of the page not loading the map in Xcode's iPhone emulator (after waiting some time):

Answer 1

Try to add this to the config.xml file

<allow-navigation href="*"/>

If still not working add to "Content-Security-Policy" the frame rule

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

Embedding Google My Maps in an iframe with Phonegap

Question

1 answers

solution1
0 2017-03-31 19:04:25

Embedding Google My Maps in an iframe with Phonegap

Question

1 answers

solution1 0 2017-03-31 19:04:25

solution1
0 2017-03-31 19:04:25