Reverse geocoding using Angular 2

Question

I am using reverse geocoding using Angular 2, it is working fine but i am not able to set the values(i.e, city name) using service(setter and getter)

import { ShareService } from './services/ShareService';
class ConferenceApp {
   constructor(public shareService: ShareService){
     this.getGeoLocation();

   }
    public getGeoLocation(){
          if (navigator.geolocation) {
              var options = {
                enableHighAccuracy: true
              };

              navigator.geolocation.getCurrentPosition(position=> {
                this.lat = position.coords.latitude;
                this.long = position.coords.longitude;
                let geocoder = new google.maps.Geocoder();
                let latlng = new google.maps.LatLng(this.lat, this.long);
                let request = {
                  latLng: latlng
                };   

                  geocoder.geocode(request, function(results, status) {
                    if (status == google.maps.GeocoderStatus.OK) {
                      if (results[0] != null) {
                       let city = results[0].address_components[results[0].address_components.length-4].short_name;                      

                       this.shareService.setLocationDetails(city);


                      } else {
                        alert("No address available");
                      }
                    }
                  });

              }, error => {
                console.log(error);
              }, options);
          }
        }
}

if i try to set using service, this.shareService.setLocationDetails(city); I am getting error saying,

app.ts:303 Uncaught TypeError: Cannot read property 'shareService' of undefined

The service:

locationObj: any;
setLocationDetails(locationObj){
      this.locationObj = locationObj;
    }
    getLocationDetails(){
      return this.locationObj;
    }

please mention the packages and imports you have used here.

Vijender Kumar
– Vijender Kumar

2018-04-02 18:56:31 +00:00
Commented Apr 2, 2018 at 18:56 — Vijender Kumar
– Vijender Kumar, Commented Apr 2, 2018 at 18:56

Sergey Sklyar · Accepted Answer · 2018-08-05 17:23:50Z

6

I think everything is fine. But, I'd suggest you to use arrowfunction()=> as shown below,

// Removed function keyword and added arrow function
geocoder.geocode(request, (results, status) => {
  if (status == google.maps.GeocoderStatus.OK) {
    if (results[0] != null) {
      let city = results[0].address_components[results[0]
                .address_components.length-4].short_name;
      this.shareService.setLocationDetails(city);
    } else {
      alert("No address available");
    }
  }
});

edited Aug 5, 2018 at 17:23

Sergey Sklyar

1,9701 gold badge19 silver badges30 bronze badges

answered Oct 8, 2016 at 5:11

micronyks

55.6k17 gold badges122 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Usman Iqbal Over a year ago

Thanks man for telling us to use the arrow function. But why the normal function is not working ???

Meegh · Accepted Answer · 2018-05-08 16:50:17Z

0

geocoder.geocode(request, (results, status) => {....} showed an error on 'results' saying that {'latLng' : latlng} does not correspond to results type.

Solution:

  var geocoder = new google.maps.Geocoder();
  var latlng = new google.maps.LatLng(this.eventLat, this.eventLng);
  let request = {
    location: latlng
  };
  geocoder.geocode(request, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[1]) {
            console.log(results[1].formatted_address);

        } else {
            console.log('Location not found');
        }
    } else {
        console.log('Geocoder failed due to: ' + status);
    }
});

edited May 8, 2018 at 16:50

answered May 8, 2018 at 12:46

Meegh

391 silver badge10 bronze badges

Comments

trsft · Accepted Answer · 2019-06-13 19:02:47Z

I have not enough reputation to comment :-(, so I will answer Usman Iqbal's question as an answer. Maybe some admin can transform this into a comment.

Implicit callback functions create a structure named closure: An object containing the actual function as well as its creation context. That context contains all the variables "surrounding" the callback as well as their values at the time the function was created. The closure does not contain the value of the context's this, because it is an object itself and has its own this at the time the callback is executed.

To make the this of the creation context directly available, arrow functions by definition handle this such that it is not the closure's this, but the this of the creation context. Without arrow functions you can achieve the same by explicitly copying the surrounding this into the context of the closure:

let self = this; // this of the creation context

geocoder.geocode(request, function (results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
        if (results[0] != null) {
            ...
            // access the surrounding this via self
            self.shareService.setLocationDetails(city);
        } 
        ...
    }
});

Collectives™ on Stack Overflow

Reverse geocoding using Angular 2

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related