Error using getDetails() from googlemaps API, Typeerror: this is null (Ionic, angular)

Question

I’m new at Ionic and angular. I’m looking for nearby places using nearbySearch() that returns a resolve of results, of this results caught the place_id of the place and put in the function getDetails(), but when will I assign the result of getDetails(place) to another to export it, I face this error below.

Typeerror: this is null[Learn More] js-maps.ts:48:14 init js-maps.ts:48 L3 places_impl.js:19 J3 places_impl.js:17 e

places_impl.js:4 c common.js:67

Placeservice.Getplacedetails:1

Follow my code.

import { Injectable } from '@angular/core';
import { Geolocation } from '@ionic-native/geolocation';

declare var google;

@Injectable()
export class JsMapsProvider {
 
  map: any;
  places : Array<any>;
  farmaciasId :Array<any>;
  detalhesfarma: Array<object>;
  servico: any;
  farmacias :Array<any>;

  constructor(public geolocation : Geolocation) { }

  init(location, element){

    let latLng = new google.maps.LatLng(location.latitude, location.longitude);
 
    let opts = {
      center: latLng,
      zoom: 15,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    };
 
    this.map = new google.maps.Map(element.nativeElement, opts);
    var service = new google.maps.places.PlacesService(this.map);

    this.getFarmas(latLng).then((place : Array<any>)=>{
      this.places = place;      
      
      for(let i = 0 ;i < place.length ; i++)
      {
        this.createMarker(place[i]);

        service.getDetails({
          placeId:place[i].place_id
          },function (place, status){
            if (status === google.maps.places.PlacesServiceStatus.OK) {
              **this.detalhesfarma = place;**
            }
          } 
        );
      }
    },(status)=>console.log(status));
    
    this.addMarker(this.map);
    
  }

  getFarmas(latLng){

    var service = new google.maps.places.PlacesService(this.map);
    this.servico = service;

    let request = {
        location : latLng,
        //radius : 2000 ,
        types: ['pharmacy'],
        rankBy: google.maps.places.RankBy.DISTANCE
    };
    return new Promise((resolve,reject)=>{
        service.nearbySearch(request,function(results,status){
              if(status === google.maps.places.PlacesServiceStatus.OK)
              {                 
                  resolve(results);
              }else
              {
                  reject(status);
              }

        }); 
    });
  }

  
  createMarker(place){
    
    let marker = new google.maps.Marker({
    map: this.map,
    animation: google.maps.Animation.DROP,
    icon: 'assets/icon/icon-29.png',
    position: place.geometry.location
    });

    
             
    let infoWindow = new google.maps.InfoWindow({});
    
      google.maps.event.addListener(marker, 'click', function() {
        infoWindow.setContent('<div><strong>' + place.name + '</strong><br>' +
          'Endereço: ' + place.vicinity + '</div>');
        infoWindow.open(this.map, this);
      });


  }

  addMarker(map:any){

    let marker = new google.maps.Marker({
      map: map,
      animation: google.maps.Animation.BOUNCE,
      position: map.getCenter()
    });

    //adicionado 18/01
    let content = "<p>Estou aqui !</p>";          
    let infoWindow = new google.maps.InfoWindow({
    content: content
    });

    google.maps.event.addListener(marker, 'click', () => {
    infoWindow.open(this.map, marker);
    });
    //-----


  }
}

Answer 1

Assuming your mistake is here **this.detalhesfarma = place;**. You have an anonymous callback function that overrides this, you can assign this the other variable before using it in its anonymous function or using Arrow Function which refers to the parent scope.

Arrow Function

    service.getDetails({
      placeId:place[i].place_id
      },(place, status) => {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          **this.detalhesfarma = place;**
        }
      } 
    );

Reference

    var self = this
    service.getDetails({
      placeId:place[i].place_id
      },function(place, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          self.detalhesfarma = place;
        }
      } 
    );