I have used a map in my angularjs/ionic app using geolocation.There's a feature as find me.It's supposed to point out our position in the map.I have trouble implementing this.What is the issue here?.It just shows the progress circle but does not point my location.
My js
.controller('MapCtrl', function($scope, $ionicLoading, $compile, $state, $ionicPlatform, $location) {
$scope.map = map;
$scope.basel = {
lat: 6.802107,
lon: 79.921749
};
$ionicPlatform.ready(function() {
navigator.geolocation.getCurrentPosition(function(position) {
$scope.gotoLocation(6.802107, 79.921749);
$scope.$apply();
}, function(e) {
console.log("Error retrieving position " + e.code + " " + e.message)
});
$scope.gotoLocation = function(lat, lon) {
if ($scope.lat != lat || $scope.lon != lon) {
$scope.basel = {
lat: lat,
lon: lon
};
if (!$scope.$phase) $scope.$apply("basel");
}
};
for (var i = 0; i < $scope.locations.BranchAndAtms.length; i++) {
var objectMark = $scope.locations.BranchAndAtms[i];
$scope.whoiswhere.push({
"name": objectMark.outlet,
"lat": objectMark.lat,
"lon": objectMark.lon,
"date": objectMark.address
});
};
for (var i = 0; i < $scope.locationsIDC.IDC.length; i++) {
var objectMark = $scope.locationsIDC.IDC[i];
$scope.whoiswhere.push({
"name": objectMark.outlet,
"lat": objectMark.lat,
"lon": objectMark.lon,
"date": objectMark.address
});
};
});
//google.maps.event.addDomListener(window, 'load', initialize);
var contentString = "<div><a ng-click='clickTest()'>Click me!</a></div>";
var compiled = $compile(contentString)($scope);
$scope.centerOnMe = function() {
if (!$scope.map) {
return;
}
$scope.loading = $ionicLoading.show({
content: 'Getting current location...',
showBackdrop: false
});
window.alert("dgdfd");
navigator.geolocation.getCurrentPosition(function(pos) {
window.alert(pos);
$scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude));
window.alert(pos.coords.longitude);
window.alert(pos.coords.latitude);
},
function(error) {
alert('Unable to get location: ' + error.message);
});
};
$scope.clickTest = function() {
alert('Example of infowindow with ng-click')
};
})
my html
<div id="map" style="width:100%; height:100%; padding:10px; margin-top:45px;" ng-show="demo == 'ios'">
<app-map style="height:100%; width:100%;"
center="basel"
zoom="3"
markers="whoiswhere"
>
</app-map>
</div>
<ion-footer-bar class="bar-dark">
<a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Locate the nearest Branch</a>
</ion-footer-bar>
Put this in you AndroidManifest.xml
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
I'm using vanilla JavaScript rather than Angular and Google Maps API but here's my geolocation code:
if (navigator.geolocation) {
function success(geoposition) {
var userLocation = new google.maps.LatLng(geoposition.coords.latitude, geoposition.coords.longitude);
map.setCenter(userLocation);
};
function error(error) {
console.warn('ERROR(' + error.code + '): ' + error.message);
};
var options = {
enableHighAccuracy: true,
timeout: 5000,
maximumAge: 10000
}
navigator.geolocation.getCurrentPosition(success, error, options);
}
Your first (success) function has the argument 'position' but you don't appear to be using it to get the user location. I think you need to extract position.coords.latitude and position.coords.longitude. I also wrapped my function in an 'if' clause in case the geolocation feature is not supported.