2

We are building a android application using Ionic (+Cordova).

It all works in my browser, but when I build it and run the .apk this happens:

External images won't appear, and embeded google maps remain empty. The following code at our index.html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    <title></title>
    <link href="lib/ionic/css/ionic.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">

    <!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
    <link href="css/ionic.app.css" rel="stylesheet">
    -->

    <!-- ionic/angularjs js -->
    <script src="lib/ionic/js/ionic.bundle.js"></script>
    <script src="js/ng-cordova.min.js"></script>

    <!-- cordova script (this will be a 404 during development) -->
    <script src="cordova.js"></script>

    <!-- your app's js -->
    <script src="js/app.js"></script>
</head>
<body ng-app="starter">

    <ion-pane>
          <ion-header-bar class="bar-stable">

          </ion-header-bar>
          <ion-content>
            <div class="main" role="main">

                <p id="geolocation">Finding geolocation...</p>
                <img src="http://placehold.it/350x150.png" alt="no image" />

                <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d635472.0298105411!2d5.1189025!3d51.525825749999996!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1snl!2snl!4v1432033961557" width="600" height="450" frameborder="0" style="border:0"></iframe>
            </div>
          </ion-content>
    </ion-pane>
</body>
</html>

In the config.xml we've created the following lines just after the closing tag of :

<allow-navigation href="*" />
<allow-intent href="*" />
Bart Roelofs
  • 431
  • 1
  • 7
  • 18
  • whats your internet permission? –  May 19 '15 at 11:56
  • 1
    possible duplicate of [Issue with Android Hybid app to display remote image with Ionic framework?](http://stackoverflow.com/questions/29912773/issue-with-android-hybid-app-to-display-remote-image-with-ionic-framework) – Keval May 19 '15 at 11:56
  • @mahdi pishguy do you mean this line? – Bart Roelofs May 19 '15 at 12:02
  • 2
    You need to add the whitelist plugin http://stackoverflow.com/questions/30132885/ionic-app-cannot-connect-cors-enabled-server-with-http/30135532#30135532 – aorfevre May 19 '15 at 12:04

2 Answers2

9

Check your manifest to allow your app to use internet.

<uses-permission android:name="android.permission.INTERNET" />

If you are using cordova 5 (Android platform version 4.0.0) then you should include the whitelist plugin and also the new content security policy meta tag to allow google maps api to load like this (on the top of your html file along with the rest meta tags):

<meta http-equiv="Content-Security-Policy" content="default-src *;
 style-src 'self' 'unsafe-inline' http://fonts.googleapis.com/;
script-src 'self' 'unsafe-inline' 'unsafe-eval' http://*.googleapis.com
 http://maps.gstatic.com;">

EDIT: Check also your config.xml what access you give:

<access origin="*" />

for instance to allow all connections

If it doesn't work please check your logs and post any errors.

JcDenton86
  • 933
  • 1
  • 12
  • 32
  • I had the same issue, adding `android.permission.INTERNET` did the trick, I have no idea how the permission was removed ! – Azmeer Apr 29 '16 at 00:57
0

No forget add

android:usesCleartextTraffic="true"

into application tag on AndroidManifest.xml

After test into real device.

jlgranda
  • 679
  • 5
  • 6