javascript - typescript logic issue with angular 2 and google maps api

Question

i am trying to create a function to get the location value to pass it to all the components using shared service below is my ngOnInit function

   this.input = document.getElementById('google_places_ac');
        var autocomplete = new google.maps.places.Autocomplete(this.input, { types: ['(cities)']});
        google.maps.event.addListener(autocomplete, 'place_changed', function () {
            var place=autocomplete.getPlace();
           this.setValue(place.address_components[3].long_name, place.address_components[2].long_name, place.address_components[1].long_name);

         });

the problem is that it doesn't recognize this.setvalue function which shares value with my shared service or any variable with this.variable , its javascript "this" issue . and i can not even get this function to work with my constructor, it throws error at getElmentById.

there are solutions with arrow functions and all but i dont know how to use it in this condition so please help me..

Answer 1

Inside the place_changed-callback the keyword this points to the Autocomplete-instance.

You'll need to create a closure:

var instance    = this, 
    autocomplete;
instance.input  = document.getElementById('google_places_ac');
autocomplete    = new google.maps.places.Autocomplete(instance.input, { 
                     types: ['(cities)']});

google.maps.event.addListener(autocomplete, 'place_changed', function () {
   var place=this.getPlace();
   instance.setValue(place.address_components[3].long_name,          
                     place.address_components[2].long_name, 
                     place.address_components[1].long_name);
});