Google은 AI 기술을 사용하여 콘텐츠를 사용자의 기본 언어로 번역합니다. AI 번역에는 오류가 있을 수 있습니다.

AI 기반 요약

샘플 소스 코드 전체 보기

장소를 검색하여 AI 기반 요약을 확인하세요. 추천 검색어:

주변 요약의 경우 '호텔'
EVCS 편의시설 요약의 경우 '전기자동차 충전소'
장소 및 리뷰 요약이 있는 음식점 또는 비즈니스

TypeScript

// Define DOM elements.
const mapElement = document.querySelector('gmp-map')!;
const placeAutocomplete = document.querySelector('gmp-place-autocomplete')!;
const summaryPanel = document.getElementById('summary-panel')!;
const placeName = document.getElementById('place-name')!;
const placeAddress = document.getElementById('place-address')!;
const tabContainer = document.getElementById('tab-container')!;
const summaryContent = document.getElementById('summary-content')!;
const aiDisclosure = document.getElementById('ai-disclosure')!;
const flagContentLink = document.getElementById(
    'flag-content-link'
) as HTMLAnchorElement;

let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;

async function init(): Promise<void> {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
    });

    // Bind autocomplete bounds to map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds()!;
    });

    // Create the marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    // Handle selection of an autocomplete result.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();

            // Fetch all summary fields.
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'generativeSummary',
                    'neighborhoodSummary',
                    'reviewSummary',
                    'evChargeAmenitySummary',
                ],
            });

            // Update the map viewport and position the marker.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location!);
                innerMap.setZoom(17);
            }
            marker.position = place.location;

            // Update the panel UI.
            updateSummaryPanel(place);
        }
    );
}

function updateSummaryPanel(place: google.maps.places.Place) {
    // Reset UI
    summaryPanel.classList.remove('hidden');
    tabContainer.innerHTML = ''; // innerHTML is OK here since we're clearing known child elements.
    summaryContent.textContent = '';
    aiDisclosure.textContent = '';

    placeName.textContent = place.displayName || '';
    placeAddress.textContent = place.formattedAddress || '';

    let firstTabActivated = false;

    /**
     * Safe Helper: Accepts either a text string or a DOM Node (like a div or DocumentFragment).
     */
    const createTab = (
        label: string,
        content: string | Node,
        disclosure: string | null,
        flagUrl: string | null
    ) => {
        const btn = document.createElement('button');
        btn.className = 'tab-button';
        btn.textContent = label;

        btn.onclick = () => {
            // Do nothing if the tab is already active.
            if (btn.classList.contains('active')) {
                return;
            }

            // Manage the active class state.
            document.querySelectorAll('.tab-button').forEach((b) => {
                b.classList.remove('active');
            });
            btn.classList.add('active');

            if (typeof content === 'string') {
                summaryContent.textContent = content;
            } else {
                summaryContent.replaceChildren(content.cloneNode(true));
            }

            // Set the disclosure text.
            aiDisclosure.textContent = disclosure || 'AI-generated content.';

            // Add the content flag URI.
            if (flagUrl) {
                flagContentLink.href = flagUrl;
                flagContentLink.textContent = 'Report an issue';
            }
        };

        tabContainer.appendChild(btn);

        // Auto-select the first available summary.
        if (!firstTabActivated) {
            btn.click();
            firstTabActivated = true;
        }
    };

    // --- 1. Generative Summary (Place) ---
    if (place.generativeSummary?.overview) {
        createTab(
            'Overview',
            place.generativeSummary.overview,
            place.generativeSummary.disclosureText,
            place.generativeSummary.flagContentURI
        );
    }

    // --- 2. Review Summary ---
    if (place.reviewSummary?.text) {
        createTab(
            'Reviews',
            place.reviewSummary.text,
            place.reviewSummary.disclosureText,
            place.reviewSummary.flagContentURI
        );
    }

    // --- 3. Neighborhood Summary ---
    if (place.neighborhoodSummary?.overview?.content) {
        createTab(
            'Neighborhood',
            place.neighborhoodSummary.overview.content,
            place.neighborhoodSummary.disclosureText,
            place.neighborhoodSummary.flagContentURI
        );
    }

    // --- 4. EV Amenity Summary (uses content blocks)) ---
    if (place.evChargeAmenitySummary) {
        const evSummary = place.evChargeAmenitySummary;
        const evContainer = document.createDocumentFragment();

        // Helper to build a safe DOM section for EV categories.
        const createSection = (title: string, text: string) => {
            const wrapper = document.createElement('div');
            wrapper.style.marginBottom = '15px'; // Or use a CSS class

            const titleEl = document.createElement('strong');
            titleEl.textContent = title;

            const textEl = document.createElement('div');
            textEl.textContent = text;

            wrapper.appendChild(titleEl);
            wrapper.appendChild(textEl);
            return wrapper;
        };

        // Check and append each potential section
        if (evSummary.overview?.content) {
            evContainer.appendChild(
                createSection('Overview', evSummary.overview.content)
            );
        }
        if (evSummary.coffee?.content) {
            evContainer.appendChild(
                createSection('Coffee', evSummary.coffee.content)
            );
        }
        if (evSummary.restaurant?.content) {
            evContainer.appendChild(
                createSection('Food', evSummary.restaurant.content)
            );
        }
        if (evSummary.store?.content) {
            evContainer.appendChild(
                createSection('Shopping', evSummary.store.content)
            );
        }

        // Only add the tab if the container has children
        if (evContainer.hasChildNodes()) {
            createTab(
                'EV Amenities',
                evContainer, // Passing a Node instead of string
                evSummary.disclosureText,
                evSummary.flagContentURI
            );
        }
    }

    // Safely handle the empty state.
    if (!firstTabActivated) {
        const msg = document.createElement('em');
        msg.textContent =
            'No AI summaries are available for this specific location.';
        summaryContent.replaceChildren(msg);
        aiDisclosure.textContent = '';
    }
}

