13 Replies Latest reply on Jan 2, 2017 9:30 AM by VectorP

    Gelocation not working in Android - PhoneGap Build

    ramakrishnanpr

      Hi All,

      Following are my XML, JS and HTML codes. The codes work perfectly fine on the browser, iOS and windows devices, however not on android(wherein I just get a grey patch)

       

      Any help as to why this is not working is really appreciated

       

      XML(intentionally removed the icons and splash screens for android, iOS and windows)

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

      <widget id="com.phonegap.helloworld" version="1.0.0" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">

          <name>APP Name</name>

          <description>

      Description  </description>

          <author email="Auth@email" href=""> Auth Name    </author>

      <content src="index.html" />

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

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

          <preference name="StatusBarOverlaysWebView" value="false" />

          <preference name="StatusBarBackgroundColor" value="#ee6e73" />

          <preference name="StatusBarStyle" value="blacktranslucent" />

          <preference name="orientation" value="portrait" />

          <plugin name="cordova-plugin-statusbar" source="npm" spec="~2.1.3" />

          <plugin name="cordova-plugin-geolocation" source="npm" />

         <plugin name="cordova-plugin-console" source="npm" spec="~1.0.3" />

          <plugin name="cordova-plugin-dialogs" source="npm" spec="~1.2.1" />

          <plugin name="cordova-plugin-whitelist" source="npm" spec="~1.2.1" />

       

          <allow-navigation href="*" />

       

          <access origin="*" />

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

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

          </platform>

          <platform name="ios">

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

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

          </platform>

      </widget>

       

      My Javascript is as follows

       

      if (navigator.geolocation) {

        navigator.geolocation.getCurrentPosition(success, error, {timeout: 10000, enableHighAccuracy: true});

      } else {

        error('not supported');

      }

      var directionDisplay;

      var directionsService = new google.maps.DirectionsService();

      var map;

      function success(position) {

        directionsDisplay = new google.maps.DirectionsRenderer();

        var latlng = new google.maps.LatLng(XXXXX,YYYYY);

        var mapOptions = {

          enableHighAccuracy: true, timeout: 5000,

          mapTypeId: google.maps.MapTypeId.ROADMAP,

          center: latlng

        }

        map = new google.maps.Map(document.getElementById('mapcanvas'), mapOptions);

        directionsDisplay.setMap(map);

        directionsDisplay.setPanel(document.getElementById("directionPanel"));

      var end = "XXXXX,YYYYY";

      var start =  position.coords.latitude + ',' + position.coords.longitude;

        var mode;

      switch ( 'driving' )

        {

          case 'bicycling' :

            mode = google.maps.DirectionsTravelMode.BICYCLING;

            break;

          case 'driving':

            mode = google.maps.DirectionsTravelMode.DRIVING;

            break;

          case 'walking':

            mode = google.maps.DirectionsTravelMode.WALKING;

            break;

        }

        var request = {

            origin:start,

            destination:end,

            travelMode: mode

        };

      directionsService.route(request, function(response, status) {

          if (status == google.maps.DirectionsStatus.OK) {

            directionsDisplay.setDirections(response);

          }

        });

      }

      function error(msg) {

        var s = document.querySelector('#status');

        s.innerHTML = typeof msg == 'string' ? msg : "failed";

        s.className = 'fail';

      console.log(arguments);

      }

       

      And my HTML

      <script type="text/javascript" src="https://maps.google.com/maps/api/js?key=MYGOOGLEAPI"></script>

       

      <div id ="directionPanel">

      <div id="mapcanvas" style="width:100%;  height:300px; top:0px;"></div>

      </div>

       

      Message was edited by: Ramakrishnan Ranganathan

        • 1. Re: Gelocation not working in Android - PhoneGap Build
          Chris W. Griffith Adobe Community Professional

          Your Geolocation is working fine. If you properly trace the data on your Android device, you will see that you are getting the lat and long information. What is actually failing is getting the map tiles from Google.

           

          You can verify this using Chrome's Remote Debugging feature.

           

          You are going to need to adjust your Whitelisting in your app in order for this work correctly.

           

          Chris

          • 2. Re: Gelocation not working in Android - PhoneGap Build
            ramakrishnanpr Level 1

            Hi Chris,

            Thanks for your inputs I now noticed that the execution is paused with the following error

             

            Uncaught TypeError: Cannot set property 'innerHTML' of null

             

            Code

            function error(msg) {

                            var s = document.querySelector('#status');

                            s.innerHTML = typeof msg == 'string' ? msg : "failed";

                            s.className = 'fail';

                            console.log(arguments);

                           }

            • 3. Re: Gelocation not working in Android - PhoneGap Build
              kerrishotts Adobe Community Professional

              Your selector (#status) failed to find a matching element. So "s" is set to "null", and has no "innerHTML" property.

               

              You should guard against that case, like so:

               

              var s = ...

              if (s !== null && s !== undefined) {   // *

                 s.innerHTML = ...

                 s.className = ....

                 ...

              }

              console.log (...)

               

              * You can shortcut this to "if (s)", but you need to be comfortable with the truthy/falsy nature of JavaScript to do this safely.

               

              But the bigger issue is why the selector failed in the first place. I don't see a #status element in your code snippet. Where are you generating this element?

              • 4. Re: Gelocation not working in Android - PhoneGap Build
                ramakrishnanpr Level 1

                oh o thats my bad, status does not exist have had it changed to mapcanvas.

                 

                by doing so the map loads finally, however the geo location or the directions does not work.

                 

                Am I missing something in the config.xml? I dont see any error in chrome remote debugging.

                • 5. Re: Gelocation not working in Android - PhoneGap Build
                  ramakrishnanpr Level 1

                  further noticed that maps.gstatic.com and mts.googleapis.com is not loading from the app, both are loaded in the browser which then results in providing the location, the markers and route marker.

                   

                  I have read through other answers and have also included the following inspite of having     <access origin="*" launch-external="yes" />

                   

                  Neither does this help

                   

                    <access origin="*://*.googleapis.com/*" subdomains="true" />

                    <access origin="*://*.gstatic.com/*" subdomains="true" />

                    <access origin="*://*.google.com/*" subdomains="true" />

                    <access origin="*://*.googleusercontent.com/*" subdomains="true" />

                   

                  Please do let me know in case i am missing something.

                   

                  Thanks in advance

                  • 7. Re: Gelocation not working in Android - PhoneGap Build
                    ramakrishnanpr Level 1

                    A simple code from the googles documentation, fails to load the maps.gstatic.com and mts.googleapis.com

                    Geolocation  |  Google Maps JavaScript API  |  Google Developers

                     

                    Can someone please guide.

                    • 8. Re: Gelocation not working in Android - PhoneGap Build
                      VectorP Level 4

                      - Where does the code fail? At what statement? Is that code (partly) executed at all?

                      - Do you still have <allow-navigation href="*" /> in your config? It is required to allow for those maps

                      - Are you waiting for the deviceready event to fire prior to executing the code?

                      - Is your CSP perhaps blocking the maps?

                      - Have you considered using the latest versions of the plugins instead of pinning them to an older one?

                      • 9. Re: Gelocation not working in Android - PhoneGap Build
                        ramakrishnanpr Level 1

                        The code fails before obtaining the location, it does initially execute the code and I see the maps.

                        I do have <allow-navigation href="*" /> in my config file

                        I do not have a device ready event - Could that be the issue ?

                        I do not get any error of the maps getting blocked

                        Yes, I am using the latest versions of the plugins

                        • 10. Re: Gelocation not working in Android - PhoneGap Build
                          VectorP Level 4

                          The code fails before obtaining the location, it does initially execute the code and I see the maps.

                          In that case, you have this code:

                           

                            if (navigator.geolocation) {
                              navigator
                          .geolocation.getCurrentPosition(function(position) {
                               
                          var pos = {
                                  lat
                          : position.coords.latitude,
                                  lng
                          : position.coords.longitude
                               
                          };

                           

                          Now, at what line does the code fail? What error situation do you get returned (set an error callback function for this to find out which error situation occurs).

                           

                          ===============

                           

                          I do not have a device ready event - Could that be the issue ?

                           

                          You can't just use plugins api functionality. You need to wait for the deviceready event to fire, then, in a callback function, perform the plugin functionality.

                          See Events - Apache Cordova

                           

                          ================

                           

                          Yes, I am using the latest versions of the plugins

                          Not in the config as posted initially in this thread.

                          • 11. Re: Gelocation not working in Android - PhoneGap Build
                            ramakrishnanpr Level 1

                            I had a device ready event included as in the docs- neither does that help.

                             

                            In my code i noticed that the following code is completely skipped. Would like to reiterate that maps.gstatic.com and mts.googleapis.com is not loading from the app.

                             

                             

                            I dont see any error in the chrome debugger.

                             

                            directionsDisplay.setPanel(document.getElementById("directionPanel"));

                            var end = "XXXXX,YYYYY";

                            var start =  position.coords.latitude + ',' + position.coords.longitude;

                              var mode;

                            switch ( 'driving' )

                              {

                                case 'bicycling' :

                                  mode = google.maps.DirectionsTravelMode.BICYCLING;

                                  break;

                                case 'driving':

                                  mode = google.maps.DirectionsTravelMode.DRIVING;

                                  break;

                                case 'walking':

                                  mode = google.maps.DirectionsTravelMode.WALKING;

                                  break;

                              }

                              var request = {

                                  origin:start,

                                  destination:end,

                                  travelMode: mode

                              };

                            directionsService.route(request, function(response, status) {

                                if (status == google.maps.DirectionsStatus.OK) {

                                  directionsDisplay.setDirections(response);

                                }

                              });

                            }

                            • 12. Re: Gelocation not working in Android - PhoneGap Build
                              kerrishotts Adobe Community Professional

                              Time to share all of your code, I think. Please post a zip somewhere so we can take a look.

                              • 13. Re: Gelocation not working in Android - PhoneGap Build
                                VectorP Level 4

                                In my code i noticed that the following code is completely skipped.

                                 

                                directionsDisplay.setPanel(document.getElementById("directionPanel"));

                                [...etc...]

                                 

                                So, if that code is 'skipped', it must be due to something that goes wrong right prior to that code's execution.

                                What is the statement that precedes this code? Why does execution stop after that statement?

                                 

                                 

                                Would like to reiterate that maps.gstatic.com and mts.googleapis.com is not loading from the app.

                                How did you determine that? And how did you reference these parts?