How to call a typescript function inside callback of a JavaScript

Question

I'm using javascript Google Maps component in Angular 5 frontend framework

export class MapComponent implements OnInit {
  ngOnInit() {
    this.initializeGMap()
  }

  initializeGMap() {
    var myLatlng = new google.maps.LatLng(12,77);

    var mapOptions = {
        zoom: DEFAULT_MAP_ZOOM,
        center: myLatlng,
        scrollwheel: true,
        styles: MAP_STYLE
    };
    this.map = new google.maps.Map(document.getElementById("map"), mapOptions);
    this.initOnMapClickListener();
  }

  initOnMapClickListener() {
      google.maps.event.addListener(this.map, 'click', function(event) {

      var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
      this.addMarker(selectedLocation)
    });
  }

addMarker(latlng) {
    var marker = new google.maps.Marker({
      position: latlng,
      map: this.map,
      icon: './assets/map_marker.png'
    });
  }

}

Above is my typescript file, it has three functions

initializeGMap() //to initialize google maps
initOnMapClickListener() //to initialize on map click listener
addMarker(latlng) // to add the marker when onmapclick event happens

Uncaught TypeError: Cannot read property 'addMarker' of null

this is what the console error I'm getting if I run Angular application

Please help to understand how to call a typescript function inside a Javascript callback

Can you show your html page ? – rootExplorr Jun 08 '18 at 06:55 — rootExplorr, Jun 08 '18 at 06:55
Pradeep Join's answer was correct, it worked – Nandhakumar Appusamy Jun 08 '18 at 08:59 — Nandhakumar Appusamy, Jun 08 '18 at 08:59

score 5 · Accepted Answer · answered Jun 08 '18 at 06:45

5

Try calling function using arrow function => like this to bind to the laxical scope of this -

initOnMapClickListener() {
      google.maps.event.addListener(this.map, 'click', (event) => {

      var selectedLocation = new google.maps.LatLng(event.latLng.lat(), event.latLng.lng());
      this.addMarker(selectedLocation)
    });
  }

answered Jun 08 '18 at 06:45

Pardeep Jain

84,110
37
165
215

1

Perfect solution! (regarding the downvoters, yes please justify yourself!) – Brain Oct 10 '19 at 17:21
Didn't downvote, but with complex scenarios this way you end up with functions that have hundreds if not thousands of lines of muddled code which are practically illegible. – JN01 May 19 '22 at 07:20

How to call a typescript function inside callback of a JavaScript

1 Answers1