void init();index.ts

JavaScript

// Define DOM elements.
const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
const summaryPanel = document.getElementById('summary-panel');
const placeName = document.getElementById('place-name');
const placeAddress = document.getElementById('place-address');
const tabContainer = document.getElementById('tab-container');
const summaryContent = document.getElementById('summary-content');
const aiDisclosure = document.getElementById('ai-disclosure');
const flagContentLink = document.getElementById('flag-content-link');

let innerMap;
let marker;

async function init() {
    // Request needed libraries.
    const [{ AdvancedMarkerElement }] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
    });

    // Bind autocomplete bounds to map bounds.
    innerMap.addListener('bounds_changed', () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
    });

    // Handle selection of an autocomplete result.
    placeAutocomplete.addEventListener(
        'gmp-select',
        async ({ placePrediction }) => {
            const place = placePrediction.toPlace();

            // Fetch all summary fields.
            await place.fetchFields({
                fields: [
                    'displayName',
                    'formattedAddress',
                    'location',
                    'generativeSummary',
                    'neighborhoodSummary',
                    'reviewSummary',
                    'evChargeAmenitySummary',
                ],
            });

            // Update the map viewport and position the marker.
            if (place.viewport) {
                innerMap.fitBounds(place.viewport);
            } else {
                innerMap.setCenter(place.location);
                innerMap.setZoom(17);
            }
            marker.position = place.location;

            // Update the panel UI.
            updateSummaryPanel(place);
        }
    );
}

