如何在iFrame加载的页面中正常使用Google Maps JavaScript API？

方案1：修正Google Cloud API密钥的引用限制配置 #

Google Maps JavaScript API本身并未禁止在iframe中加载，绝大多数加载失败都是API密钥的访问限制配置错误导致：

• 打开Google Cloud控制台，进入对应项目的「Maps JavaScript API」的「凭据」页面
• 找到你正在使用的API密钥，在「应用限制」板块选择「HTTP 引荐来源网址」
• 在「接受来自这些 HTTP 引荐来源网址的请求」列表中，添加两类地址：
  • 你存放地图工具HTML页面的完整域名路径，比如https://your-domain.com/map-tool/*
  • FileMaker内置Web视图对应的父级源地址，如果你是直接在FileMaker中加载本地HTML，可添加file://*临时测试，生产环境建议将HTML部署在HTTPS域名下后添加对应域名
• 保存配置后等待5分钟左右生效，再重新加载测试
  同时要确保你自己的地图工具页面的响应头没有设置X-Frame-Options: DENY或者Content-Security-Policy: frame-ancestors 'self'这类禁止iframe嵌入的规则。

方案2：修复SameSite Cookie兼容问题 #

Google服务的Cookie默认启用了SameSite=Lax限制，在跨源iframe中加载时会被浏览器拦截，导致API初始化失败：

• 如果你自己的地图工具页面部署在自有HTTPS域名下，在服务端的响应头中添加：

  Set-Cookie: SameSite=None; Secure; Partitioned
  

• 部分旧版本FileMaker内置的WebKit内核不支持Partitioned属性，可暂时只保留SameSite=None; Secure即可
  调整后即可解决iframe下Google服务Cookie被拦截的问题。

方案3：反向代理封装Google Maps请求 #

如果上述配置调整后仍有兼容问题，可通过自有服务端做反向代理封装所有Google Maps相关请求：

• 在你的服务端配置反向代理规则，将https://maps.googleapis.com/*的请求转发到Google官方地址
• 将你地图工具代码中所有引入Google Maps JS API的地址、API请求地址都替换为你自己的反向代理地址
• 此时所有地图相关请求都和你的地图页面同源，不会触发Google的iframe跨源限制，也可以保留所有自定义事件监听、交互逻辑的正常运行

注意：使用反向代理方案时需要确保遵守Google Maps API的服务条款，不要修改返回的地图数据内容。

内容的提问来源于stack exchange，提问作者Oli