Geolocation and Ionic

Building iOS App with Ionic – Part 1 (Geolocation)

Click Here for TL;DR

I am just about finished building my first *complete* mobile application with the Ionic Framework.  There were several things I got hung up on and found useful solutions too after doing some research.  Some of the answers were on the Ionic website while some were buried on the web.  The first post will be in regards to geolocation.

Geolocation:

Using The Devices Built In GPS:

When I was testing my navigator.geolocation.getCurrentPosition() functionality I noticed that it was very unpredictable as to if it would work or not. I was seeing about a 50% success rate. I found several solutions to this problem.

First off Cordova has a plugin that will piggyback geolocation requests off the phone’s GPS. All you have to do is install the plugin, keep your navigator.geo code the same, and you are now ready to use the phones built in GPS. You can install this plugin with the following command

cordova plugin add org.apache.cordova.geolocation

Even after installing this plugin I did not see an improvement in my getCurrentPosition() requests. Still about 50/50.

I then found an interesting Stack Overflow regarding known bug with this plugin in iOS8. Using this solution:

cordova plugin rm org.apache.cordova.geolocation
cordova plugin add https://github.com/apache/cordova-plugin-geolocation.git

I found that my success rating when from about 50/50 to 70/30. Better but still not good engough!

Waiting Until Device Is Ready To Make Requests:

It was then I realized I was attempting to grab the location before the device loaded. This problem was fixed using the deviceReady listener and getting location during the yourCallbackFunction():

document.addEventListener("deviceready", yourCallbackFunction, false);

The problem that can arise for this, is having to disable the deviceready call to test in browser as it is not fired there.  You can work arounf this by using Ionic’s built in Platform.ready() which fire in the browser as well as on mobile devices.

angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
ionic.Platform.ready(function() {
// navigator.geolocation goes here!
});
});

Combining all of these techniques I have found that I can reliably grab the users location and use it within my app.  I hope my trouble can be your solution!

Using Info Windows With Your Map Markers:

I found when using map marker info windows they would work in browser tests and not on my mobile device or device simulator.  This is because of the modification Ionic makes to default “tap” behavior in an attempt to make your applications feel more native.

Read more about it here, but in regards to your Google Maps within your app just add this attribute to the maps parent element.

In The End

USE:

cordova plugin rm org.apache.cordova.geolocation

NOT

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

Make sure your location grabbing requests are inside a deviceReady; listener:

document.addEventListener("deviceready", yourCallbackFunction, false);

Or better yet, Ionic’s built in Platform.ready():

1
2
3
4
5
6
7
angular.module('myApp', ['ionic'])

.controller('MyCtrl', function($scope) {
    ionic.Platform.ready(function() {
        // navigator.geolocation goes here!
    });
});

Disable Ionic’s Tap System to get expected behavior with Google Map Marker Info Windows:

1
2
3
<div data-tap-disabled="true">
    <div id="google-map"></div>
</div>

 

Pro Tip: Debugging iOS Simulator

When your app build is running in your iOS simulator you can still access all of your console.log’s and other debugging methods.  Open Safari, make sure developer tools are enabled, click “Develop” in toolbar, and select the files you want to inspect from the “iOS Simulator” dropdown.

One thought on “Building iOS App with Ionic – Part 1 (Geolocation)

  1. Helmut Granda

    It sounds like navigator.geolocation.getCurrentPosition() would have a the same result as the final implementation if it is used after the application is ready which is more important rather than the library that is being used. This is just an assumption based on what I read above.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *