Blaze Blaze - 23 days ago 20
AngularJS Question

Ionic: Reverse Geocoding

I am integrating GPS Services into my application. I have added and injected the Cordova GPS plugin.
I am able to retrieve the longitude and the latitude as shown on the ngCordova documentation on gps. This is my approach:

.controller('geoLocationCtrl', function($scope,$window) {
$window.navigator.geolocation.getCurrentPosition(function(position){
$scope.$apply(function(){
$scope.lat = position.coords.latitude;
$scope.lng = position.coords.longitude;
})

console.log(position);
})
})


My challenge is how can I use the above to return the current address, state and country of the user.

Answer

The process of turning a longitude and latitude into a human readable address is called Reverse Geocoding. Many map APIs support that like Google Maps and Here Maps. Here is how you can do it using Google Maps API

Add Google Maps JavaScript API

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script>

Query the API: here is an angular controller sample

app.controller('geoLocationCtrl', function($scope, $window) {
  $window.navigator.geolocation.getCurrentPosition(function(position) {
    $scope.$apply(function() {
      $scope.lat = position.Coordinates.latitude;
      $scope.lng = position.Coordinates.longitude;

      var geocoder = new google.maps.Geocoder();
      var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
      var request = {
        latLng: latlng
      };
      geocoder.geocode(request, function(data, status) {
        if (status == google.maps.GeocoderStatus.OK) {
          if (data[0] != null) {
            alert("address is: " + data[0].formatted_address);
          } else {
            alert("No address available");
          }
        }
      })
      console.log(position);
    })
  })
});
Comments