function updateSummaryPanel(place) {
    // Reset UI
    summaryPanel.classList.remove('hidden');
    tabContainer.innerHTML = ''; // innerHTML is OK here since we're clearing known child elements.
    summaryContent.textContent = '';
    aiDisclosure.textContent = '';

    placeName.textContent = place.displayName || '';
    placeAddress.textContent = place.formattedAddress || '';

    let firstTabActivated = false;

    /**
     * Safe Helper: Accepts either a text string or a DOM Node (like a div or DocumentFragment).
     */
    const createTab = (label, content, disclosure, flagUrl) => {
        const btn = document.createElement('button');
        btn.className = 'tab-button';
        btn.textContent = label;

        btn.onclick = () => {
            // Do nothing if the tab is already active.
            if (btn.classList.contains('active')) {
                return;
            }

            // Manage the active class state.
            document.querySelectorAll('.tab-button').forEach((b) => {
                b.classList.remove('active');
            });
            btn.classList.add('active');

            if (typeof content === 'string') {
                summaryContent.textContent = content;
            } else {
                summaryContent.replaceChildren(content.cloneNode(true));
            }

            // Set the disclosure text.
            aiDisclosure.textContent = disclosure || 'AI-generated content.';

            // Add the content flag URI.
            if (flagUrl) {
                flagContentLink.href = flagUrl;
                flagContentLink.textContent = 'Report an issue';
            }
        };

        tabContainer.appendChild(btn);

        // Auto-select the first available summary.
        if (!firstTabActivated) {
            btn.click();
            firstTabActivated = true;
        }
    };

    // --- 1. Generative Summary (Place) ---
    if (place.generativeSummary?.overview) {
        createTab(
            'Overview',
            place.generativeSummary.overview,
            place.generativeSummary.disclosureText,
            place.generativeSummary.flagContentURI
        );
    }

    // --- 2. Review Summary ---
    if (place.reviewSummary?.text) {
        createTab(
            'Reviews',
            place.reviewSummary.text,
            place.reviewSummary.disclosureText,
            place.reviewSummary.flagContentURI
        );
    }

    // --- 3. Neighborhood Summary ---
    if (place.neighborhoodSummary?.overview?.content) {
        createTab(
            'Neighborhood',
            place.neighborhoodSummary.overview.content,
            place.neighborhoodSummary.disclosureText,
            place.neighborhoodSummary.flagContentURI
        );
    }

    // --- 4. EV Amenity Summary (uses content blocks)) ---
    if (place.evChargeAmenitySummary) {
        const evSummary = place.evChargeAmenitySummary;
        const evContainer = document.createDocumentFragment();

        // Helper to build a safe DOM section for EV categories.
        const createSection = (title, text) => {
            const wrapper = document.createElement('div');
            wrapper.style.marginBottom = '15px'; // Or use a CSS class

            const titleEl = document.createElement('strong');
            titleEl.textContent = title;

            const textEl = document.createElement('div');
            textEl.textContent = text;

            wrapper.appendChild(titleEl);
            wrapper.appendChild(textEl);
            return wrapper;
        };

        // Check and append each potential section
        if (evSummary.overview?.content) {
            evContainer.appendChild(
                createSection('Overview', evSummary.overview.content)
            );
        }
        if (evSummary.coffee?.content) {
            evContainer.appendChild(
                createSection('Coffee', evSummary.coffee.content)
            );
        }
        if (evSummary.restaurant?.content) {
            evContainer.appendChild(
                createSection('Food', evSummary.restaurant.content)
            );
        }
        if (evSummary.store?.content) {
            evContainer.appendChild(
                createSection('Shopping', evSummary.store.content)
            );
        }

        // Only add the tab if the container has children
        if (evContainer.hasChildNodes()) {
            createTab(
                'EV Amenities',
                evContainer, // Passing a Node instead of string
                evSummary.disclosureText,
                evSummary.flagContentURI
            );
        }
    }

    // Safely handle the empty state.
    if (!firstTabActivated) {
        const msg = document.createElement('em');
        msg.textContent =
            'No AI summaries are available for this specific location.';
        summaryContent.replaceChildren(msg);
        aiDisclosure.textContent = '';
    }
}

void init();index.js

CSS

/* Reuse existing map height */
gmp-map {
    height: 100%;
}

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* Existing Autocomplete Card Style */
.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 2px;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
}

gmp-place-autocomplete {
    width: 330px;
}

/* New: Summary Panel Styles */
.summary-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 0; /* Padding handled by children */
    font-family: Roboto, sans-serif;
    width: 350px;
    max-height: 80vh; /* Prevent overflow on small screens */
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.hidden {
    display: none;
}

#place-header {
    padding: 15px;
    background-color: #f8f9fa;
    border-bottom: 1px solid #ddd;
}

#place-header h2 {
    margin: 0 0 5px 0;
    font-size: 1.2rem;
}

#place-address {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
}

/* Tab Navigation */
.tab-container {
    display: flex;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}

.tab-button {
    flex: 1;
    background: none;
    border: none;
    padding: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #555;
    border-bottom: 3px solid transparent;
}

.tab-button:hover {
    background-color: #f1f1f1;
}

.tab-button.active {
    font-weight: bold;
    border-bottom: 3px solid #000000;
}

.tab-button.active:hover {
    background-color: #ffffff;
    cursor: default;
}

/* Content Area */
.content-area {
    padding: 15px;
    line-height: 1.5;
    font-size: 0.95rem;
    color: #333;
}

