Ionic geolocation woes

Hi,

The geolocation API hasn’t been working for me on the emulator for a while. I mostly attributed it to emulator snafus and moved on to other things but now, with device testing, this problem has come back to haunt us.

Basically, I cannot even get the weatherapp to work on my device. I tried getting a new weather wunderwhatever API key but that wasn’t the issue. The application specifically fails to get the location information. It doesn’t even prompt me for permissions. In short, the weather app does not work at all.

My device is Samsung Galaxy S3 running Android 4.3

If I can get the weather app to work on my system, I should be able to port that solution to my own project.

Btw, I have added all the relevant permissions in the manifest file. If someone can get the weatherapp to work on Galaxy devices, please let me know.

Thanks

Can you try to get geolocation to work without the weather app functionality? Maybe even using the built in browser geolocation.

http://www.w3schools.com/html/html5_geolocation.asp

Hi,

I tried going to this website: http://html5demos.com/geo

And it worked. So it seems like the html5 geolocation works, just not within Ionic.

Ok, I got geolocation to work, but the accuracy is pretty poor. I’ll have to investigate it.

Regardless, here are the things one needs to be aware of.

  1. Make sure your GPS is switched on.
  2. Modify the AndroidManifest.xml file and remember to add the permissions tag ABOVE the application tag.

Good to hear. Maybe after you got things wrapped up, you could post a demo of the app? What kind of weather api service are you using? I’m actually putting together a weather demo myself but would look to see how yours comes out

Hi,

We are actually using Ionic to develop a geolocation based opt-in ad platform. Its a startup idea me and another friend of mine are working on. Once we have wrapped up the geolocation and side menu stuff, we’ll do a formal release. Hope to get some publicity from posting it on your website as well :wink:

Thanks

1 Like

Ok, so here’s another little insight.

It seems that including cordova.js in the main index.html file causes navigation.getlocation to stop working. I traced the problem to the exec call that wasn’t working.

Do we need to include cordova.js if we are not using any plugins?

Hmm, its a tough call, just because there are specific classes that need to be applied to due to cordova and the device plugin. Are you using HTML geolocation or the cordova geolocation plugin?

HTML5 geolocation for now.

The issue is that for Galaxy devices, the cordova plugin is known to break. We don’t see this problem on iOS devices.

I am a bit concerned about this myself because we haven’t really solved the problem. One possible solution is that we keep the cordova.js file but comment out the geolocation definitions.

Well since cordova 3.0, because all the APIs are split into different plugins, the main cordova.js file is more for just the initial set up (device ready event and communication of to the phone). There won’t be any geolocation code in that file.

Would you be able to provide some code samples and I could check if there are reason for your issues?

ok, this is really strange

cordova -v gives me 3.4.0-0.1.3

cordova.js on the other hand, starts with this

// Platform: ios
// 2.9.0-28-gc01c173
/*

Am I including the wrong version? It seems like it.

Ohh that is odd…
My advice would be to start with a fresh cordova project, and then transfer over all you files. All but that old version of cordova.

If thats your version of cordova, then its trying to point to the native geolocation files, which arent in your project. Once you start with a fresh project, add the plugins according to the cordova docs and let me know if it works.

Several things changed since last time this post was active.

I. First of all, geolocation works with Ionic (it was never under question). Cordova.js file was also never a problem. If you want to get a correct location just wrap you code into device ready event.

II.Use ngCordova Geolocation plugin
III.If you’re using Cordova 4.0 + version make sure to install Cordova Whitelist plugin, Google Maps will not work with it.
IV. Whitelist plugin comes with new HTML5 meta tag, you MUST include it if you want maps to work. Default meta tag (found in official plugin github link) will not work with Google Maps, use this one instead:

<meta http-equiv="Content-Security-Policy" content="default-src *; script-src 'self' 'unsafe-inline' 'unsafe-eval' *; style-src  'self' 'unsafe-inline' *">

Everything said here including working example can be found here: Using Cordova Geoloacation API with Google Maps in Ionic Framework

Hi Gajotres,

I am having problems with geolocation in my ios app. I am using cordova plugins for geolocation and whitelisting. I have the CSP as meta tag as well. Geolocation works on my android app.

However on the ios app, geolocation doesn’t work unless I login (or logoff). Login (and logoff) happen in a different tab, but the state change is followed by a browser refresh. I am accessing geolocation via a service so that its available to all the controllers. Wondering if the browser refresh is related to some kind of initiation, so I wrapped the code in a init function attached to the scope. But no luck!

Geolocation per se is working for once the login (or logoff) is complete and I switch the tab back to the one with geolocation, the app throws up the permission dialogue and everything is prim and proper.

Do you have any idea what I may be doing wrong over here?

Thanks in advance.

Hi Gajotres!
Thanks for your Tutorial, it helped me a lot!
I have one question, my geoloc app works fine in Ionic View, but if I build it and run it on my Android phone the map doesn´t load.
It seems like there is an issue with permissions, but I checked the manifest and I have all the plugins needed and following permissions:
ACCESS_NETWORK_STATE" />
.ACCESS_WIFI_STATE" />
ACCESS_COARSE_LOCATION" />
ACCESS_FINE_LOCATION" />
Any tips please?
Tx hanna

Hi, Gajotres.
I’ve followed your tutorial (great tutorial, by the way!), downloaded your example from GitHub and deployed it in my iPhone 6 (iOS 10). Despite everything deployed smoothly, I only get a blank page with a “Map example” header title. Any ideas?
Thank you!

If you’re still having trouble on iOS, try this.

Hey Gajotres,
$cordovaGeolocation.getCurrentPosition(options).then(function(position)
and
navigator.geolocation.getCurrentPosition(onSuccess, onError);
both are working in redmi 2s android v=5.1.1
but it is not working in htc android v=5.1.1

plse help me

Increase timeout in options; some smartphones can have problems with GPS locking.

I gave timeout: 30000 and 50000
but its not working
error code 3
and error msg time out