Встраивание Google Мои карты в iframe с Phonegap

Я пытаюсь встроить карту в мое приложение Phonegap. Он хорошо работает, когда я тестирую его в браузере. Все в приложении отлично работает в эмуляторе Xcode iOS. Однако, когда я пытаюсь встроить карту и просмотреть ее в эмуляторе, карта не появляется вообще. Прилагается соответствующий html:

<div id="map-container">
    <iframe src="https://www.google.com/maps/d/embed?mid=1WVW2iTQgoHSU1Bm3DkQJtlVYSAU" width="640" height="480" frameborder="none"></iframe>
</div>

Это изображение страницы прекрасно работает в Safari:
карта в Safari

Это изображение страницы, не загружающей карту в эмулятор iPhone Xcode (после некоторого ожидания):
карта в Xcode Simulator

1 ответ

  1. Попробуйте добавить это в конфигурацию.XML-файл

    <allow-navigation href="*"/>
    

    Если все еще не работает, добавьте в «Content-Security-Policy» правило фрейма

    frame-src * gap://ready 'unsafe-inline' 'unsafe-eval';
    

    Я использую его в этой форме с динамическим контентом

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