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


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 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) {

        function(latLong) {
            $ = {
                center: {
                    longitude: latLong.long
                zoom: 17,
                draggable: true


        function(error) {



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

That demo I put up works.


here is something i got working a while back.

   <!DOCTYPE html>
      <meta charset='utf-8'> 
      <script src=""></script>
      <script src=""></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%;}
    <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);


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