如何为嵌入的Google Maps设置标题及嵌入指定街景

一、解决Google Maps嵌入显示"untitled"的问题 #

你遇到的"untitled"是Google Maps嵌入页面的内部标题，直接给iframe加title属性仅影响辅助技术识别，不会替换页面显示的标题。可行解决方式有两种：

1. 外层容器添加自定义标题（快速方案） #

在iframe外层div添加可见标题，覆盖视觉上的"untitled"，配合CSS隐藏Google默认标题：

<div class="google-maps">
  <h3 class="map-title">唐宁街10号入口大厅</h3>
  <iframe src="https://www.google.com/maps/embed?pb=!4v1699102345389!6m8!1m7!1sGgTmBPHhKtgAAAQ0MEzJZQ!2m2!1d51.50336287082302!2d-0.1275790069079221!3f336.56!4f-8.700000000000003!5f0.7820865974627469" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
</div>

.google-maps {
  position: relative;
}
.map-title {
  position: absolute;
  top: 10px;
  left: 10px;
  background: white;
  padding: 5px 10px;
  z-index: 10;
  margin: 0;
  font-size: 14px;
}
.google-maps iframe {
  /* 你的原有宽高样式 */
}

2. 使用Google Maps JavaScript API（自定义程度更高） #

通过API直接渲染街景，完全控制标题与界面：

<div id="street-view" style="width: 600px; height: 400px;"></div>
<script>
  function initStreetView() {
    const panorama = new google.maps.StreetViewPanorama(
      document.getElementById("street-view"),
      {
        position: {lat: 51.503363, lng: -0.127579},
        pano: "GgTmBPHhKtgAAAQ0MEzJZQ", // 从嵌入URL提取的街景ID
        pov: {
          heading: 336.56,
          pitch: -8.7
        },
        zoom: 0.33
      }
    );
    // 设置辅助技术识别的标题
    document.getElementById("street-view").setAttribute("aria-label", "唐宁街10号入口大厅");
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initStreetView"></script>

这种方式可完全去除Google默认的"untitled"标题，同时自定义街景视角、缩放等参数。

二、嵌入Google艺术与文化街景的可行方案 #

Google艺术与文化街景无法直接iframe嵌入，但可提取核心参数，用Google Maps JavaScript API渲染：

1. 提取关键参数：从你提供的艺术与文化链接中，提取以下值：

   • 经纬度：51.503360/-0.127580
   • 街景ID（sv_pid）：HMzgivzbj30AAAQ0MExxLg
   • 朝向（sv_h）：-39.31
   • 俯仰角（sv_p）：-6.86
   • 缩放（sv_z）：0.33

2. 用API渲染街景：

<div class="street-view-container">
  <h3>唐宁街10号入口大厅（艺术与文化街景）</h3>
  <div id="arts-street-view" style="width: 600px; height: 400px;"></div>
</div>
<script>
  function initArtsStreetView() {
    const panorama = new google.maps.StreetViewPanorama(
      document.getElementById("arts-street-view"),
      {
        position: {lat: 51.503360, lng: -0.127580},
        pano: "HMzgivzbj30AAAQ0MExxLg",
        pov: {
          heading: -39.31,
          pitch: -6.86
        },
        zoom: 0.33,
        disableDefaultUI: true // 可选：隐藏Google默认UI，贴合艺术与文化风格
      }
    );
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initArtsStreetView"></script>

3. 批量嵌入优化：若需嵌入大量街景，可将参数封装为数组循环渲染：

<div id="street-view-grid"></div>
<script>
  const streetViewLocations = [
    {
      title: "唐宁街10号入口大厅",
      lat: 51.503360,
      lng: -0.127580,
      pano: "HMzgivzbj30AAAQ0MExxLg",
      heading: -39.31,
      pitch: -6.86,
      zoom: 0.33
    },
    // 更多街景参数...
  ];

  function initAllStreetViews() {
    const gridContainer = document.getElementById("street-view-grid");
    streetViewLocations.forEach((loc, index) => {
      const container = document.createElement("div");
      container.className = "street-view-item";
      container.innerHTML = `<h3>${loc.title}</h3><div id="view-${index}" style="width: 400px; height: 300px;"></div>`;
      gridContainer.appendChild(container);

      new google.maps.StreetViewPanorama(
        document.getElementById(`view-${index}`),
        {
          position: {lat: loc.lat, lng: loc.lng},
          pano: loc.pano,
          pov: {heading: loc.heading, pitch: loc.pitch},
          zoom: loc.zoom
        }
      );
    });
  }
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=你的API密钥&callback=initAllStreetViews"></script>

注意事项 #

• 使用Google Maps JavaScript API需申请API密钥，并启用"Maps JavaScript API"服务。
• 批量嵌入时建议对非可视区域街景使用懒加载，优化页面加载性能。

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