컨텍스트 위젯은 다른 Google 지도 콘텐츠를 지원하거나 보완하는 데 사용되는 시각적 컨테이너인 Google 지도 사전 공개 제품입니다. 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);