.disclosure-footer {
    font-size: 0.75rem;
    color: #666;
    padding: 10px 15px;
    border-top: 1px solid #eee;
    font-style: italic;
}

.flag-content-link {
    font-size: 0.75rem;
    color: #666;
    padding: 10px 15px;
    border-top: 1px solid #eee;
}style.css

HTML

<html>
    <head>
        <title>AI Place Summaries</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="37.80, -122.425" zoom="14" map-id="DEMO_MAP_ID">
            <!-- Search Input Card -->
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <gmp-place-autocomplete
                    placeholder="Find places with AI summaries"></gmp-place-autocomplete>
            </div>

            <!-- Summary text panel (initially hidden) -->
            <div
                id="summary-panel"
                class="summary-card hidden"
                slot="control-inline-end-block-start">
                <div id="place-header">
                    <h2 id="place-name"></h2>
                    <p id="place-address"></p>
                </div>

                <!-- Tabs for toggling summary types -->
                <div class="tab-container" id="tab-container"></div>

                <!-- Content display area -->
                <div id="summary-content" class="content-area"></div>

                <!-- Legal/AI Disclosure -->
                <div id="ai-disclosure" class="disclosure-footer"></div>

                <!-- Flag content link -->
                <a id="flag-content-link" class="flag-content-link"></a>
            </div>
        </gmp-map>
    </body>
</html>index.html

AI 기반 요약은 특정 장소, 장소 주변 지역, 장소와 관련된 리뷰에 관한 유용한 인사이트를 제공하는 장소 또는 지역의 개요입니다. AI 기반 요약에는 세 가지 유형이 있습니다.

장소 요약: 특정 장소 ID에 대한 100자(영문 기준) 분량의 간략한 개요로, 다양한 유형의 데이터를 장소의 개략적인 스냅샷으로 집계합니다.
리뷰 요약: 사용자 리뷰만을 기반으로 생성된 장소 요약입니다.
지역 요약: 장소 주변 지역에 대해 생성된 요약으로, 주변 관심 장소를 포함한 추가 컨텍스트를 제공합니다. 영역 요약은 다음 두 가지 유형 중 하나일 수 있습니다.
- 주변 요약: premise, street_address 유형의 장소와 주택 및 숙박 카테고리의 모든 유형에 대한 주변 관심 장소의 대략적인 개요입니다.
- 전기자동차 충전소 편의시설 요약: 유형이 electric_vehicle_charging_station인 장소의 주변 관심 장소에 대한 대략적인 개요입니다.

AI 기반 요약 검색

AI 기반 요약을 검색하고 표시하려면 다음 단계를 따르세요.

Places 라이브러리를 로드합니다.

const { Place } = await google.maps.importLibrary("places");

Place 인스턴스를 가져옵니다. 다음 스니펫은 장소 ID에서 Place 인스턴스를 만드는 방법을 보여줍니다.
```
const place = new Place("ChIJaYaXFTqq3oARNy537Kb_W_c");
```

place.fetchFields() 호출에서 사용할 요약 유형의 필드를 지정합니다. 다음 스니펫에서는 모든 요약 필드가 요청됩니다.

await place.fetchFields({
  fields: [
    'generativeSummary',
    'neighborhoodSummary',
    'reviewSummary',
    'evChargeAmenitySummary'
    // Include other fields as needed.
  ]
});

각각 generativeSummary, neighborhoodSummary, reviewSummary, evChargeAmenitySummary 속성에 액세스하여 요약 데이터를 가져옵니다. 다음 스니펫은 generativeSummary에서 개요를 가져오는 방법을 보여줍니다.
```
const summaryText = place.generativeSummary.overview;
        
```

모든 장소에 AI 기반 요약이 있는 것은 아니므로 사용자에게 표시하기 전에 필요한 데이터가 있는지 확인하세요. 다음 스니펫은 if 문을 사용하여 generativeSummary를 확인합니다.

if (place.generativeSummary) {
  overviewText = place.generativeSummary.overview;
} else {
  overviewText = 'No summary is available.';
}

또는 nullish 연산자를 사용하여 요약이 있는지 간결하게 확인할 수 있습니다.

const overviewText = place.generativeSummary.overview ?? 'No summary is available.';

필수 저작자 표시

