Setting my location in google map using angular-google-map directive

1

I’m using angular google map directive at a state.
If set manual coords i get this to work perfectly.

The problem is that i want to show the user’s location.
I’m trying to set the geolocation but i it doesn’t work.

I do get the coords but i get it too late and i get a JS error.
I copied the factory from http://codepen.io/ionic/pen/uzngt and used it.
Still the same thing…

If i just printing the coords on the html it works, but not when i use the it doesn’t work.

Here is my controller
If someone can help me i would really appreciate it

.controller('NearestGardenCtrl', function($scope, LocationService) {

    LocationService.getLatLong().then(
        function(latLong) {
            $scope.map = {
                center: {
                    latitude: latLong.lat,
                    longitude: latLong.long
                },
                zoom: 17,
                draggable: true
            }


        },

        function(error) {
            alert(error);
        }
    );

})
2

See my response here : Geolocation service is not working without a hard refresh

That demo I put up works.

3

here is something i got working a while back.

   <!DOCTYPE html>
    <html>
    <head>
      <meta charset='utf-8'> 
    
      <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
      <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
      <title>Hello Maps</title>
      <style type="text/css">
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        .google-map{width:100%; height:100%;}
      </style>
    </head>
    <body ng-app="mapComponentsApp">
    
      <div class="google-map" hello-maps=""></div>
    
      <script type="text/javascript">
        var mapApp = angular.module('mapComponentsApp', []);
    
        mapApp.directive('helloMaps', function () {
          return function (scope, elem) {
            var mapOptions = {
              center: new google.maps.LatLng(-34.397, 150.644),
              zoom: 16,
              mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            var map = new google.maps.Map(elem[0], mapOptions);
          
            navigator.geolocation.getCurrentPosition(function(pos) {
              map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
            }, function(error) {
              alert('Unable to get location: ' + error.message);
            });
          };
        });
      </script>
    </body>
    </html>
4

The answer is to put the geolocation via a resolve in the routeProvider