Vertex AI で Google マップを使用してグラウンディングする

このページでは、Vertex AI の Google マップによるグラウンディングが、地理空間コンテキストを提供することで生成 AI アプリケーションの強化にどのように役立つかについて説明します。

概要

Vertex AI の「Google マップによるグラウンディング」は、Gemini モデルを Google マップの地理空間データに接続するプレビュー サービスです。Google マップは、ビジネス、ランドマーク、スポットなど、数百万もの場所に関する情報にアクセスできます。このデータを使用すると、2 億 5, 000 万件以上の場所に関する情報にアクセスできます。この情報は、モデルのレスポンスのグラウンディングに使用できます。これにより、AI アプリケーションとエージェントはローカルデータと地理空間コンテキストを提供できます。

Google マップによるグラウンディングの用途

Google マップによるグラウンディングは、次のようなさまざまな用途で使用できます。

  • チャットベースのエージェント。
  • 場所情報の要約。
  • コンテンツの翻訳。
  • 「近くに公園はありますか?」など、近くの場所に関する質問に答えることができる会話型アシスタント。
  • 「徒歩圏内にある公園や家族向けのレストランについて詳しく教えてください」など、場所に関するパーソナライズされた説明。

この機能は、不動産、旅行、モビリティ、ソーシャル アプリケーションなどの業界で役立ちます。

Google マップによるグラウンディングに関するテクニカル サポートについては、maps-grounding-feedback-external@google.com までメールでお問い合わせください。

サポートされているモデル

このセクションでは、Google マップによるグラウンディングをサポートするモデルを示します。

Gemini モデルの詳細については、Gemini モデルをご覧ください。

Google マップによるグラウンディングを使用してモデルのレスポンスをグラウンディングする

このコードサンプルは、Google マップでグラウンディングを使用してモデルのレスポンスをグラウンディングする方法を示しています。

緯度と経度の座標を使用して、特定の地理的位置に合わせて検索結果をカスタマイズできます。詳細については、グラウンディング API をご覧ください。

コンソール

Vertex AI Studio で Google マップを使用してグラウンディングを使用する手順は次のとおりです。

  1. Google Cloud コンソールで、[Vertex AI Studio] ページに移動します。

    Vertex AI Studio に移動

  2. [自由形式] タブをクリックします。
  3. サイドパネルで [モデルの回答をグラウンディング] 切り替えボタンをクリックします。
  4. [カスタマイズ] をクリックし、Google マップをソースとして設定します。
  5. テキスト ボックスにプロンプトを入力し、[送信] をクリックします。

プロンプトのレスポンスが Google マップでグラウンディングされるようになりました。

REST

リクエストのデータを使用する前に、次のように置き換えます。

  • LOCATION: リクエストを処理するリージョン。
  • PROJECT_ID: 実際のプロジェクト ID
  • MODEL_ID: マルチモーダル モデルのモデル ID。
  • TEXT: プロンプトに含める指示のテキスト。
  • LATITUDE: 位置の緯度。たとえば、緯度 37.7749 はサンフランシスコを表します。緯度と経度の座標は、Google マップなどのサービスや他のジオコーディング ツールを使用して取得できます。
  • LONGITUDE: 位置の経度。たとえば、経度 -122.4194 はサンフランシスコを表します。

HTTP メソッドと URL:

POST https://LOCATION-aiplatform.googleapis.com/v1beta1/projects/PROJECT_ID/locations/LOCATION/publishers/google/models/MODEL_ID:generateContent

リクエストの本文(JSON):

{
  "contents": [{
    "role": "user",
    "parts": [{
      "text": "TEXT"
    }]
  }],
  "tools": [{
    "googleMaps": {}
  }],
  "toolConfig": {
    "retrievalConfig": {
      "latLng": {
        "latitude": LATITUDE,
        "longitude": LONGITUDE
      }
    }
  },
  "model": "projects/PROJECT_ID/locations/LOCATION/publishers/google/models/MODEL_ID"
}

リクエストを送信するには、次のいずれかのオプションを展開します。

次のような JSON レスポンスが返されます。