앱에 표시되는 모든 AI 기반 요약에는 Google의 정책 및 표준에 따라 적절한 저작자 표시가 수반되어야 합니다. 자세한 내용은 Maps JavaScript API 정책 및 저작자 표시를 참고하세요.

장소 요약

장소 요약은 특정 장소 ID에 대한 간략한 100자(영문 기준) 개요로, 장소에 대한 대략적인 정보를 제공합니다. 장소 요약은 특정 위치에서 구매할 수 있는 인기 음식, 서비스 또는 상품을 강조할 수 있습니다.

"포럼 숍스에 위치한 식당으로 캐주얼한 공간에서 푸짐한 전통 이탈리아 요리를 선보입니다."
"커트, 염색, 드라이를 제공하는 세련된 미용실입니다."
"다양한 빈티지 장식품, 가구, 의류를 판매하는 여러 가판대가 있는 대형 매장입니다."

장소 요약은 문화, 엔터테인먼트 및 레크리에이션, 음식 및 음료, 쇼핑, 서비스, 스포츠 카테고리의 지원되는 유형에 표시된 장소 유형에 사용할 수 있습니다.

장소 요약은 다음 언어 및 지역의 관심 지점에 대해 지원됩니다.

언어	리전
영어	인도 미국

언어

리전

영어

인도

미국

장소 요약 요청하기

생성형 장소 요약을 요청하려면 fetchFields()를 호출할 때 generativeSummary 필드를 포함합니다.

await place.fetchFields({
    fields: [
        'generativeSummary',
        // Include other fields as needed.
    ],
});

generativeSummary 속성을 사용하여 장소 요약을 가져옵니다. 다음 스니펫은 generativeSummary에서 개요 및 공개 문구를 가져옵니다.

if (place.generativeSummary) {
    console.log("Place Overview:", place.generativeSummary.overview);
    console.log("Disclosure:", place.generativeSummary.disclosureText);
}

리뷰 요약

리뷰 요약은 사용자 리뷰만을 기반으로 생성된 요약입니다. 리뷰 요약은 장소 속성, 리뷰 작성자 감정과 같은 사용자 리뷰의 주요 요소를 종합하여 높은 수준의 인사이트를 제공하고 사용자가 정보에 입각한 결정을 내릴 수 있도록 지원합니다.

예를 들어 샌프란시스코의 페리 빌딩에 대한 리뷰 요약에는 음식과 쇼핑부터 전망과 분위기에 이르기까지 다양한 정보가 포함됩니다.

"방문객들은 이 역사적인 명소에 다양한 상점, 레스토랑, 농산물 직판장이 있다고 말하며, 많은 사람들이 만과 도시의 전망을 칭찬합니다. 또한 활기찬 분위기, 다른 목적지로의 편리한 페리 이용, 현지 비즈니스를 즐길 수 있는 기회도 강조합니다."

리뷰 요약은 다음 언어 및 지역의 관심 지점에 지원됩니다.

언어	리전
영어	과테말라, 도미니카 공화국, 멕시코, 미국, 베네수엘라, 볼리비아, 브라질, 아르헨티나, 에콰도르, 영국, 우루과이, 인도, 일본, 칠레, 코스타리카, 콜롬비아, 파라과이, 페루
일본어	일본
포르투갈어	브라질
스페인어	과테말라, 도미니카 공화국, 멕시코, 미국, 베네수엘라, 볼리비아, 아르헨티나, 에콰도르, 우루과이, 칠레, 코스타리카, 콜롬비아, 파라과이, 페루

리뷰 요약 요청

리뷰 요약을 요청하려면 fetchFields()를 호출할 때 reviewSummary 필드를 포함합니다.

await place.fetchFields({
    fields: [
        'reviewSummary',
        // Include other fields as needed.
    ],
});

reviewSummary 속성을 사용하여 리뷰 요약을 가져옵니다. 리뷰 요약을 가져오려면 reviewSummary.text 속성에 액세스합니다. 다음 스니펫은 reviewSummary에서 텍스트를 가져옵니다.

if (place.reviewSummary) {
    console.log("Place Review Summary:", place.reviewSummary.text);
}

지역 요약

