ngCordova with geolocation not working

RuRu · February 23, 2015, 10:21am

I am trying to get to use ngCordova for getting my position and geocoding it to get a text formatted address. However it gives me no results as well as errors, which is why I am confused on this matter.

This is what I trying to do

function HomeCtrl($ionicPlatform, $cordovaGeolocation, myDriveApi) {
    var vm = this;
    vm.myLocation = "";
    var geocoder = new google.maps.Geocoder();

    var geoSettings = {
        frequency: 1000,
        timeout: 30000,
        enableHighAccuracy: true // may cause errors if true
    };
    
    $cordovaGeolocation.getCurrentPosition(getPos, error, geoSettings);
    function getPos(position) {
        var LatLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        console.log(LatLng);
        return showLocation(LatLng)
    }

    function error(error) {
        alert('code: ' + error.code + '\n' +
        'message: ' + error.message + '\n');
    }

    function showLocation(LatLng) {
        geocoder.geocode({'latLng': LatLng}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                vm.myLocation = results[0].formatted_address;
                console.log(results);
            }
        })
    };

I have found that I need to use $ionicPlatform, but I dont see it working with or without. Help me out on this matter

soutlink · February 23, 2015, 12:35pm

You are using it wrong!

All ngCordova plugins use promises, not callbacks. Check docs http://ngcordova.com/docs/plugins/geolocation/

module.controller('GeoCtrl', function($cordovaGeolocation) {
  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
    }, function(err) {
      // error
    });


  var watchOptions = {
    frequency : 1000,
    timeout : 3000,
    enableHighAccuracy: false // may cause errors if true
  };

  var watch = $cordovaGeolocation.watchPosition(watchOptions);
  watch.then(
    null,
    function(err) {
      // error
    },
    function(position) {
      var lat  = position.coords.latitude
      var long = position.coords.longitude
  });


  watch.clearWatch();
  // OR
  $cordovaGeolocation.clearWatch(watch)
    .then(function(result) {
      // success
      }, function (error) {
      // error
    });
});

RuRu · February 23, 2015, 5:39pm

@soutlink

Right, I fixed it using the promises as it supposed to be, here is my code

function HomeCtrl($ionicPlatform, $cordovaGeolocation, myDriveApi) {
    var vm = this;
        vm.myLocation = "";
        var geocoder = new google.maps.Geocoder();

        var geoSettings = {frequency: 1000, timeout: 30000, enableHighAccuracy: false};

        var geo = $cordovaGeolocation.getCurrentPosition(geoSettings);
        geo.then(function (position) {
                var lat = position.coords.latitude,
                    long = position.coords.longitude,
                    LatLng = new google.maps.LatLng(lat, long);
                console.log(LatLng);
                showLocation(LatLng);
            },
            function error(error) {
                alert('code: ' + error.code + '\n' +
                'message: ' + error.message + '\n');
            }
        );

    function showLocation(LatLng) {
        geocoder.geocode({'latLng': LatLng}, function (results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                vm.myLocation = results[0].formatted_address;
                console.log(results);
            }
        })
    };

}

Now this works in the web browser and I can see my coords being gathered and reverse geocoded. So this works fine, but I get no result on my device.

I am using Nexus 5 with the latest OS. Any reasons for this behavior?

soutlink · February 23, 2015, 5:43pm

The app is working ok? I mean, maybe its a js problem (like google.maps.Geocoder == undefined or so)

Can you debug using Native USB Debugging on chrome?

RuRu · February 23, 2015, 5:56pm

@soutlink Yeah the app is working fine, I see no errors on the browser, same for the app.

I have just recently changed to use $cordovaGeolocation to get my position on the map, and the same problem occurs, it is working in the browser but not on the device.

I am not sure if I can use native debugging for chrome, but might be a good idea to use logcat and see if there are any errors thrown at me

soutlink · February 23, 2015, 5:59pm

Maybe a “Whitelist” problem?

Did you “whitelisted” google apis url?

Cant check your code right now, sorry

RuRu · February 23, 2015, 6:34pm

@soutlink What is this Whitelist problem? Never heard of it before. I run the logcat, and I cant make out anything critical that can be a problem.

This is quite bothersome!

brunodb3 · February 23, 2015, 7:57pm

I had this issue once, what solved for me was using ‘navigator’ instead of $cordovaGeolocation, like so:

navigator.geolocation.getCurrentPosition()

I don’t really know why it works like this for me, but it does… I hope it helps

RuRu · February 23, 2015, 9:05pm

@brunodb3 Using navigator means not using ngCordova, and it’s difference kind of implementation.
Is ngCordova bugy or there is something else to it?

If nothing works, I will get to use navigator. Might be a good idea to dumb ngCordova

brunodb3 · February 23, 2015, 9:11pm

If i use ngCordova, i doesn’t work either, so i am using navigator. I don’t really know why it doesn’t work though…

Felifetp · February 23, 2015, 9:12pm

i heard crosswalk is “bugging” some cordova plugins, you are using it? if yes, already tried without it?

brunodb3 · February 23, 2015, 9:13pm

Yes, i’m using CrossWalk, but even without it, ngCordova doesn’t work…

RuRu · February 23, 2015, 10:00pm

This is quite poor! I will have to change my implementation to use navigator, I been doing this for the past day and it is not fun.

But I noticed that it does give output after waiting for some time uisng ngCordova, only in one instance. In the my homeCtrl for reverse geocoding, but it doesn’t work on displaying markers on the google map at all.
But that also goes for navigator.geolocation it didn’t show any results in the device.

Is there any stable framework api for this that I can use or some way around it? I am not using crosswalk btw. But I got other plugings and dependencies on which might effect it

PhilHannent · February 27, 2015, 11:27am

Regarding the Nexus not working but the browser does, you need to setup the Chrome USB debugging so that you can see the state of the objects.

By the looks of it you are not waiting for your platform to be ready. The first thing you are doing in your controller is trying to get a handle on your google.maps. This doesn’t work on my Nexus 5 because it takes a little longer to fire up the service.

I initially used the ionic.Platform.ready() function at the bottom of my controller but with the recent view caching improvements I have found that using this works better because you know the page is loaded and ready to use:

var geo = {};
$scope.$on('$ionicView.enter', function(event, data) {
    geo = google.maps.Geocoder();
    // carry on with other processing
})

Gajotres · July 26, 2015, 6:39pm

Since Cordova 4.0 you need the Cordova Whitelist plugin to be able to access remote resources like Goole Maps.