Dynamically set address in Google map URL in Angular

Hi,

I have a frame that can display google map as below:

<div>
    <iframe *ngIf="property.theaddress != null"
        allowfullscreen
        height="450"
        loading="lazy"
        [src]= getMapUrl()
        style="border:0"
        width="720">
    </iframe>
</div>

and in the ts file I have:

getMapUrl(): string {
    this.dangerousUrl = this.property.theaddress;
    this.pdfSrc =  this.sanitizer.bypassSecurityTrustResourceUrl(this.dangerousUrl);
    
    return this.pdfSrc;
}

and in my JSON file I have the address formated as below:

"theaddress": "https://www.google.com/maps?q=TamouhTower&output=embed"

so now the q represent the name of the company as an example above "TamouhTower" so what I want is to add that dynamically so instaed of having the variable holding the whole thing over and over again, I want to take the name of the company and put it in the url.

instaed of the above: 

"theaddress": "https://www.google.com/maps?q=TamouhTower&output=embed"

I would just have TamouhTower and then the function will add it to the whole url.