지역 요약은 장소 주변 지역에 대해 생성됩니다. 지역 요약은 사용자가 어디로 가야 할지, 도착한 후 무엇을 해야 할지 더 정확하게 결정할 수 있도록 근처 관심 장소를 비롯한 위치에 관한 추가 컨텍스트를 제공합니다. 예를 들어 새로운 도시를 방문할 때 호텔의 생성된 주변 요약을 확인하여 주변 지역에 대해 자세히 알아볼 수 있습니다.

"샌프란시스코의 이 활기찬 지역은 노스 비치와 차이나타운이 어우러진 곳으로, 파이낸셜 디스트릭트의 북서쪽에 위치하며 문학적 명소, 독특한 문화 명소, 다양한 식당이 있습니다. 유명한 장소로는 상징적인 시티 라이츠 서점, 매력적인 케이블카 박물관, 차이나타운의 번화한 거리가 있습니다."

전기자동차 충전을 고려하고 있다면 전기자동차 충전소에 대해 생성된 요약을 확인하여 주변 지역에 대해 자세히 알아볼 수 있습니다.

"이 지역에는 스타벅스, 스시 진, 세이프웨이 등 도보 9분 이내에 다양한 식사 옵션이 있습니다."

응답에는 지역에 대한 설명과 함께 설명에서 참조된 장소의 Place 인스턴스 목록도 포함됩니다. 이러한 Place 인스턴스에서 fetchFields()를 호출하여 각 장소의 세부정보를 요청하세요.

AI 기반 지역 요약에는 두 가지 유형이 있습니다.

주변 요약: premise, street_address 유형의 장소와 주택 및 숙박 카테고리의 모든 유형에 대한 주변 관심 장소의 대략적인 개요입니다.
전기자동차 충전소 편의시설 요약: 유형이 electric_vehicle_charging_station인 장소의 주변 관심 장소에 대한 대략적인 개요입니다.

지역 요약은 다음 언어 및 지역의 관심 지점에 대해 지원됩니다.

언어	리전
영어	미국

지역 요약 요청하기

premise, street_address 유형의 장소와 주택 및 숙박 카테고리의 모든 유형에 대한 주변 요약을 요청할 수 있습니다. 주변 요약을 요청하려면 fetchFields()를 호출할 때 neighborhoodSummary 필드를 포함합니다.

await place.fetchFields({
    fields: [
        'neighborhoodSummary',
        // Include other fields as needed.
    ],
});

neighborhoodSummary 속성을 사용하여 주변 지역 요약을 가져옵니다. 근처 요약을 가져오려면 neighborhoodSummary.content 속성에 액세스하여 텍스트를 가져옵니다.

다음 스니펫은 neighborhoodSummary의 콘텐츠를 가져옵니다.

if (place.neighborhoodSummary) {
    console.log("Place Neighborhood Summary:", place.neighborhoodSummary.overview.content);
}

전기자동차 충전소 편의시설 요약 요청

유형이 electric_vehicle_charging_station인 장소의 전기 자동차 충전소 편의시설 요약을 요청할 수 있습니다. EVCS 편의시설 요약은 overview, coffee, restaurant, store의 네 가지 유형의 요약을 제공합니다. 이 때문에 데이터 구조는 객체의 배열이며, 각 객체에는 요약이 포함됩니다. 전기자동차 충전소 편의시설 요약을 요청하려면 fetchFields()를 호출할 때 evChargeAmenitySummary 필드를 포함하세요.

await place.fetchFields({
    fields: [
        'evChargeAmenitySummary',
        // Include other fields as needed.
    ],
});

evChargeAmenitySummary 속성을 사용하여 전기자동차 충전소 편의시설 요약을 가져옵니다. 요약에서 텍스트를 가져오려면 evChargeAmenitySummary.overview, evChargeAmenitySummary.coffee, evChargeAmenitySummary.restaurant, evChargeAmenitySummary.store 속성의 content 속성에 액세스합니다.

다음 스니펫은 evChargeAmenitySummary의 콘텐츠를 가져옵니다.

// overview, coffee, restaurant, store.
if (place.evChargeAmenitySummary) {
    console.log("Place EVCS Amenity Summary:", place.evChargeAmenitySummary.overview.content);
    console.log("Coffee:", place.evChargeAmenitySummary.coffee.content);
    console.log("Restaurants:", place.evChargeAmenitySummary.restaurant.content);
    console.log("Stores:", place.evChargeAmenitySummary.store.content);
}