Santosh Shinde Santosh Shinde - 2 months ago 13
Android Question

location in Ionic project for android

In a simple Ionic app I have to get current location on map. It's works fine in browser when i click find me, but it's not working on actual Android device.

I'm using the following code

View.html

<ion-view view-title="{{navTitle}}">
<ion-content>
<div id="map" data-tap-disabled="true"></div>
</ion-content>
<ion-footer-bar class="bar-stable">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Find Me</a>
</ion-footer-bar>
</ion-view>


controllers.js

.controller('googlemap', function($scope, $ionicLoading, $compile) {
$scope.navTitle = 'Google Map';
$scope.$on('$ionicView.afterEnter', function(){
if ( angular.isDefined( $scope.map ) ) {
google.maps.event.trigger($scope.map, 'resize');
}
});

function initialize() {
//var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
var myLatlng = new google.maps.LatLng(18.520430300000000000,73.856743699999920000);
var mapOptions = {
center: myLatlng,
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map"),
mapOptions);

//Marker + infowindow + angularjs compiled ng-click
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);

var infowindow = new google.maps.InfoWindow({
content: compiled[0]
});

var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Pune(India)'
});

google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});

$scope.map = map;
}
initialize();

$scope.centerOnMe = function() {
if(!$scope.map) {
return;
}

$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});

navigator.geolocation.getCurrentPosition(function(pos) {
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
$scope.loading.hide();
}, function(error) {
alert('Unable to get location: ' + error.message);
});
};

$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};

})


Also in my device on the device Location but still I have problem.I got following output on my screen for long time.

enter image description here

Answer

Isn't it easier to just use the ngCordova $cordovaGeoLocationPlugin ? You can get the position from this plugin ( latitude and longitude) and then pass this in GoogleAPI. I think it will be lot easier that way.

ngCordova geoLocationPlugin

Just a suggestion.