{
  "candidates": [
    {
      "content": {
        "role": "model",
        "parts": [
          {
            "text": "\"The Italian Place\" in Alexandria, VA, is good for children and offers takeout. It has a rating of 4.2 stars based on 411 reviews."
          }
        ]
      },
      "finishReason": "STOP",
      "groundingMetadata": {
        "groundingChunks": [
          {
            "maps": {
              "uri": "https://maps.google.com/?cid=9001322937822692826",
              "title": "The Italian Place",
              "text": "**About:**\n\n* **Type:** Italian Restaurant\n* **Address:** 621 Wythe St, Alexandria, VA 22314, USA\n* **Open Now:** Yes\n* **Rating:** 4.2 (411 reviews)\n* **Price Level:** Moderate\n* **Phone:** (571) 777-8981\n* **Summary:** Down-to-earth, counter-serve stop offering Italian sandwiches, coffee & market goods.\n* **Additional Summary:** Relaxed Italian eatery known for sandwiches and pizza along with gourmet food items and gelato.\n* **Offers Takeout:** Yes\n* **Offers Delivery:** Yes\n* **Offers Dine-in:** Yes\n* **Good for Children:** Yes\n* **Has Restroom:** Yes\n* **Outdoor Seating:** Yes\n* **Live Music:** No\n* **Menu for Children:** No\n* **Serves Dessert:** Yes\n* **Serves Coffee:** Yes\n* **Good for Watching Sports:** No\n* **Serves Lunch:** Yes\n* **Serves Dinner:** Yes\n* **Serves Beer:** Yes\n* **Serves Vegetarian Food:** Yes\n\n**Opening Hours (local time):**\n\n* Monday: 11:00 AM – 7:00 PM\n* Tuesday: 10:00 AM – 7:00 PM\n* Wednesday: 11:00 AM – 7:00 PM\n* Thursday: 11:00 AM – 7:00 PM\n* Friday: 11:00 AM – 7:00 PM\n* Saturday: 11:00 AM – 7:00 PM\n* Sunday: 12:00 – 7:00 PM\n\n**Parking options:**\n\n* **Free parking lot:** Yes\n* **Free street parking:** Yes\n* **Valet parking:** No\n\n**Accessibility:**\n\n* **Wheelchair accessible parking:** Yes\n* **Wheelchair accessible restroom:** Yes\n\n**Payment options:**\n\n* **Credit Card:** Yes\n* **Debit Card:** Yes\n* **Cash Only:** No\n* **NFC:** Yes\n\n**Distance & Travel Time:**\n\n* 384.6 kilometers\n* 4.2 hours",
              "placeId": "places/ChIJOTRDf_qwt4kR2kV_WYUf63w"
            }
          },
          ...
        ],
        "groundingSupports": [
          {
            "segment": {
              "endIndex": 79,
              "text": "\"The Italian Place\" in Alexandria, VA, is good for children and offers takeout."
            },
            "groundingChunkIndices": [
              0
            ]
          },
          {
            "segment": {
              "startIndex": 80,
              "endIndex": 130,
              "text": "It has a rating of 4.2 stars based on 411 reviews."
            },
            "groundingChunkIndices": [
              0
            ]
          }
        ],
        "googleMapsWidgetContextToken": "widgetcontent/..."
      }
    }
  ],
  ...
}

省略可: Google マップ コンテキスト ウィジェット

コンテキスト ウィジェットは、他の Google マップ コンテンツをサポートまたは補完するために使用されるビジュアル コンテナである Google マップの Pre-GA サービスです。Google マップのコンテキスト ウィジェットを使用すると、Google マップのグラウンディングをアプリケーションに統合して、会話型 LLM を活用したチャット エクスペリエンスを作成できます。コンテキスト ウィジェットは、Vertex AI API レスポンスで返されるコンテキスト トークン googleMapsWidgetContextToken を使用してレンダリングされます。このトークンは、ビジュアル コンテンツのレンダリングに使用できます。

コンテキスト ウィジェットは、シナリオに応じてさまざまな機能を果たします。

  • Google マップのプロンプトが回答の生成に使用されるシナリオで、主観的なユーザー作成コンテンツ(UGC)が表示されます。

  • Vertex AI がテキスト レスポンスのみを生成した場合に、地図の可視化とデータで結果を充実させるのに役立ちます。

コンテキスト ウィジェットについて詳しくは、マップ グラウンディング ウィジェットをご覧ください。

Google マップ コンテキスト ウィジェットをレンダリングする

Google マップのコンテキスト ウィジェットをレンダリングして使用するには、ウィジェットを表示するページで Google Maps JavaScript API のアルファ版を使用します。詳しくは、Maps JavaScript API を読み込むをご覧ください。

次のコードサンプルは、コンテキスト ウィジェットの使用方法を示しています。

