Having trouble with the cordova-plugin-geolocation plugin in my ionic/cordova app. It functions perfectly on my browser and iOS device, but when I try it on Android, the map fails to display and does not acquire GPS coordinates. Instead, it times out and throws an error message:
[object PositionError]
I first added the necessary plugins using the following commands in the CLI:
cordova plugin add cordova-plugin-geolocation
cordova plugin add cordova-plugin-whitelist
Then included the following scripts in my index.html file:
<script src="//maps.googleapis.com/maps/api/js"></script>
<script src="lib/angular-google-maps/dist/angular-google-maps.min.js"></script>
Modified my app.js file to include 'uiGmapgoogle-maps':
var app = angular.module('myApp', ['ionic', 'ngCordova', 'uiGmapgoogle-maps']);
The HTML code for the map section:
<!-- Google map -->
<ui-gmap-google-map center='map.center' zoom='map.zoom'>
<ui-gmap-marker coords="marker.coords" options="marker.options" events="marker.events" idkey="marker.id" closeClick="hideMarkerPopup()" onClicked="showMarkerPopup()"></ui-gmap-marker>
</ui-gmap-google-map>
Finally, the logic in the controller section:
ionic.Platform.ready(function() {
var posOptions = {
enableHighAccuracy: true,
timeout: 20000,
maximumAge: 0
};
// Display 'loading' dialog
$ionicLoading.show({
template: 'Loading...'
});
$cordovaGeolocation.getCurrentPosition(posOptions).then(function(position) {
// Update map data
$scope.location = {};
$scope.location.lat = position.coords.latitude;
$scope.location.long = position.coords.longitude;
$scope.map = {
center: {
latitude: $scope.location.lat,
longitude: $scope.location.long
},
zoom: 16,
pan: 1
};
$scope.marker = {
id: 0,
coords: {
latitude: $scope.location.lat,
longitude: $scope.location.long
}
};
$scope.marker.options = {
draggable: false
};
// Dismiss 'loading' dialog
$ionicLoading.hide();
}, function(err) {
// Dismiss 'please wait' dialog
$ionicLoading.hide();
var alertPopup = $ionicPopup.alert({
title: 'GPS Error',
template: err
});
});
}); // ionic.Platform.ready END
Works fine on browser and iOS, but not on Android devices. Any suggestions?