Ionic 2 / Ionic 3 : How to get current location of a device

Question

None of the answers on stackoverflow worked for me. A lot of them are for Ionic 1 or those answers are deprecated or they are not working for android device.

I have seen a lot of solutions on stackoverflow about getting current location of device but non of them seems to be working for Android.

what i have tried:-

• using geolocation.getCurrentPosition() , which is working for IOS and browser but not for Android .

• using this.geolocation.watchPosition() , which is working for IOS and browser but not for Android .

• using navigator.geolocation.getCurrentPosition() ,which is working for IOS and browser but not for Android .

• using fiddle solution provided by this question getCurrentPosition() and watchPosition() are deprecated on insecure origins

Anyway, all of these are deprecated by google due to:-

getCurrentPosition() and watchPosition() are deprecated on insecure origins, and support will be removed in the future. You should consider switching your application to a secure origin, such as HTTPS. See goo.gl/rStTGz for more details.

• what worked for me is ( https://ionicframework.com/docs/native/background-geolocation/ ) & ( https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/ ) both of these are based on background-geolocation plugin but,it's taking almost 50-55 sec on Android device, again it's working fine for ios

The problem with joshmorony ( https://www.joshmorony.com/adding-background-geolocation-to-an-ionic-2-application/ ) solution is foreground is not working for Android physical devices but working fine for browser and ios. Background tracking is working fine, which is taking almost 50 sec to give lat & lng for the first time.

Please help me with this. I want a way to get current location in minimum time. For your info, I am using google javascript map sdk / api.

Answer 1

I tried every solution provided by all of you and others also on internet. Finally i found a solution.You can try this plugin cordova-plugin-advanced-geolocation ( https://github.com/Esri/cordova-plugin-advanced-geolocation ) from ESRI . But this plugin will work for Android not IOS . For ios you can go with same old approach . ie - using this.geolocation.getCurrentPosition(...) or this.geolocation.watchPosition(..) .

Add cordova-plugin-advanced-geolocation Plugin Like this :-

cordova plugin add https://github.com/esri/cordova-plugin-advanced-geolocation.git

then Add below line at the top of Class / Component

declare var AdvancedGeolocation:any; //at the top of class

Now add these lines inside relevant function of component ( PS - I have included code for both Android & IOS )

//**For Android**


    if (this.platform.is('android')) {
          this.platform.ready().then(() => {
            AdvancedGeolocation.start((success) => {
              //loading.dismiss();
              // this.refreshCurrentUserLocation();
              try {
                var jsonObject = JSON.parse(success);
                console.log("Provider " + JSON.stringify(jsonObject));
                switch (jsonObject.provider) {
                  case "gps":
                    console.log("setting gps ====<<>>" + jsonObject.latitude);

                    this.currentLat = jsonObject.latitude;
                    this.currentLng = jsonObject.longitude;
                    break;

                  case "network":
                    console.log("setting network ====<<>>" + jsonObject.latitude);

                    this.currentLat = jsonObject.latitude;
                    this.currentLng = jsonObject.longitude;

                    break;

                  case "satellite":
                    //TODO
                    break;

                  case "cell_info":
                    //TODO
                    break;

                  case "cell_location":
                    //TODO
                    break;

                  case "signal_strength":
                    //TODO
                    break;
                }
              }
              catch (exc) {
                console.log("Invalid JSON: " + exc);
              }
            },
              function (error) {
                console.log("ERROR! " + JSON.stringify(error));
              },
              {
                "minTime": 500,         // Min time interval between updates (ms)
                "minDistance": 1,       // Min distance between updates (meters)
                "noWarn": true,         // Native location provider warnings
                "providers": "all",     // Return GPS, NETWORK and CELL locations
                "useCache": true,       // Return GPS and NETWORK cached locations
                "satelliteData": false, // Return of GPS satellite info
                "buffer": false,        // Buffer location data
                "bufferSize": 0,         // Max elements in buffer
                "signalStrength": false // Return cell signal strength data
              });

          });
        } else {

          // **For IOS**

          let options = {
            frequency: 1000,
            enableHighAccuracy: false
          };

          this.watch = this.geolocation.watchPosition(options).filter((p: any) => p.code === undefined).subscribe((position: Geoposition) => {
            // loading.dismiss();
            console.log("current location at login" + JSON.stringify(position));

            // Run update inside of Angular's zone
            this.zone.run(() => {
              this.currentLat = position.coords.latitude;
              this.currentLng = position.coords.longitude;
            });

          });
        }

EDIT : First installation is always going fine. But Sometimes you might get errors for no reason in subsequent installations. To make this error (any error with this plugin ) go away.Follow these steps :

1. Remove this plugin from your project (including config.xml and package.json ).

2. Delete/Remove android platform.

3. Delete plugins folder.

4. Now reinstall this plugin again, following the steps above.

Answer 2

I have gone through the problem and find the solution.

the best way to get geolocation of the user is to use this plugin https://ionicframework.com/docs/native/geolocation/

do not forget to add this is app.moudle.ts as its a provider.

by simply adding this code in app component i was able to get location( do not forget to import and add in constructor )

 this.geolocation.getCurrentPosition({ enableHighAccuracy: true }).then((resp) => {
      console.log(resp);
    }, Error => {
      console.log(Error);
    }).catch(Error => {
      console.log(Error);
    })

i only have the same error while i was using ionic cordova run android --livereload that is insecure origin

but when i use ionic serve i can see the response in browser and also after using ionic cordova run android

just to confirm response in android i check the chrome debugger.

Answer 3

It works for me

import { Geolocation } from '@ionic-native/geolocation/ngx';
import { NativeGeocoder, NativeGeocoderOptions, NativeGeocoderResult } from '@ionic-native/native-geocoder/ngx';

geoencoderOptions: NativeGeocoderOptions = {
    useLocale: true,
    maxResults: 5
};

constructor(
    private geolocation: Geolocation,
    private nativeGeocoder: NativeGeocoder
) {

    getCurrentLocation() {
        this.geolocation.getCurrentPosition()
            .then((resp) => {

                this.getGeoencoder(resp.coords.latitude, resp.coords.longitude);

            }).catch((error) => {
                console.log('Error getting location', error);
            });
    }

    //geocoder method to fetch address from coordinates passed as arguments
    getGeoencoder(latitude, longitude) {
        this.nativeGeocoder.reverseGeocode(latitude, longitude, this.geoencoderOptions)
            .then((result: NativeGeocoderResult[]) => {

               const address = this.generateAddress(result[0]);

            })
            .catch((error: any) => {
                // alert('Error getting location' + JSON.stringify(error));
            });
    }

    //Return Comma saperated address
    generateAddress(addressObj) {
        let obj = [];
        let address = "";
        for (let key in addressObj) {
            obj.push(addressObj[key]);
        }
        obj.reverse();
        for (let val in obj) {
            if (obj[val].length)
                address += obj[val] + ', ';
        }
        return address.slice(0, -2);
    }

Answer 4

you need to provide the permission for Android app as follows:

<feature name="Geolocation">
    <param name="android-package" value="org.apache.cordova.GeoBroker" />
</feature>

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

Answer 5

I ran into a similar problem. When I build from the terminal with the --prod flag, I no longer see this error since it is now requesting position over https.

Built without --prod flag

Built using the --prod flag

Edit: Sorry for the format, I hope that this makes a little more sense. I used the following function in a service that I could call from anywhere to get the latitude, longitude, accuracy, and timestamp. The key though is using the --prod flag in the terminal when building the app.

this.geolocation.getCurrentPosition().then(position => {
     let locationObj = {
            lat: position.coords.latitude,
            lon: position.coords.longitude,
            timestamp: position.timestamp,
            accuracy: position.coords.accuracy
     };
resolve(locationObj);
})

Answer 6

this method is working for bot android and browser

watchLocation() {
    this.watchLocationUpdates = this.geolocation.watchPosition({ maximumAge: 60000, timeout: 25000, enableHighAccuracy: true })
      .subscribe(resp => {
        this.latitude = resp.coords.latitude;
        this.longitude = resp.coords.longitude;
        this.altitude = resp.coords.altitude;
        this.accuracy = resp.coords.accuracy;
        this.altAccuracy = resp.coords.altitudeAccuracy;
        this.heading = resp.coords.heading;
        this.speed = resp.coords.speed;
        this.timestamp = new Date(resp.timestamp);
      });
 }

Answer 7

我为我找到了解决方案：使用 google api https://www.googleapis.com/geolocation/v1/geolocate?key={API_KEY}如果平台 Android 我使用 google api。

Answer 8

Anyone tried add cordova-plugin-advanced-geolocation to ionic v4? I'd error - ReferenceError: AdvancedGeolocation is not defined. Also I tried delete plugin and install again but nothing happened.

Can anyone help?