CODEWITHSUNDEEP
javascriptangular6reverse-geocoding
Sed
Sed

Reputation: 43

How to get address from latitude and longitude using angular 6

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(pos => {
        x.value = "" + pos.coords.longitude;
        y.value = "" + pos.coords.latitude;

        this.locations.push({
          lng: pos.coords.longitude,
          lat: pos.coords.latitude,
          time: local.value,
          picture: picture.value,
          publicIp: publicIp.value,
          privateIp: privateIp.value
        });

        console.log(this.locations);

        console.log(local.value);

Upvotes: 3

Views: 19987

Answers (2)

Mukul_Vashistha
Mukul_Vashistha

Reputation: 106

For getting the address from the latitude and longitude you will have to use some reverse geocoding API. Try searching for some free API which provides the same.

ArcGIS provides a free (and paid) API:

https://developers.arcgis.com/rest/geocode/api-reference/geocoding-reverse-geocode.htm

It provides an address for a given location (lat/lon). It doesn't even require an API key, but they suggest you get a free one to avoid rate limits.

Have fun implementing it :)

Upvotes: 2

Norcino
Norcino

Reputation: 6617

You need to use a reverse geocoding API like the following: https://developers.google.com/maps/documentation/javascript/examples/geocoding-reverse

Below an example from the link above:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Reverse Geocoding</title>
    <style>
      #map {
        height: 100%;
      }
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #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;
      }
      #floating-panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        width: 350px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
      #latlng {
        width: 225px;
      }
    </style>
  </head>
  <body>
    <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>
    <script>
      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 === '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);
          }
        });
      }
    </script>
    <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
    </script>
  </body>
</html>

Upvotes: 0

Related Questions