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


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){}


   async loadMap(){
     //loading enquanto carrega o mapa
     const loading = await this.loadCtrl.create();
     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', ()=>{
      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


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