Google My Maps内嵌自定义地图#featurecardPanel样式修改求助

方案1：用MutationObserver监听动态元素并修改样式 #

你之前的JS代码无效，大概率是执行代码时#featurecardPanel还没被Google脚本创建，或是后续被Google默认样式覆盖了。可以通过DOM监听确保元素出现后再修改样式：

// 替换成你的地图容器选择器，比如包裹iframe的div或iframe本身
const mapWrapper = document.querySelector('#your-map-container');

const observer = new MutationObserver((mutations) => {
  mutations.forEach(() => {
    const featureCard = document.querySelector('#featurecardPanel');
    if (featureCard) {
      // 用setProperty设置带!important的样式，确保优先级高于Google默认样式
      featureCard.style.setProperty('padding-top', '66px', 'important');
      // 调整position避免被容器截断
      featureCard.style.position = 'relative';
      featureCard.style.top = '66px';
      // 找到元素后停止监听，避免重复触发
      observer.disconnect();
    }
  });
});

// 监听容器内的子元素变化（包括深层子元素）
observer.observe(mapWrapper, { childList: true, subtree: true });

方案2：用clip-path替换overflow:hidden（纯CSS简洁方案） #

既然overflow:hidden会截断面板，不如用clip-path裁剪顶部黑带，保留容器的overflow:visible，让弹出面板正常显示：

#your-map-container {
  /* 顶部裁剪66px（数值根据黑带高度调整），直接去掉黑带 */
  clip-path: inset(66px 0 0 0);
  /* 保留你之前的上移样式 */
  position: relative;
  top: -66px;
  /* 移除overflow:hidden */
  overflow: visible;
}

补充技巧 #

如果方案1的样式仍被覆盖，可以尝试调整面板的外边距或层级：

featureCard.style.marginTop = '66px';
featureCard.style.zIndex = '9999';

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