HTML

  1. コンテキスト ウィジェットを作成します。

      <body>
        <gmp-place-contextual id="widget"></gmp-place-contextual>
      </body>
    
  2. Google マップに基づく回答には、対応する googleMapsWidgetContextToken があります。これは、コンテキスト ウィジェットをレンダリングするために使用され、生成された回答の近くに配置されます。

    コンテキスト トークンを更新するには、widget.contextToken property を設定します。

    "googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>...
    Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",
    
    function updateWidget(contextToken) {
      let widget = document.querySelector('#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 ロードマップ マップ: map-mode="roadmap"
    • 3D ハイブリッド地図: map-mode="hybrid"
    • 地図なし: map-mode="none"

    このコードサンプルは、地図モードを 2D 地図に変更する方法を示しています。

        <gmp-place-contextual id="widget">
          <gmp-place-contextual-list-config map-mode="roadmap">
          </gmp-place-contextual-list-config>
        </gmp-place-contextual>
    

JavaScript

  1. コンテキスト ウィジェットを作成します。

    async function createWidget(contextToken) {
      await google.maps.importLibrary('places');
      let widgetContainer = document.querySelector('#wc');  // a div that contains the widget
      const placeContextualElement = new
          google.maps.places.PlaceContextualElement({ contextToken });
      widgetContainer.appendChild(placeContextualElement);
    }
    
  2. Google マップに基づく回答には、対応する googleMapsWidgetContextToken があります。これは、コンテキスト ウィジェットをレンダリングするために使用され、生成された回答の近くに配置されます。

    コンテキスト トークンを更新するには、widget.contextToken プロパティを設定します。

      "googleMapsWidgetContextToken": "widgetcontent/AcBXPQdpWQWbap9H-OH8sEKmOXxmEKAYvff0tvthhneMQC3VrqWCjpnPBl4-Id98FGiA_S_t8aeAeJj0T6JkWFX56Bil8oBSR0W8JH3C_RSYLbTjxKdpxc9yNn6JcZTtolIRZon9xi6WpNGuSyjcIxWu2S0hwpasNOpUlWrG1RxVCB4WD1fsz_pwR236mG36lMxevXTQ_JnfdYNuQwQ4Lc3vn...<snip>...
      Ts5VJE_b3IC5eE_6wez0nh61r7foTUZpP7BXMwxR-7Wyfcj6x1v6mIWsFGr1o0p_HSAMNqWPg-aFVnkPLhAkOR6MaNZOfezTva-gxHlu7z_haFvYxcUE1qfNVQ",
    
      function updateWidget(contextToken) {
        widget.contextToken = contextToken;
      }
    
  3. 省略可: リストのレイアウトを指定します。有効な値は次のとおりです。

    • コンパクト レイアウト: layout: google.maps.places.PlaceContextualListLayout.COMPACT
    • 縦型レイアウト: layout: google.maps.places.PlaceContextualListLayout.VERTICAL

    このコードサンプルは、リスト レイアウトをコンパクト レイアウトに変更する方法を示しています。

      const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({
        layout: google.maps.places.PlaceContextualListLayout.COMPACT
      });
      widget.appendChild(widgetConfig);
    
  4. 省略可: 地図モードを変更します。有効な値は次のとおりです。

    • 2D ロードマップ マップ: mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP
    • 3D ハイブリッド地図: mapMode: google.maps.places.PlaceContextualListMapMode.HYBRID
    • 地図なし: mapMode: google.maps.places.PlaceContextualListMapMode.NONE

    このコードサンプルは、地図モードを 2D 地図に変更する方法を示しています。

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

ソースの帰属表示の要件

Vertex AI で生成されたコンテンツで、Google マップによるグラウンディングを使用して利用可能になった情報を直接参照する場合は、回答のサポートに使用された Google マップのソースを指定する必要があります。

この画像は、モデルのレスポンスをサポートするために使用された Google マップのソースを示しています。

ソースが表示された回答を含むプロンプト

グラウンディング ソースの使用についてエンドユーザーに通知する

ユーザーに以下の情報を通知する必要があります。

  • LLM で生成されたコンテンツをサポートするために使用されたグラウンディング ソース。コンテンツの近くに表示されます。
  • グラウンディング ソースは、1 回のユーザー操作で表示できる必要があります。

Google マップのソース URL を表示する

Google マップのソースは、groundingChunksgroundingSupportsgroundingMetadata 内で返されます。Google マップのソースは、場所と、回答の生成に使用されたユーザー レビューなどの場所の回答コンテンツの両方に対して返されます。

このコードサンプルは、レスポンス内の Place ソースと Place 回答ソースを示しています。

  "groundingChunks": [
            {
              "maps": {
                "uri": "{Link to Maps Content}",
                "title": "{Name of Maps Place}",
                "text": "{Maps content that was sent to the model for this place}"
                "placeId": "{Place ID}",
                "placeAnswerSources":
                                  {
                    "review": "",
                    "authorAttribution": {
                      "displayName": "",
                      "photoUri": ""
                    },
                    "flagContentUri": "",
                    "googleMapsUri": ""
                  },
              },
               "flagContentUri": ""
              }
            }
          }
        ],

