Bing Maps infobox is undefined inside Angular component

Question

I am creating a component in angular/typescript for a bing maps implementation. I went through the process to add an infobox to the map that would initially be not visible to the user. When the user clicks on any of the pushpins on the map the infobox is supposed to display.

However it does not and the property is shown as undefined.

Note: 'DataPoints' contains a list of objects that contains lat long coordinates and an arbitrary ID number.

import { Component, AfterViewInit } from '@angular/core';

import { DataPoint } from '../common/data-point'
import { DataPoints } from '../common/data-points'

@Component({
  selector: 'app-simple-bing-map',
  templateUrl: './simple-bing-map.component.html',
  styleUrls: ['./simple-bing-map.component.css'],
  providers: []
})

export class SimpleBingMapComponent implements AfterViewInit  {

  private map: any;
  private infobox: any;

  ngAfterViewInit() {
    this.getMap();
  }

  populateMap(){
    for(var i in DataPoints){
      var pushpin = new Microsoft.Maps.Pushpin(new Microsoft.Maps.Location(DataPoints[i].Lat, DataPoints[i].Long) , null);

      pushpin.metadata = {
        title: "Test Pushpin",
        description: DataPoints[i].ID,
      };

      //Add a click event handler to the pushpin.
      Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox);

      //place pushpin
      this.map.entities.push(pushpin);
    }

  }

  getMap() {
    //check if Microsoft is available
    if ((window as any).Microsoft && (window as any).Microsoft.Maps) {
      //if it is available create map instance 
      this.map = new Microsoft.Maps.Map(document.getElementById('mapId'), {
        credentials: 'Your Bing Maps Key Here',
      });

      //initialize infobox
      this.infobox = new Microsoft.Maps.Infobox(this.map.getCenter(), {
        title: 'Pushpins',
        description: 'ID Number'
        }
      );

      //hide infobox
      this.infobox.setOptions({ visible: false })

      //Assign the infobox to a map instance.
      this.infobox.setMap(this.map);

      this.populateMap();
     }

     //wait and try again
     else {
        setTimeout(() => { this.getMap() }, 1000);
     }
  }

  displayInfobox(e) {
    //hide any previous infobox
    this.infobox.setOptions({ visible: false });

    //Make sure the infobox has metadata to display.
    if (e.target.metadata) {
        //Set the infobox options with the metadata of the pushpin.
        this.infobox.setOptions({
            location: e.target.getLocation(),
            title: e.target.metadata.title,
            description: e.target.metadata.description,
            visible: true
        });
    }
  }
}

As stated earlier the map loads completely and works as it should. It is just after I enter the 'displayInfobox' method that things act weirdly.

Answer 1

To retain this inside displayInfobox method i would advice you using either bind method like:

Microsoft.Maps.Events.addHandler(pushpin, 'click', this.displayInfobox.bind(this));

or arrow function:

Microsoft.Maps.Events.addHandler(pushpin, 'click', (e) => this.displayInfobox(e));

For other solutions see

• https://github.com/Microsoft/TypeScript/wiki/%27this%27-in-TypeScript