Get address from user location using Cordova/Angular JS

Question

Using the cordova-plugin-geoloaction plugin I am retrieving the position of the user on its mobile device. My onSuccess() function returns the latitude and the longitude and now I would like to show the corresponding address in the app:

<script type="text/javascript" charset="utf-8">

  // Wait for device API libraries to load
  //
  document.addEventListener("deviceready", onDeviceReady, false);

  // device APIs are available
  function onDeviceReady() {
    navigator.geolocation.getCurrentPosition(onSuccess, onError);
  }

  // onSuccess Geolocation
  function onSuccess(position) {
    var element = document.getElementById('geolocation');
    element.innerHTML = 'Latitude: ' + position.coords.latitude              + '<br />' +
            'Longitude: '          + position.coords.longitude             + '<br />' +
            'Altitude: '           + position.coords.altitude              + '<br />' +
            'Accuracy: '           + position.coords.accuracy              + '<br />' +
            'Altitude Accuracy: '  + position.coords.altitudeAccuracy      + '<br />' +
            'Heading: '            + position.coords.heading               + '<br />' +
            'Speed: '              + position.coords.speed                 + '<br />' +
            'Timestamp: '          + position.timestamp                    + '<br />';
  }

  // onError Callback receives a PositionError object
  function onError(error) {
    alert('code: ' + error.code + '\n' + 'message: ' + error.message + '\n');
  }

</script>

I found a lot of APIs (e.g. Google Maps) that offer address to latitude/longitude conversion but not the other way around (latitude/longitude to address).

Is there any good webservice I can use for that?

Answer 1

You could utilize Google Maps Geocoding service for resolving address by coordinates (reverse geocoding)

Example

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 8,
        center: { lat: 40.731, lng: -73.997 }
    });
    var geocoder = new google.maps.Geocoder;
    var infowindow = new google.maps.InfoWindow;

    document.getElementById('submit').addEventListener('click', function () {
        geocodeLatLng(geocoder, map, infowindow);
    });
}

function geocodeLatLng(geocoder, map, infowindow) {
    var input = document.getElementById('latlng').value;
    var latlngStr = input.split(',', 2);
    var latlng = { lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1]) };
    geocoder.geocode({ 'location': latlng }, function (results, status) {
        if (status === google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                map.setZoom(11);
                var marker = new google.maps.Marker({
                    position: latlng,
                    map: map
                });
                infowindow.setContent(results[0].formatted_address);
                infowindow.open(map, marker);
            } else {
                window.alert('No results found');
            }
        } else {
            window.alert('Geocoder failed due to: ' + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initMap);

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

#floating-panel {
    position: absolute;
    top: 10px;
    left: 25%;
    z-index: 5;
    background-color: #fff;
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    font-family: 'Roboto','sans-serif';
    line-height: 30px;
    padding-left: 10px;
}

<script src="https://maps.google.com/maps/api/js"></script>
 <div id="floating-panel">
    <input id="latlng" type="text" value="40.714224,-73.961452">
    <input id="submit" type="button" value="Reverse Geocode">
</div>
<div id="map"></div>