地圖基礎小工具

情境小工具是 Google 地圖正式發布前產品，屬於視覺容器，用於支援或補充其他 Google 地圖內容。Google 地圖情境小工具可讓您將 Grounding with Google 地圖整合至應用程式，打造以對話式大型語言模型為基礎的即時通訊體驗。情境小工具是使用情境符記 googleMapsWidgetContextToken 轉譯，該符記會顯示在 Vertex AI API 回應中，可用於轉譯視覺內容。

情境小工具會根據不同情境提供不同功能：

  • 在 Google 地圖提示用於生成答案的情況下，這項功能會顯示主觀的使用者原創內容 (UGC)。
  • 當 Vertex AI 只生成文字回覆時，這項功能有助於以地圖視覺化效果和資料豐富結果。

內容相關小工具的運作方式

情境小工具會以 googleMapsWidgetContextToken 形式，顯示 Vertex AI「利用 Google 地圖建立基準」功能的回覆。使用這個權杖算繪情境小工具，並顯示回覆。 瞭解詳情。事件流程如下：

  1. 呼叫 Vertex AI API，並使用 Google 地圖建立基準。
  2. Vertex AI 會傳回 googleMapsWidgetContextToken。
  3. 使用權杖算繪內容比對小工具。
  4. 情境小工具會顯示 Vertex AI 的回覆。

以下範例顯示 Vertex AI API 傳回的脈絡權杖。

"googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>...
Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",

算繪 Google 地圖情境小工具

如要算繪及使用 Google 地圖情境小工具，請在顯示小工具的頁面上使用 Alpha 版的 Maps JavaScript API。詳情請參閱「載入 Maps JavaScript API」。您也必須使用已啟用來載入 Google Maps JavaScript API 的 API 金鑰。確認 places 程式庫已載入。

下一節說明如何算繪 Google 地圖情境小工具。使用自訂 HTML 或 JavaScript 建立內容相關小工具。

使用自訂 HTML 元素

下一節說明如何使用自訂 HTML 元素，算繪 Google 地圖情境小工具。在網頁中加入 gmp-place-contextual 元素，即可建立內容相關小工具。

  1. 在網頁中新增 gmp-place-contextual 元素：

    <gmp-place-contextual id="widget"></gmp-place-contextual>

  2. 在任何以 Google 地圖為基礎的回覆中，都有對應的 googleMapsWidgetContextToken，可用於算繪情境小工具。下列函式說明如何更新內容權杖： 

    let widget = document.querySelector('#widget'); // a div that contains the widget
widget.contextToken = contextToken;
  3. 選用：指定清單版面配置。有效值包括：
    • 精簡版面配置：<gmp-place-contextual-list-config layout="compact">
    • 垂直版面配置：<gmp-place-contextual-list-config layout="vertical">

    以下範例說明如何將清單版面配置變更為精簡模式：

    <gmp-place-contextual id="widget">
  <gmp-place-contextual-list-config layout="compact">
  </gmp-place-contextual-list-config>
</gmp-place-contextual>
  4. 選用：變更地圖模式。有效值包括：
    • 2D 道路圖地圖：<gmp-place-contextual-map-config map-mode="roadmap">
    • 3D 混合地圖：<gmp-place-contextual-map-config map-mode="hybrid">
    • 沒有地圖：<gmp-place-contextual-map-config map-mode="none">
    5. 以下範例說明如何將地圖模式變更為 2D 地圖：
    <gmp-place-contextual id="widget">
  <gmp-place-contextual-map-config map-mode="roadmap">
  </gmp-place-contextual-map-config>
</gmp-place-contextual>

使用 JavaScript

下一節說明如何以程式輔助方式建立 PlaceContextualElement，並將其附加至 DOM，進而算繪 Google 地圖情境小工具。

  1. 建立情境小工具。

    let widget = document.querySelector('#widget');  // a div that contains the widget

async function createWidget(contextToken) {
  await google.maps.importLibrary('places');
  const placeContextualElement = new
      google.maps.places.PlaceContextualElement({ contextToken }); // contextToken can be empty at initialization.
  widget.appendChild(placeContextualElement);
}
  2. 在任何以 Google 地圖為基礎的回覆中，都會有對應的 googleMapsWidgetContextToken，用於算繪情境小工具。下列函式說明如何更新情境權杖：
    widget.contextToken = contextToken;
  3. 選用：指定清單版面配置。有效值包括：
    • 精簡版面配置：google.maps.places.PlaceContextualListLayout.COMPACT
    • 垂直版面配置：google.maps.places.PlaceContextualListLayout.VERTICAL

    4. 以下範例說明如何將清單版面配置變更為精簡模式：

    const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  layout: google.maps.places.PlaceContextualListLayout.COMPACT
});
widget.appendChild(widgetConfig);
  4. 選用：變更地圖模式。有效值包括：
    • 2D 道路圖地圖：google.maps.places.PlaceContextualListMapMode.ROADMAP
    • 3D 混合地圖：google.maps.places.PlaceContextualListMapMode.HYBRID
    • 沒有地圖：google.maps.places.PlaceContextualListMapMode.NONE

    5. 以下範例說明如何將地圖模式變更為 2D 地圖：

    const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
  mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP
});
widget.appendChild(widgetConfig);

禁止的地域

為確保 Google 地圖安全可靠，我們對特定內容和活動設有限制。如需禁止地區清單，請參閱「Google 地圖平台禁止地區」。