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
– rootExplorr

2018-06-08 06:55:02 +00:00
Commented Jun 8, 2018 at 6:55 — rootExplorr
– rootExplorr, Commented Jun 8, 2018 at 6:55
<div id="map" class="map"></div>

Nandhakumar Appusamy
– Nandhakumar Appusamy

2018-06-08 08:58:13 +00:00
Commented Jun 8, 2018 at 8:58 — Nandhakumar Appusamy
– Nandhakumar Appusamy, Commented Jun 8, 2018 at 8:58
Pradeep Join's answer was correct, it worked

Nandhakumar Appusamy
– Nandhakumar Appusamy

2018-06-08 08:59:10 +00:00
Commented Jun 8, 2018 at 8:59 — Nandhakumar Appusamy
– Nandhakumar Appusamy, Commented Jun 8, 2018 at 8:59

Pardeep Jain · Accepted Answer · 2018-06-08 06:45:13Z

6

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 8, 2018 at 6:45

Pardeep Jain

86.9k38 gold badges172 silver badges220 bronze badges

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

2 Comments

Brain Over a year ago

Perfect solution! (regarding the downvoters, yes please justify yourself!)

JN01 Over a year ago

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.

Collectives™ on Stack Overflow

How to call a typescript function inside callback of a JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related