How to use latitude and longitude in Angular?

Issue

I am trying to show a specific location in Google Map using Angular

in my html I have:

<google-map height="500px" width="100%" [center]="position" `[zoom]="zoom">`
    <map-marker [position]="position" ></map-marker>
  </google-map>

I have declared the type in property model as follows:

  lat: string;
  lng: string;

and in my JSON data file I have:

 "lat": "24.488354389767583",
 "lng": "54.39509929776173"

then in my TypeScript file I have the below code adding + sign to convert to a number:

the code:

ngOnInit() {

    this.form.controls['subject'].disable();
    this.token = localStorage.getItem('token');
    this.propertyId = +this.route.snapshot.params['id'];
    this.route.data.subscribe(
      (data: any) => {
        this.property = data['prp'];
      }
    )

    this.propid = this.propertyId;
    this.propidStr = "nums" + this.propid.toString()

       let data2:any = localStorage.getItem(this.propidStr);
       this.likes = JSON.parse(data2);
     
  }

  public zoom = 15;
    
    public position = {

      //use this.property. and create lat and lng
      
        lat: parseFloat(this.property.lat),
        lng: parseFloat(this.property.lng),
  
    };

but I am getting an error:

InvalidValueError: setCenter: not a LatLng or LatLngLiteral with finite coordinates: in property lat: NaN is not an accepted value

Solution

I went another approach by looking for location using company name.

this.dangerousUrl = "https://www.google.com/maps?q=" + this.property.theaddress + "&output=embed"
this.pdfSrc =  this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousUrl);

Answered By - Shahed RTW