Variables not set after being assigned

I have created global variables for mapData and mapID. I am calling an iframe which retrieves the values for these. And I am assigning these values within a separate function. When I try to console.log mapID/mapData within a different function, it is returning undefined.

address.component.ts

    ngOnInit(){  
    this.show = false;
    this.mapData = '';
    this.mapID = '';

    window.addEventListener('message', this.map, false);
    
  }
    
map(message){
        if (message.origin !== 'https://integrate-dev.riskscape.pro'){
          return;
        }
        this.mapData = message.data;
        this.mapID = this.mapData.feature.properties.rs_address_id;
        console.log('DATA ' + this.mapData);
        console.log('map ID ' + this.mapID);
      }

onGetAddr(){
    
    console.log('Map Data ' + this.mapID);
    const params = new HttpParams()
    .set('rs_address_id', this.mapID);

    console.log(params);
}

address.component.html

<div class="map-container">
    https://integrate-dev.riskscape.pro/maps?address_search=1&unit_selection=1
</div>


<div>
    <button mat-raised-button color="primary" class="btn" (click)="onGetAddr()">Enter</button>
</div>

Source: Angular Questions