FlutterFlow中Google Maps Widget灰屏求助，PlacePicker可正常使用

核心排查方向：CSP配置适配Google Maps资源 #

既然PlacePicker能正常工作，说明API密钥权限、基础网络连接没问题，问题出在GoogleMap组件加载所需的资源被FlutterFlow默认CSP拦截。以下是具体修复步骤：

1. 提取完整CSP错误信息 #

先复制控制台里的CSP错误详情，重点定位blocked by CSP后标注的资源域名，比如maps.googleapis.com、maps.gstatic.com、fonts.gstatic.com这类Google Maps核心依赖资源。

2. 在FlutterFlow中配置自定义CSP #

• 打开FlutterFlow项目，进入设置（Settings） → Web Settings
• 找到Content Security Policy (CSP) 选项，切换为Custom模式
• 在输入框中添加允许Google Maps资源的规则，参考基础模板：

default-src 'self';
script-src 'self' 'unsafe-inline' 'unsafe-eval' maps.googleapis.com;
style-src 'self' 'unsafe-inline' fonts.googleapis.com;
img-src 'self' data: maps.gstatic.com maps.googleapis.com;
font-src 'self' fonts.gstatic.com;
connect-src 'self' maps.googleapis.com;

提示：如果控制台提示其他被拦截的域名，需要把对应域名补充到匹配的规则中（比如脚本资源加在script-src，图片资源加在img-src）

3. 验证配置生效情况 #

保存设置后重新部署Web版本，打开浏览器控制台查看是否还有CSP错误。若仍存在，继续补充遗漏域名；若错误消失，检查GoogleMap是否正常加载。

4. 额外排查点（CSP修复后仍异常） #

• 确认GoogleMap组件的初始相机位置纬度、经度为有效值，避免因坐标无效导致加载失败
• 检查项目中自定义代码（Custom Code）是否无意中修改了Web视图的CSP规则
• 清除浏览器缓存后重新加载页面，避免旧CSP规则残留

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