React中动态设置Google Maps嵌入iframe的src遇X-frame-options错误

静态src能正常渲染，是因为该链接是Google生成的带特定验证的嵌入链接，服务器允许iframe嵌套；但动态拼接maps.google.com/maps?output=embed格式的URL时，Google服务器会返回X-Frame-Options限制（如SAMEORIGIN或DENY），拒绝跨域iframe嵌入。

使用Google Maps官方提供的标准嵌入端点（https://www.google.com/maps/embed），该端点支持动态传入位置参数，且不会触发X-frame限制：

1. 获取基础嵌入模板
   在Google Maps中定位目标地点，点击「分享」→「嵌入地图」，可得到标准嵌入代码，核心src格式为：

   https://www.google.com/maps/embed?q=[编码后的位置]&z=15
   

2. 动态生成合规的src
   对自定义位置字符串做URL编码，再拼接成最终src：

   // 编码自定义位置
   const encodedLocation = encodeURIComponent(myCustomLocation);
   // 拼接生成嵌入链接
   const mapSrc = `https://www.google.com/maps/embed?q=${encodedLocation}&z=15`;
   

3. 应用到iframe
   将动态生成的src绑定到iframe：

   <iframe 
     width="100%" 
     height="200" 
     frameBorder="0" 
     scrolling="no" 
     marginHeight="0" 
     marginWidth="0" 
     id="gmap_canvas" 
     src={mapSrc}
     allowfullscreen
     loading="lazy"
   ></iframe>
   

• 不要使用maps.google.com/maps?output=embed格式的链接，该格式仅官方预生成的静态链接能通过iframe嵌入，动态拼接会触发权限限制。
• 必须对自定义位置做encodeURIComponent编码，避免特殊字符（空格、特殊符号）导致URL失效。

内容的提问来源于stack exchange，提问作者Gustavo Martins dos Santos