Phonegap does not run GoogleMaps v3 domListener function inside Angularjs directive

Question

I have a directive in one of my templates, the following code for this directive:

appDirectives.directive('map', function() {
  return {
    restrict: 'E',
    scope: {
      onCreate: '&'
    },
    link: function ($scope, $element, $attr) {

      alert("This fires just fine.");

      function initialize() {

        alert("This doesnt fire on Phonegap.");

        navigator.geolocation.getCurrentPosition(function (pos) {
          $scope.currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
          var mapOptions = {
            center: $scope.currentLocation,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };

        var map = new google.maps.Map($element[0], mapOptions);

        var currentLocation = $scope.currentLocation;

        $scope.onCreate({
          map: map,
          currentLocation: currentLocation
        });

        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });

        }, function (error) {
          alert('Erro ao obter localização.');
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize());

    }
  }

When the application starts in the browser, everything works as expected. But when launched on iOS Simulator, it just doesn't run the initialize () function.

I tried this (as described here ):

google.maps.event.addDomListener(window, 'load', initialize);

Bu then it just doesn’t work both in the browser and in the simualtor.

Any idea why?

Answer 1

You must make sure that the cordova is ready before you get the current location. here is an explanation from the phonegap documentation

http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#deviceready

edited by:

deviceReady angular

api.js,

    //cordova service
    apiServices.factory('cordovaReady', function() {
        return function (fn) {

            var queue = [];

            var impl = function () {
                queue.push(Array.prototype.slice.call(arguments));
            };

            document.addEventListener('deviceready', function () {
                queue.forEach(function (args) {
                    fn.apply(this, args);
                });
                impl = fn;
            }, false);

            return function () {
                return impl.apply(this, arguments);
            };
        };
    });

    //map service
    apiServices.factory('geolocation', function ($rootScope, cordovaReady) {
        return {
            getCurrentPosition: cordovaReady(function (onSuccess, onError, options) {
                navigator.geolocation.getCurrentPosition(function () {
                        var that = this,
                            args = arguments;

                        if (onSuccess) {
                            $rootScope.$apply(function () {
                                onSuccess.apply(that, args);
                            });
                        }
                    }, function () {
                        var that = this,
                            args = arguments;

                        if (onError) {
                            $rootScope.$apply(function () {
                                onError.apply(that, args);
                            });
                        }
                    },
                    options);
            })
        };
    });

geoLocation

geolocation.getCurrentPosition(function (position) {

    $scope.position = {
        coords: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
        }
    };
});