Ionic 2 - Geolocation timeout error

Question

I want to detect latitude and longitude everytime when I click on button. I have tried to search on many sites and blogs but not getting any specific solution. I have also installed cordova-plugin-geolocation and used like this:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, Platform } from 'ionic-angular';
import {Camera, CameraOptions} from '@ionic-native/camera';
import { Geolocation, Geoposition } from '@ionic-native/geolocation';

constructor(public navCtrl: NavController, public navParams: NavParams, private camera : Camera, 
    public geolocation: Geolocation, public platform: Platform) {
  }

capturePhotos()
{
    let GPSoptions = {timeout: 10000, enableHighAccuracy: true, maximumAge: 3600};
      this.geolocation.getCurrentPosition(GPSoptions).then((position) => {

        console.log("IN");

        console.log(position.coords.latitude);
        console.log(position.coords.longitude);

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

After getting timeout error I increased the timeout to 50000 but no success. Above capturephoto function will be called as below:

<ion-navbar hideBackButton side="left">
      <ion-title style="margin-left: 0px;">
          <div>
              <ion-icon ios="ios-add" md="md-add" class="menuIcon" (click)="capturePhotos()"></ion-icon><span class="menuTitle">My Photos</span>
          </div>
      </ion-title>  
  </ion-navbar>

When I try to run it in android emulator it will fetch Lat Long when I first time click on add icon but when I click on second or more time it stops working and throws the error: PositionError {} code: 3 message: "Timeout expired"

`let GPSoptions = {timeout: 10000, enableHighAccuracy: true, maximumAge: 3600};` works fine in my project. — hrdkisback, Oct 12 '17 at 09:48
Yeah it works only when we click on add icon first time. The second time I click and the positionError is thrown in my project. — Aparna, Oct 12 '17 at 10:28
I found that this plugin break on some phones after Nougat update. Unfortunately I couldnt find any solution till now. — raj, Nov 06 '17 at 05:46
@raj I've samsung tablet, I've found a solution: In Settings -> Privacy -> Location -> Mode -> enable both GPS & Wifi. Using "only Gps" it's not working. — Francesco, Nov 06 '17 at 13:06

score 2 · Answer 1 · answered Jun 19 '18 at 12:14

I was having the same problem. After trying multiple times with some changes, I observed that on setting the parameter {enableHighAccuracy: true}, and {timeout:"large value(may be more than 20 seconds)"}, I was able to get the coordinates successfully. Setting {enableHighAccuracy:false} or no providing the parameter at all resulted in Timeout error.

I found this behavior strange. I hope this will help.

score 1 · Accepted Answer · answered Nov 06 '17 at 14:46

I resolved this issue by doing the following changes:

1) I set my location mode to High accuracy in my phone settings.

2) After that I changed the code from "this.geolocation" to "navigator.geolocation".

3) There was some issue in my code with Callbacks. When detecting for lat lon I was calling another function and in that I was redirecting to the new page. So solved this callback issue and after that I'm now getting lat lon values successfully every time I click on button.

score 0 · Answer 3 · answered Oct 11 '17 at 14:28

0

there is this answer phonegap geolocation allways fail on timeout ,

Your code seems to be fine, however, to start, try to getposition without options (default options)

answered Oct 11 '17 at 14:28

Marouan

217
1
8

Well I have first developed my code without applying options but it was not working even at first time so I added options. So it is giving me lat long when I click first time on icon. Also I have gone through this link but none of the solutions seems to be working for me. Is it something that I need to reset geolocation parameters or anything to fetch the lat long again? Thanks. – Aparna Oct 12 '17 at 06:37

score 0 · Answer 4 · answered Oct 14 '17 at 21:00

This is not an ideal solution (using watchPosition) but it works for me on iOS and it should work for you.

home.ts

import {Component} from '@angular/core';
import {Platform, NavController} from 'ionic-angular';
import {Geolocation, Geoposition} from '@ionic-native/geolocation';

import 'rxjs/add/operator/filter';
import {last} from "rxjs/operator/last";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  latest: Geoposition;
  displayed: Geoposition;
  timestamp: number = 0;

  constructor(private platform: Platform, public navCtrl: NavController, private geolocation: Geolocation) {
    this.latest = {
      coords: {
        altitude: 0,
        heading: 0,
        latitude: 0,
        longitude: 0,
        accuracy: 0,
        altitudeAccuracy: 0,
        speed: 0
      },
      timestamp: 0
    };
    this.displayed = this.latest;
    this.platform.ready()
      .then(() => {

        const subscription = this.geolocation.watchPosition({
          enableHighAccuracy: true,
          maximumAge: 8000,

        })
          .filter((p) => p.coords !== undefined) //Filter Out Errors
          .subscribe(position => {
            if (position.coords !== undefined) {
              this.latest = position;
            }

          });

      });

  }

  refreshLocation() {
    this.displayed = this.latest
  }

}

home.html

<ion-header>
  <ion-navbar>
    <ion-title>
      Movement information
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <button ion-button (click)="refreshLocation()" full>Update</button>
  <ion-list>
    <ion-item no-padding no-margin>
      time: {{timestamp}}
    </ion-item>
    <ion-item no-padding no-margin>
      lat: {{displayed.coords.latitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      long: {{displayed.coords.longitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      altitude: {{displayed.coords.altitude}}
    </ion-item>
    <ion-item no-padding no-margin>
      heading: {{displayed.coords.heading}}
    </ion-item>
    <ion-item no-padding no-margin>
      speed: {{displayed.coords.speed}}
    </ion-item>
  </ion-list>
</ion-content>

Hey Philip thank you so much for your reply and I have tried your code in my app. It does not throw timeout error now but when I click on button second time the latitude and longitude value is 0. — Aparna, Oct 18 '17 at 09:43
I have noticed that sometimes it gives strange values at the beginning in particular. Not sure what that is about. I suppose you could also filter out the outliers. — Philip Brack, Oct 18 '17 at 14:43

Ionic 2 - Geolocation timeout error

4 Answers4