Embed Google map in Angular Application

I am trying to show the company address on an embedded google map in my angular application.

in my index file:

<script src="https://maps.googleapis.com/maps/api/js?key=my_key_here&callback=initMap"></script>

in my html file:

<div>
    <iframe *ngIf="property.theaddress != null"
    allowfullscreen
    height="450"
    [src]= getMapUrl()
    width="800">
    </iframe>
</div>

and in my TypeScript file:

public pdfSrc: any;

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

When I open the app the map is not loading but if I open new tab in chrome and close that new tab, I see the map loaded which is acting weird, I tried clearing history (clear browsing data) and still same issue.