How to use Angular with HTML5 geolocation native API?

Question

I'm using following code snippet to obtain the current geolocation:

angular.module('HomelandApp').controller('PlacesController', function($scope,$http, $localStorage, uiGmapGoogleMapApi) {

  uiGmapGoogleMapApi.then(function(maps) {

        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map = { center: { latitude: pos.coords.latitude, longitude: pos.coords.longitude }, zoom: 17 };
        });
  });
});

The problem I'm facing is that I somehow have to invoke the controller twice in order to get the map rendered. This is happening when using navigator so it's not a pure Angular UI problem.

I guess they're digest cycle Angular against native JS details. How should I fix this issue?

charlietfl · Accepted Answer · 2015-10-07 21:45:48Z

2

navigator.geolocation is outside of angular core so any scope changes made within it need to notify angular to run a digest to update the view. There are several ways to do that.

Try:

 navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map = { .... };
            $scope.$apply();
});

answered Oct 7, 2015 at 21:45

charlietfl

172k14 gold badges125 silver badges154 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

diegoaguilar Over a year ago

Could you update your question telling longer about those several ways to do it?

charlietfl Over a year ago

wrapping in $timeout() is another ... will call $apply internally but will be pushed to end of any existing digest cycle (if thre is one active)

diegoaguilar Over a year ago

More useful if you extend your answer ;)

charlietfl Over a year ago

I assure you there are lots of similar answers with a lot more detail around

Collectives™ on Stack Overflow

How to use Angular with HTML5 geolocation native API?

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related