Adding geolocation via GPS

Now that we have an even better working map view, let's go ahead and add some basic navigation features to it, namely, the ability to focus the map on our current physical location.

First, let's add a button to the footer toolbar for now. Make sure that the ion-footer-bar tag looks like the following:

<ion-footer-bar class="bar-stable">
  <a ng-click="centerOnUser()" class="button button-icon icon ion-navigate"></a>
</ion-footer-bar>

Your preview should now look like this:

Now, we need to hook into the location capabilities of the native device in order to find the user's current location. Fortunately, this can be done directly through the HTML5 geolocation interface. To see it in action, let's add the following to the controller.js file inside the MapCtrl controller:

$scope.centerOnUser = function () {
  console.log("Centering on user");
  if (!$scope.map) {
    return;
  }

  navigator.geolocation.getCurrentPosition(function (pos) {
    console...