如何为Next.js的GoogleMapsEmbed组件自定义地图样式？

你遇到的样式无变化问题，核心是Google Maps Embed API的style参数语法与你使用的格式不匹配，另外mode="place"模式可能会限制样式的生效范围，以下是具体解决方法：

1. 纠正style参数的语法规则 #

Google Maps Embed API的style参数需遵循固定格式：

• 单个样式规则用竖线|分隔属性，格式为：feature:<特征名>|element:<元素名>|color:<十六进制颜色>
• 颜色值无需加0x前缀，直接写6位十六进制字符串（比如黑色是000000，深蓝色是0066cc）
• 多组样式规则用&分隔

你之前的写法style="feature:road|color:0x0000000"存在两个问题：

• 颜色值多了一位（应为6位，而非7位）
• 缺少element指定（需明确修改道路的具体元素，比如几何形状geometry）

2. 切换到支持完整样式的mode #

mode="place"是聚焦特定地点的视图，部分地图样式会被地点信息覆盖。建议先切换到mode="view"测试样式是否生效，后续再按需调整模式。

3. 正确代码示例 #

<GoogleMapsEmbed
  apiKey={googleMapsApiKey}
  height={500}
  zoom="17"
  width="100%"
  mode="view" // 切换到支持完整样式的视图模式
  center="指定经纬度或地址" // view模式需通过center或q定位
  // 示例：修改道路几何为黑色，水域几何为深蓝色
  style="feature:road|element:geometry|color:000000&feature:water|element:geometry|color:0066cc"
/>

4. 常用样式配置参考 #

• 修改道路标签颜色：feature:road|element:labels.text|color:ffffff
• 修改公园背景色：feature:park|element:geometry|color:7cb342
• 隐藏道路标签：feature:road|element:labels|visibility:off

注意事项 #

• 并非所有feature与element的组合都支持，可参考Google Maps官方的样式特征列表
• 若切回mode="place"，部分样式仍能生效，但地点标记的优先级会高于自定义样式

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