Ionic: Reverse Geocoding

Question

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.

score 8 · Accepted Answer · edited Nov 09 '16 at 22:35

8

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);
    })
  })
});

edited Nov 09 '16 at 22:35

Kevin Stewart

415
6
16

answered Jan 18 '16 at 09:23

Hisham

2,586
1
14
18

Using the above answer the application shows a white screen. See edited for the updated code. – Blaze Jan 18 '16 at 09:39
you have code errors in your snippet, first access the variables from $scope in this line var latlng = new google.maps.LatLng($scope.lat, $scope.lng); And you have a couple of missing brackets at the end. I will edit my answer with the full code – Hisham Jan 18 '16 at 09:48
No alert was triggered, whether address was returned or not returned but the long and lat displays – Blaze Jan 18 '16 at 10:10
can you debug the code and tell me where is it failing for you? do you get any response at all from the geocode call? – Hisham Jan 18 '16 at 10:13
with no errors in console? can you please elaborate on the behaviour you are facing so that I can help? – Hisham Jan 18 '16 at 10:28
Hi Hisham, On ionic serve command, it works on chrome browser. On building and deployed to android device, geocode is not returned. Thanks – Blaze Jan 18 '16 at 10:31
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/100959/discussion-between-hisham-abdel-hafez-and-jng). – Hisham Jan 18 '16 at 10:40
How can I get the only city name from latlng using geocoder? – Vivek Sinha Apr 28 '17 at 06:31

score 0 · Answer 2 · edited May 23 '17 at 12:34

0

you need to find out the address and other details using the lat and long values: How to get address location from latitude and longitude in Google Map.?

edited May 23 '17 at 12:34

Community

1
1

answered Jan 18 '16 at 09:20

Sheetal

1,368
1
9
15

Ionic: Reverse Geocoding

2 Answers2