コンテキスト ウィジェットは、他の Google マップ コンテンツをサポートまたは補完するために使用されるビジュアル コンテナである Google マップの Pre-GA サービスです。Google マップのコンテキスト ウィジェットを使用すると、グラウンディングと Google マップをアプリケーションに統合して、会話型 LLM を活用したチャット エクスペリエンスを作成できます。コンテキスト ウィジェットは、Vertex AI API レスポンスで返されるコンテキスト トークン googleMapsWidgetContextToken を使用してレンダリングされます。このトークンは、ビジュアル コンテンツのレンダリングに使用できます。
コンテキスト ウィジェットは、シナリオに応じてさまざまな機能を果たします。
- Google マップのプロンプトが回答の生成に使用されるシナリオで、主観的なユーザー作成コンテンツ（UGC）が表示されます。
- Vertex AI がテキスト レスポンスのみを生成した場合に、地図の可視化とデータで結果を充実させるのに役立ちます。
コンテキスト ウィジェットの仕組み
コンテキスト ウィジェットには、Vertex AI の「Google マップによるグラウンディング」からのレスポンスが googleMapsWidgetContextToken の形式で表示されます。このトークンを使用して、コンテキスト ウィジェットをレンダリングし、レスポンスを表示します。詳細。イベント フローは次のとおりです。
- Google マップでグラウンディングされたクエリを使用して Vertex AI API を呼び出します。
- Vertex AI は
googleMapsWidgetContextTokenを返します。 - トークンを使用してコンテキスト ウィジェットをレンダリングします。
- コンテキスト ウィジェットに 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 マップのコンテキスト ウィジェットをレンダリングして使用するには、ウィジェットを表示するページで Maps JavaScript API のアルファ版を使用します。詳しくは、Maps JavaScript API を読み込むをご覧ください。また、Google Maps JavaScript API を読み込むために有効にした API キーを使用する必要があります。places ライブラリが読み込まれていることを確認します。
次のセクションでは、Google マップのコンテキスト ウィジェットをレンダリングする方法について説明します。カスタム HTML または JavaScript を使用してコンテキスト ウィジェットを作成します。
カスタム HTML 要素を使用する
次のセクションでは、カスタム HTML 要素を使用して Google マップのコンテキスト ウィジェットをレンダリングする方法について説明します。gmp-place-contextual 要素をページに追加して、コンテキスト ウィジェットを作成します。
-
gmp-place-contextual要素をページに追加します。<gmp-place-contextual id="widget"></gmp-place-contextual>
-
Google マップに基づくレスポンスには、コンテキスト ウィジェットのレンダリングに使用できる対応する
googleMapsWidgetContextTokenがあります。次の関数は、コンテキスト トークンを更新する方法を示しています。let widget = document.querySelector('#widget'); // a div that contains the widget widget.contextToken = contextToken;
-
省略可: リストのレイアウトを指定します。有効な値は次のとおりです。
- コンパクト レイアウト:
<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>
- コンパクト レイアウト:
-
省略可: 地図モードを変更します。有効な値は次のとおりです。
- 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">
次の例は、地図モードを 2D 地図に変更する方法を示しています。 - 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 マップのコンテキスト ウィジェットをレンダリングする方法について説明します。
コンテキスト ウィジェットを作成します。
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); }
- Google マップに基づく回答には、コンテキスト ウィジェットのレンダリングに使用される対応する
googleMapsWidgetContextTokenがあります。次の関数は、コンテキスト トークンを更新する方法を示しています。widget.contextToken = contextToken;
-
省略可: リストのレイアウトを指定します。有効な値は次のとおりです。
- コンパクト レイアウト:
google.maps.places.PlaceContextualListLayout.COMPACT - 縦型レイアウト:
google.maps.places.PlaceContextualListLayout.VERTICAL
- コンパクト レイアウト:
-
省略可: 地図モードを変更します。有効な値は次のとおりです。
- 2D ロードマップ地図:
google.maps.places.PlaceContextualListMapMode.ROADMAP - 3D ハイブリッド地図:
google.maps.places.PlaceContextualListMapMode.HYBRID - 地図なし:
google.maps.places.PlaceContextualListMapMode.NONE
- 2D ロードマップ地図:
次の例は、リスト レイアウトをコンパクトに変更する方法を示しています。
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ layout: google.maps.places.PlaceContextualListLayout.COMPACT }); widget.appendChild(widgetConfig);
次の例は、地図モードを 2D 地図に変更する方法を示しています。
const widgetConfig = new google.maps.places.PlaceContextualListConfigElement({ mapMode: google.maps.places.PlaceContextualListMapMode.ROADMAP }); widget.appendChild(widgetConfig);