Geo Location - Using Ionic Framework, AngularJS and Google API Geo Location - Using Ionic Framework, AngularJS and Google API angularjs angularjs

Geo Location - Using Ionic Framework, AngularJS and Google API


Here's a good example of this.

Codepen link

.controller('MarkerRemoveCtrl', function($scope, $ionicLoading) {  $scope.positions = [{    lat: 43.07493,    lng: -89.381388  }];  $scope.$on('mapInitialized', function(event, map) {    $scope.map = map;  });  $scope.centerOnMe= function(){    $ionicLoading.show({      template: 'Loading...'    });    navigator.geolocation.getCurrentPosition(function(position) {      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);      $scope.positions.push({lat: pos.k,lng: pos.B});      console.log(pos);      $scope.map.setCenter(pos);      $ionicLoading.hide();    });  };});

I did use a directive for google maps, just to keep everything in angular-land.


Here is a CodePen of an Ionic app with Google Maps


angular.module('ionic.example', ['ionic'])    .controller('MapCtrl', function($scope, $ionicLoading, $compile) {      function initialize() {        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);        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: 'Uluru (Ayers Rock)'        });        google.maps.event.addListener(marker, 'click', function() {          infowindow.open(map,marker);        });        $scope.map = map;      }      google.maps.event.addDomListener(window, 'load', 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')      };    });


when you find the current location of your phone first you find out the latitude and longitude.So First,Add the plugin your project 1.cordova plugin add cordova-plugin-geolocation2.module.controller('GeoCtrl', function($cordovaGeolocation,$http) {  var posOptions = {timeout: 10000, enableHighAccuracy: false};  $cordovaGeolocation    .getCurrentPosition(posOptions)    .then(function (position) {      var lat  = position.coords.latitude //here you get latitude      var long = position.coords.longitude //here you get the longitude  $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true').then(function(data){      $rootScope.CurrentLocation=data.data.results[0].formatted_address;//you get the current location here        }, function(err) {          // error        });    }, function(err) {      // error    });}):