我正试图在我的angular应用程序中创建一个模态，当打开时，在iframe中显示谷歌Map。
我的问题是iframe不加载，我在浏览器控制台得到这个错误：
chromewebdata/：1拒绝在框架中显示'https：//www.google.com/'，因为它将'X-Frame-Options'设置为'sameorigin'。
下面是我的modal的代码：

<h2 mat-dialog-title>Google maps</h2>
<mat-dialog-content class="mat-typography">
  <iframe [src]="'https://maps.google.com/?q={{customer.address}},{{customer.city}}' | safe" width="800" height="600" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</mat-dialog-content>
<mat-dialog-actions align="end">
  <button mat-button mat-dialog-close>Zapri</button>
</mat-dialog-actions>

字符串
客户地址和城市是我从API获取的数据，而“|安全”是一个URL消毒剂管道...我的想法是把这样的URL放在一起：https://maps.google.com/?q=1200 Pennsylvania Ave SE, Washington, District of Columbia, 20003
这是否正确的做法呢？我应该做些不同的事情吗？