GoogleMaps v3 domListener not triggering in Angularjs directive when using Phonegap

Question

GoogleMaps v3 domListener not triggering in Angularjs directive when using Phonegap

I have a directive in one of my templates and here is the code for that directive:

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

      alert("This alert works fine.");

      function initialize() {

        alert("This alert doesn't appear 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
        });

        // Prevent sidebar drag when clicking on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });

        }, function (error) {
          alert('Error getting location.');
        });
      }

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

    }
  }

When I run the app on the browser, everything functions as expected. However, when running on the iOS Simulator, the initialize() function fails to execute.

I attempted this fix (as mentioned here):

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

But unfortunately, this did not work in either the browser or the simulator.

Any insights into why this might be happening?

javascript angularjs google-maps cordova google-maps-api-3

Answer 1

Answer №1

Ensuring that cordova is ready before obtaining the current location is crucial. Here is an explanation from the phonegap documentation:

Updated Information:

Here is a way to incorporate deviceReady in an angular manner.

In your api.js file where you store services:

//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);
        })
    };
});

Then inject the geoLocation service into your controller:

geolocation.getCurrentPosition(function (position) {

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

Answer 2

Ensuring that cordova is ready before obtaining the current location is crucial. Here is an explanation from the phonegap documentation:

Updated Information:

Here is a way to incorporate deviceReady in an angular manner.

In your api.js file where you store services:

//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);
        })
    };
});

Then inject the geoLocation service into your controller:

geolocation.getCurrentPosition(function (position) {

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

GoogleMaps v3 domListener not triggering in Angularjs directive when using Phonegap

Answer №1

Similar questions

Unexpected Error: Null value prevents accessing 'getElementsByClassName' property in HTML, along with Troubleshooting Inactive Button Behavior in HTML

Dealing with automatic indentation in the Node.js REPL while pasting content

Angular 4 animations are triggering every element on the page

how to use AngularJS filter and ng-options to format specific options as bold in a select dropdown

The integration of cypress-cucumber-preprocessor with multiple testing frameworks appears to be experiencing compatibility issues

Would you suggest using angularjs for authentication in large-scale applications?

creating a spherical image mapping with three.js

What is the best way to retrieve a value from within the callback function while working in the global scope

Issue with displaying checkboxes in the dataTable table

Using Bootstrap datepicker to show dates in Month YYYY format and then sending the data to server as MMYYYY for processing

Dealing with the challenge of duplicate posts in JqWidgets context menu within a nested grid scenario

Dealing with Android Woes: Troubleshooting POST Requests using $.ajax with PhoneGap 2.6 and Zepto.js

What is the specific functionality of $find in the Microsoft Ajax library?

Exploring the ins and outs of troubleshooting Nodewebkit using Webstorm

Performing numerous AJAX calls to a PHP server from a single client

Leveraging .intersect/.intersectsBox to handle object collisions in threeJS

I'm having trouble figuring out why my Vue method isn't successfully deleting a Firebase object. Can anyone offer some guidance

What is the procedure to obtain a session object on the server side in next.js version 14?

Fetching database entries upon page load instead of using the keyup function in JavaScript

Instead of sending a post request, sending an options request after the ajax request is made