LLM によって参照される各ソースについて、次の要件に沿ってリンクのプレビューを生成する必要があります。

  • テキストの帰属表示のガイドラインに沿って、各ソースを Google マップに帰属表示します。
  • Open Graph のページタイトル(og:title)または
    形式のタイトルを表示します。

    [Place Name] - Google Maps

  • ソース URL を使用してソースマテリアルに移動します。

groundingChunks に場所に関する回答のソースがある場合は、次の操作を行う必要があります。

  • grounding_chunks.maps.placeAnswerSources.reviewSnippets.googleMapsUri 内にレビュー リンクを表示します。
  • Open Graph タイトルまたは
    形式のタイトルを表示します。

    Google Review of [Place Name] by [Author Name]

    Place Namegrounding_chunks.maps.title にあり、Author Namegrounding_chunks.maps.placeAnswerSources.reviewSnippets.authorAttribution.displayName にあります。
  • 省略可: 次のような追加コンテンツを使用して、リンクのプレビューを強化します。

    • Google マップのテキストによる帰属表示の前に挿入された Google マップのファビコン(<link rel="icon" href="https://www.google.com/favicon.ico">)。
    • 説明(og:description
    • 写真(og:image

これらの画像は、プレイスリンクを表示するための最小要件を示しています。

ソースが表示された回答を含むプロンプト

[ソース] のビューは折りたたむことができます。

プロンプトと回答、情報源が折りたたまれた状態

この画像は、場所の写真を示しています。これは、ソースの属性をプレビューするためのオプションのリンクです。

回答と情報源を含むプロンプト

禁止地域

Google マップでは、安全で信頼性の高いプラットフォームを維持するために、特定のコンテンツとアクティビティを制限しています。禁止されている地域の一覧については、Google Maps Platform で禁止されている地域をご覧ください。

場所のプロパティ

このセクションでは、場所の説明に使用され、Google マップのグラウンディングでレスポンスの生成に使用される場所のプロパティを一覧表示します。これらのプロパティは、Google マップによるグラウンディングで回答できる質問のタイプを特定するために使用されます。

場所のプロパティの例

このリストは、モデルがレスポンスの生成に使用できる場所に関するプロパティのアルファベット順のサンプルです。

  • 住所
  • ピックアップ
  • デビットカード
  • 距離
  • 無料駐車場
  • 生演奏が楽しめるお店
  • 子ども向けメニュー
  • 営業時間
  • お支払い方法(現金クレジット カードなど)
  • 場所に関する回答
  • ペット可
  • ビールを出すお店
  • ベジタリアン料理あり
  • 車椅子対応
  • Wi-Fi

場所の回答は、ユーザーのクチコミから得られた情報に基づいて、Google マップによるグラウンディングから得られた回答です。メタデータで提供されたプレイスの回答の内容に問題がある場合は、API レスポンスの PlaceAnswerSources オブジェクト内の flagContentUri フィールドにあるリンクを使用して、Google に報告できます。

プレイス プロパティの使用例

次の例では、さまざまな種類の場所に関する質問で場所のプロパティを使用しています。Google マップでのグラウンディングでは、プロパティを使用してユーザーの意図を理解し、Google マップの場所に関連付けられたデータに基づいて関連する回答を提供します。

  • 家族での夕食を計画する: 「イタリアン プレイスは子供連れでも大丈夫ですか?テイクアウトはできますか?」と質問します。評価はどのくらいですか?

    これらの質問への回答は、レストランが家族連れに適しているかどうか、便利なサービスを提供しているかどうかを判断するのに役立ちます。

  • 友人のためにアクセシビリティを確認する: 「車椅子対応の入り口があるレストランを探して」と尋ねることもできます。

    このプロンプトに対する回答は、特定のアクセシビリティ要件を満たしているかどうかを判断するのに役立ちます。

  • 夜食を食べられる場所を探す: 「バーガー ジョイントは今営業していますか?」と尋ねます。ディナーは提供していますか?金曜日の営業時間は何時から何時までですか?

    これらの質問への回答は、特定の時間に特定の食事を提供している営業中の店舗を見つけるのに役立ちます。

  • クライアントとコーヒーを飲む: 「カフェ セントラルに Wi-Fi はありますか?」と尋ねるかもしれません。コーヒーはありますか?価格帯とクレジットカードの利用可否を教えてください。

    これらの質問への回答は、アメニティ、提供内容、支払いオプションに基づいて、ビジネス会議に適したカフェを評価するのに役立ちます。

次のステップ