Incorporated a map into my AngularJS/Ionic application using geolocation with a "find me" feature designed to identify our location on the map. However, encountering issues in implementing this functionality - the progress circle displays but fails to pinpoint my exact location.
JavaScript:
.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')
};
})
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>