Google Map InfoWindow headerContent HTML内容无法渲染，显示为纯文本问题求助

我刚帮你排查了这个问题，其实核心原因是Google Maps InfoWindow的headerContent参数对字符串类型的处理和你理解的不一样——官方文档里说的「支持HTML元素」是指传入实际的DOM Element对象，而不是HTML格式的字符串。当你传字符串时，它会自动转义所有HTML标签，所以才会显示成纯文本。

下面给你两种可行的解决方案：

方案1：传入DOM Element对象（官方文档真正支持的方式） #

不要直接传HTML字符串，而是手动创建一个DOM元素，设置好样式和内容后再传给headerContent：

// 创建一个自定义的标题元素
const headerElement = document.createElement('div');
// 设置样式
headerElement.style.color = '#ff0000';
headerElement.style.fontWeight = 'bold';
headerElement.style.fontSize = '16px';
// 设置内容（支持innerHTML插入复杂HTML）
headerElement.innerHTML = '<strong>Hello</strong> <em>World!</em>';

// 初始化InfoWindow时传入这个元素
const infoWindow = new google.maps.InfoWindow({
  headerContent: headerElement,
  content: '这是InfoWindow的正文内容'
});

把这段代码替换你在官方示例中添加的headerContent字符串，就能看到标题正确渲染成带样式的HTML内容了。

方案2：放弃headerContent，直接自定义content的完整HTML结构 #

如果你觉得创建DOM元素太麻烦，也可以完全不用headerContent，把标题和正文整合到content参数里，自己写完整的HTML结构，这样能更灵活地控制整体样式：

const infoWindow = new google.maps.InfoWindow({
  content: `
    <div class="info-window-header" style="color:#ff0000; font-weight:bold; margin-bottom:8px;">
      Hello World!
    </div>
    <div class="info-window-body">
      这是InfoWindow的正文内容，你可以添加任意HTML元素
    </div>
  `
});

这种方式不需要依赖headerContent的特殊处理，所有HTML都会被正常解析。

补充说明 #

官方文档里的headerContent参数类型标注为string|Element|Text，但字符串类型的输入会被当作纯文本转义，只有Element/Text类型的输入才会被当作DOM节点插入到InfoWindow中，这是文档表述容易产生误解的地方。

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