Ifream with google maps on mobile app

Question

im building and app for android that use google maps embed with i frame all this on intel xdi plus cordova on html5 the problem is sometimes the apk show all black and it didn't show the map or is not well centre sometimes looks all fine but is like random pls some advice so fix that

<html>
<head></head>
<body>
<style>
.wrapper {
 position: relative;
 padding-bottom: 165%; // This is the aspect ratio
 height: 0;
 overflow: hidden;
        }
       .wrapper iframe {
         position: absolute;
         top: 0;
         left: 0;
         width: 100% !important;
         height: 93% !important;
                    }
</style>


<div class="wrapper">

  <iframe src="http://mapbuildr.com/frame/hc0v2v" frameborder="0"></iframe> </div>
</body>
</html>

I'm not familiar with mapbuildr, but many sites don't allow themselves to be shown in an iframe for security reasons. I don't know if that's what's going on in this case, but you might want to try the "Geolocation Demo" sample in "Samples and Demos"->General->"HTML5 + Cordova". — OldGeeksGuide, Dec 10 '15 at 18:49
i try to use that but it didn`t work well for my project ty anyway — Nicolas Rudisky, Dec 10 '15 at 19:59

score 1 · Accepted Answer · answered Dec 15 '15 at 19:26

Some old android devices dont initialize height and width immediately, try loading map after Cordova deviceready event is fired, here is sample code I tested, this loads the iframe src after deviceready event is fired:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <style>
        .wrapper {
            position: relative;
            padding-bottom: 165%; // This is the aspect ratio
            height: 0;
            overflow: hidden;
        }
        .wrapper iframe {
            position: absolute;
            top: 0;
            left: 0;
            width: 100% !important;
            height: 93% !important;
        }
    </style>
    <script src="cordova.js"></script>
    <script>
        document.addEventListener("deviceready", function(){
            document.getElementById("map").src = "http://mapbuildr.com/frame/hc0v2v"; 
        }, false);
    </script>    
</head>
<body>
    <div id="mapa_2" class="upage-content vertical-col left hidden">
        <div class="wrapper">
            <iframe id="map" src="" frameborder="0"></iframe>
        </div>
    </div>
</body>
</html>

thanks, in case of multiplies maps i have to add all the maps to the meta with script to improve the performance or there is another way? — Nicolas Rudisky, Dec 16 '15 at 12:05
its better to add all code in the deviceready callback function, it will make sure all code starts executing after device is initialized — krisrak, Dec 16 '15 at 14:38
i add multiples script for every single map mmm... im new at this... =/ — Nicolas Rudisky, Dec 16 '15 at 14:46

Ifream with google maps on mobile app

1 Answers1