0 Replies Latest reply on Oct 3, 2017 1:05 PM by kennexcorp

    google map displays on browser but doesn't display after building to android.

    kennexcorp Level 1

      Index.html page

       

      <!DOCTYPE html>

      <html>

      <head>

         <meta http-equiv="Content-Security-Policy" content="style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src 'self' https://fonts.gstatic.com data:" />

       

        <style>

         #map_holder {

         height: 300px;
         background-color: #00caf2;
         }

         </style>

      </head>

       

      <body>

        

        <div id="map_holder">Map view here</div>

        

        <script type="text/javascript" src="cordova.js"></script>

        <script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>

        <script type="text/javascript" src="js/my-app.js"></script>

        <script type="text/javascript" async defer
        src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_MAP_API_KEY_HERE">

        </script>

      </body>

       

      </html>

       

      my-app.js page

      var myApp = new Framework7();

      var $$ = Dom7;

      // Handle Cordova Device Ready Event

      $$(document).on('deviceready', function() {

         //myApp.alert("Android Device is ready!", "Device Ready");
         if (navigator.geolocation){

         myApp.alert("Location obtained");
         navigator.geolocation.getCurrentPosition(onSuccess, onError, {enableHighAccuracy: true, timeout: 10000});
         } else {

         myApp.alert("Location not obtained");
         }

      });

      $$(document).on('pause', function () {

         if (navigator.geolocation){

         myApp.alert("Location obtained");
         navigator.geolocation.getCurrentPosition(onSuccess, onError);
         } else {

         myApp.alert("Location not obtained")

        }

      });

       

       

      function onSuccess(position) {

         console.log("I was here");
         var longitude = position.coords.longitude;
         console.log(longitude);
         var latitude = position.coords.latitude;
         console.log(latitude);
         var latLong = new google.maps.LatLng(latitude, longitude);

         var mapOptions = {

         center: latLong,
         zoom: 20,
         mapTypeId: google.maps.MapTypeId.ROADMAP

        };

         map = new google.maps.Map(document.getElementById("map_holder"), mapOptions);

         var marker = new google.maps.Marker({

         position: latLong,
         map: map,
         title: 'my location'
         });
      }


      function onError(error) {

         myApp.alert(error.code);
      }

       

      config.xml

      <?xml version='1.0' encoding='utf-8'?>

      <widget id="com.kennexcorp.response" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">

          <name>App name</name>

          <description>

              App desc

          </description>

          <author email="mail@example.com" href="http://cordova.io">

              description

          </author>

          <content src="index.html" />

          <access origin="*" />

          <access origin="*.google.com" />

          <access origin="*.googleapis.com" />

          <allow-intent href="http://*/*" />

          <allow-intent href="https://*/*" />

          <allow-intent href="tel:*" />

          <allow-intent href="sms:*" />

          <allow-intent href="mailto:*" />

          <allow-intent href="geo:*" />

          <platform name="android">

              <preference name="android-minSdkVersion" value="14" />

              <allow-intent href="market:*" />

          </platform>

          <platform name="ios">

              <allow-intent href="itms:*" />

              <allow-intent href="itms-apps:*" />

              <preference name="BackupWebStorage" value="none" />

          </platform>

          <preference name="DisallowOverscroll" value="true" />

          <plugin name="cordova-plugin-whitelist" spec="~1.2.0" />

          <plugin name="cordova-plugin-console" spec="~1.0.1" />

          <plugin name="cordova-plugin-statusbar" spec="~1.0.1" />

          <engine name="android" spec="~6.2.3" />

          <plugin name="cordova-plugin-geolocation" spec="~2.1.0" />

      </widget>