Uncaught (in promise): TypeError: this.mapRef.addListerner is not a function

Ionic Framework ionic-v3
1

I’m trying to coding a app using google maps api and my idea is to put a marker on the map when click him, but i having a lot of problems with this and my last one is this.
I’m using the tutorial from the maps javascript api that google disponibilize here https://developers.google.com/maps/documentation/javascript/events, but it’s not working, below it’s my code.

export class HomePage{
  mapRef = null;

  @ViewChild('mapElement') mapElement;
 
  constructor (private geolocation:Geolocation,
    private loadCtrl: LoadingController){}

  ngOnInit(){
    this.loadMap();
   }

   async loadMap(){
     //loading enquanto carrega o mapa
     const loading = await this.loadCtrl.create();
     loading.present();
     const myLatLng = await this.getLocation();
     //carrega mapa
     const mapEle: HTMLElement = document.getElementById('map');
     this.mapRef = new google.maps.Map(mapEle, {
       center: myLatLng,
       zoom: 12
     });
     google.maps.event.addListenerOnce(this.mapRef, 'idle', ()=>{
      loading.dismiss();
      this.addMarker(myLatLng.lat, myLatLng.lng);
     });

     this.mapRef.addListerner('click', function(e){
      placeMarkerAndPanTo(e.latLng, mapEle);
     });
    
   }

   

   private addMarker(lat: number, lng: number){
     const marker = new google.maps.Marker({
      position: {
        lat: lat,
        lng: lng
      },
      map: this.mapRef,
      title: 'hello world'
     });
   }

   private async getLocation(){
     //pega posição atual
     const rta = await this.geolocation.getCurrentPosition();
     return {
       lat: rta.coords.latitude,
       lng: rta.coords.longitude
     };
     //console.log(myLatLng);
   }
  


}

function placeMarkerAndPanTo(latLng, map){
  var marker = new google.maps.Marker({
    position: latLng,
    map: map
  });
}