Saturday, November 22, 2014

Ionic Geolocation Using ngCordova

Step 1  Run from your terminal

bower install ngCordova

Step 2 Add this to your index.html

    <!-- cordova script (this will be a 404 during development) -->
    <script src="lib/ngCordova/dist/ng-cordova.js"></script>

Just above to 

    <script src="cordova.js"></script>
 
Step 3  Run from your terminal

       cordova plugin add org.apache.cordova.geolocation


Step 4 Add this to your services.js

    .factory('$localStorage', ['$window', function ($window) {
        return {
            set: function (key, value) {
                $window.localStorage[key] = value;
            },
            get: function (key, defaultValue) {
                return $window.localStorage[key] || defaultValue;
            },
            setObject: function (key, value) {
                $window.localStorage[key] = JSON.stringify(value);
            },
            getObject: function (key) {
                return JSON.parse($window.localStorage[key] || '{}');
            }
        }
    }])
    .factory('geoLocation', function ($localStorage) {
        return {
            setGeolocation: function (latitude, longitude) {
                var _position = {
                    latitude: latitude,
                    longitude: longitude
                }
                $localStorage.setObject('geoLocation', _position)
            },
            getGeolocation: function () {
                return glocation = {
                    lat: $localStorage.getObject('geoLocation').latitude,
                    lng: $localStorage.getObject('geoLocation').longitude
                }
            }
        }
    })



Step 5 : Add this to your app.js

    .run(function ($ionicPlatform, $ionicPlatform, $cordovaGeolocation, geoLocation) {

        $ionicPlatform.ready(function () {
            // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
            // for form inputs)
            if (window.cordova && window.cordova.plugins.Keyboard) {
                cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
            }
            if (window.StatusBar) {
                // org.apache.cordova.statusbar required
                StatusBar.styleDefault();
            }

            $cordovaGeolocation
                .getCurrentPosition()
                .then(function (position) {
                    geoLocation.setGeolocation(position.coords.latitude, position.coords.longitude)
                }, function (err) {
                    geoLocation.setGeolocation(37.38, -122.09)
                });

            // begin a watch
            var options = {
                frequency: 1000,
                timeout: 3000,
                enableHighAccuracy: true
            };

            var watch = $cordovaGeolocation.watchPosition(options);
            watch.promise.then(function () { /* Not  used */
                },
                function (err) {
                    geoLocation.setGeolocation(37.38, -122.09)
                }, function (position) {
                    geoLocation.setGeolocation(position.coords.latitude, position.coords.longitude)
                });

        });

    })

Step 5 : Include geoLocation service to your controller and use        

               geoLocation.getGeolocation()

Step 6 :  Enjoy!!!

Labels: , ,

6 Comments:

At April 6, 2015 at 2:57 PM , Blogger Unknown said...

hello sir, i can not find services.js in my blank app. only thing i want to use in my app is geolocation. one for sending its location and one for receiving

 
At May 29, 2015 at 11:30 AM , Blogger Unknown said...

Hi Rachit,services.js its a file what you would need to create, an add this code

 
At July 7, 2015 at 3:45 AM , Blogger Unknown said...

hi how do i add Geo service to my controller

 
At August 5, 2015 at 4:07 PM , Blogger Unknown said...

There is an error on console: Uncaught TypeError: Cannot read property 'then' of undefined. It is refer to code: watch.promise.then(function () { /* Not used */

 
At October 1, 2015 at 1:46 AM , Blogger Unknown said...

Nice Blog! Thank you so much for sharing this one really well defined all peaceful info regarding Tracking app,I Really like it,Love it- real time location tracking app

 
At June 28, 2016 at 1:08 AM , Blogger Unknown said...

Uncaught Error: [$injector:unpr] Unknown provider: $cordovaGeolocationProvider <- $cordovaGeolocation
http://errors.angularjs.org/1.3.13/$injector/unpr?p0=%24cordovaGeolocationProvider%20%3C-%20%24cordovaGeolocation

i will get this error please solve it asap...

 

Post a Comment

Subscribe to Post Comments [Atom]

<< Home