Get address from user location using Cordova / Angular JS

Question

Using the cordova-plugin-geoloaction , I get the user position on my mobile device. My onSuccess() function returns latitude and longitude, and now I would like to show the corresponding address in the application:

 <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 many APIs (e.g. Google Maps) that offer an address for latitude / longitude conversion, but not vice versa (latitude / longitude for addressing).

Is there a good web service I can use for this?

Answer 1

You can use the Google Maps geocoding service to resolve the 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>