Places UI Kit: Một thư viện có thể sử dụng ngay, cung cấp không gian tuỳ chỉnh và kiểm soát cho nhà phát triển. Hãy dùng thử và chia sẻ ý kiến của bạn về trải nghiệm dùng Bộ giao diện người dùng.

Trang này được dịch bởi Cloud Translation API.

Bản tóm tắt dựa trên AI

Xem mã nguồn ví dụ hoàn chỉnh

Tìm kiếm địa điểm để xem bản tóm tắt dựa trên AI. Một số cụm từ tìm kiếm đề xuất:

"Khách sạn" cho thông tin tóm tắt về khu vực lân cận.
"Trạm sạc xe điện" cho phần tóm tắt tiện nghi EVCS.
Mọi nhà hàng hoặc doanh nghiệp đều có thể sử dụng tính năng tóm tắt địa điểm và bài đánh giá.

TypeScript

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

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

async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = 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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

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

    // Handle selection of an autocomplete result.
    // prettier-ignore
    // @ts-ignore
    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,
        flagUrl: string
    ) => {
        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) ---
    //@ts-ignore
    if (place.generativeSummary?.overview) {
        createTab(
            'Overview',
            //@ts-ignore
            place.generativeSummary.overview,
            //@ts-ignore
            place.generativeSummary.disclosureText,
            //@ts-ignore
            place.generativeSummary.flagContentURI
        );
    }

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

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

    // --- 4. EV Amenity Summary (uses content blocks)) ---
    //@ts-ignore
    if (place.evChargeAmenitySummary) {
        //@ts-ignore
        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 = '';
    }
}

initMap();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 initMap() {
    // Request needed libraries.
    const [] = 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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    // Handle selection of an autocomplete result.
    // prettier-ignore
    // @ts-ignore
    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) ---
    //@ts-ignore
    if (place.generativeSummary?.overview) {
        createTab('Overview', 
        //@ts-ignore
        place.generativeSummary.overview, 
        //@ts-ignore
        place.generativeSummary.disclosureText, 
        //@ts-ignore
        place.generativeSummary.flagContentURI);
    }
    // --- 2. Review Summary ---
    //@ts-ignore
    if (place.reviewSummary?.text) {
        createTab('Reviews', 
        //@ts-ignore
        place.reviewSummary.text, 
        //@ts-ignore
        place.reviewSummary.disclosureText, 
        //@ts-ignore
        place.reviewSummary.flagContentURI);
    }
    // --- 3. Neighborhood Summary ---
    //@ts-ignore
    if (place.neighborhoodSummary?.overview?.content) {
        createTab('Neighborhood', 
        //@ts-ignore
        place.neighborhoodSummary.overview.content, 
        //@ts-ignore
        place.neighborhoodSummary.disclosureText, 
        //@ts-ignore
        place.neighborhoodSummary.flagContentURI);
    }
    // --- 4. EV Amenity Summary (uses content blocks)) ---
    //@ts-ignore
    if (place.evChargeAmenitySummary) {
        //@ts-ignore
        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 = '';
    }
}
initMap();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: 15px;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
}

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

/* 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;
}
/* 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: 15px;
    font-family: Roboto, sans-serif;
    font-size: 1rem;
}

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

/* 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;
}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>
        <!-- prettier-ignore -->
        <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map center="37.805, -122.425" zoom="14" map-id="DEMO_MAP_ID">
            <!-- Search Input Card -->
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <p>Search for a place with AI summaries:</p>
                <gmp-place-autocomplete></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

Dùng thử mẫu

JSFiddle.net

Thông tin tóm tắt dựa trên AI là thông tin tổng quan về một địa điểm hoặc khu vực, cung cấp thông tin chi tiết hữu ích về các địa điểm cụ thể, khu vực xung quanh một địa điểm và các bài đánh giá liên quan đến một địa điểm. Có 3 loại bản tóm tắt dựa trên AI:

Tóm tắt về địa điểm: Thông tin tổng quan ngắn gọn (100 ký tự) dành riêng cho một mã địa điểm nhất định, tổng hợp nhiều loại dữ liệu khác nhau thành thông tin tổng quan cấp cao về một địa điểm.
Tóm tắt bài đánh giá: Bản tóm tắt được tạo về một địa điểm chỉ dựa trên bài đánh giá của người dùng.
Tóm tắt khu vực: Bản tóm tắt được tạo cho khu vực xung quanh một địa điểm, cung cấp thêm bối cảnh, bao gồm cả các địa điểm yêu thích ở gần. Bản tóm tắt theo khu vực có thể thuộc một trong hai loại:
- Tóm tắt về khu vực lân cận: Thông tin tổng quan bao quát về các địa điểm yêu thích ở gần đối với những địa điểm có loại premise, street_address và tất cả các loại trong danh mục Nhà ở và Chỗ ở.
- Thông tin tóm tắt về tiện nghi của trạm sạc xe điện: Thông tin tổng quan cấp cao về các địa điểm yêu thích ở gần đối với những địa điểm có loại electric_vehicle_charging_station.

Lấy bản tóm tắt dựa trên AI

Để truy xuất và hiển thị bản tóm tắt dựa trên AI, hãy làm theo các bước sau:

Tải thư viện Places.

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

Lấy một thực thể Place. Đoạn mã sau đây cho thấy cách tạo một thực thể Place từ mã địa điểm:
```
const place = new Place("ChIJaYaXFTqq3oARNy537Kb_W_c");
```

Trong lệnh gọi đến place.fetchFields(), hãy chỉ định các trường cho những loại bản tóm tắt mà bạn muốn sử dụng. Trong đoạn mã sau, tất cả các trường tóm tắt đều được yêu cầu:

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

Truy xuất dữ liệu tóm tắt bằng cách truy cập vào các thuộc tính generativeSummary, neighborhoodSummary, reviewSummary và evChargeAmenitySummary tương ứng. Đoạn mã sau đây cho thấy cách truy xuất thông tin tổng quan từ generativeSummary.
```
const summaryText = place.generativeSummary.overview;
        
```

Vì không phải địa điểm nào cũng có bản tóm tắt dựa trên AI, nên hãy nhớ kiểm tra xem có dữ liệu cần thiết hay không trước khi hiển thị cho người dùng. Đoạn mã sau đây sử dụng câu lệnh if để kiểm tra generativeSummary:

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

Ngoài ra, hãy dùng toán tử hợp nhất giá trị rỗng để kiểm tra ngắn gọn sự hiện diện của một bản tóm tắt:

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

Hiển thị thông tin ghi nhận quyền tác giả bắt buộc

Tất cả bản tóm tắt dựa trên AI xuất hiện trong ứng dụng của bạn đều phải có thông tin ghi nhận quyền tác giả phù hợp theo chính sách và tiêu chuẩn của Google. Để biết thêm thông tin, hãy xem Chính sách và thông tin ghi nhận quyền tác giả cho Maps JavaScript API.

Tóm tắt địa điểm

Tóm tắt về địa điểm là thông tin tổng quan ngắn gọn (100 ký tự) dành riêng cho một mã địa điểm nhất định, nhằm cung cấp thông tin tổng quan cấp cao về một địa điểm. Tóm tắt về địa điểm có thể làm nổi bật các món ăn, dịch vụ hoặc hàng hoá phổ biến mà bạn có thể mua tại một địa điểm:

"Nhà hàng tại Forum Shops phục vụ các món ăn truyền thống của Ý với khẩu phần lớn trong không gian thoải mái."
"Salon phong cách cung cấp dịch vụ cắt và nhuộm tóc, cùng với dịch vụ sấy tạo kiểu."
"Cửa hàng lớn có nhiều người bán cung cấp nhiều loại đồ trang trí, đồ nội thất và quần áo theo phong cách cổ điển."

Thông tin tóm tắt về địa điểm có sẵn cho các loại địa điểm xuất hiện trong phần Các loại được hỗ trợ cho các danh mục Văn hoá, Giải trí và thư giãn, Đồ ăn và thức uống, Mua sắm, Dịch vụ và Thể thao.

Tóm tắt địa điểm được hỗ trợ cho các địa điểm yêu thích bằng những ngôn ngữ và khu vực sau:

Ngôn ngữ	Khu vực
Tiếng Anh	Ấn Độ Hoa Kỳ

Ngôn ngữ

Khu vực

Tiếng Anh

Ấn Độ

Hoa Kỳ

Yêu cầu cung cấp thông tin tóm tắt về một địa điểm

Để yêu cầu bản tóm tắt địa điểm dựa trên AI tạo sinh, hãy thêm trường generativeSummary khi gọi fetchFields():

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

Dùng thuộc tính generativeSummary để truy xuất thông tin tóm tắt về địa điểm. Đoạn mã sau đây truy xuất văn bản tổng quan và thông tin công bố từ một generativeSummary:

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

Tóm tắt bài đánh giá

Bản tóm tắt bài đánh giá là bản tóm tắt được tạo chỉ dựa trên bài đánh giá của người dùng. Bằng cách tổng hợp các yếu tố chính trong bài đánh giá của người dùng, chẳng hạn như thuộc tính của địa điểm và cảm xúc của người đánh giá, bản tóm tắt bài đánh giá cung cấp thông tin chi tiết cấp cao và giúp người dùng đưa ra quyết định sáng suốt.

Ví dụ: bản tóm tắt bài đánh giá về Ferry Building ở San Francisco bao gồm thông tin từ đồ ăn và mua sắm đến cảnh quan và bầu không khí:

"Du khách cho biết địa danh lịch sử này có nhiều cửa hàng, nhà hàng và chợ nông sản, đồng thời nhiều người ca ngợi cảnh quan vịnh và thành phố. Họ cũng nhấn mạnh bầu không khí sôi động, thuận tiện khi đi phà đến các điểm đến khác và cơ hội tận hưởng các doanh nghiệp địa phương."

Tóm tắt bài đánh giá được hỗ trợ cho các địa điểm yêu thích bằng các ngôn ngữ và khu vực sau:

Ngôn ngữ	Khu vực
Tiếng Anh	Argentina, Bolivia, Brazil, Chile, Colombia, Costa Rica, Cộng hoà Dominica, Ecuador, Guatemala, Ấn Độ, Nhật Bản, Mexico, Paraguay, Peru, Vương quốc Anh, Hoa Kỳ, Uruguay, Venezuela
Tiếng Nhật	Nhật Bản
Tiếng Bồ Đào Nha	Brazil
Tiếng Tây Ban Nha	Argentina, Bolivia, Chile, Colombia, Costa Rica, Cộng hoà Dominica, Ecuador, Guatemala, Mexico, Paraguay, Peru, Hoa Kỳ, Uruguay, Venezuela

Yêu cầu xem xét tóm tắt

Để yêu cầu bản tóm tắt quy trình xem xét, hãy thêm trường reviewSummary khi gọi fetchFields():

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

Dùng thuộc tính reviewSummary để truy xuất bản tóm tắt bài đánh giá. Để truy xuất bản tóm tắt bài đánh giá, hãy truy cập vào thuộc tính reviewSummary.text. Đoạn mã sau đây truy xuất văn bản từ một reviewSummary.

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

Tóm tắt theo khu vực

Bản tóm tắt khu vực được tạo cho khu vực xung quanh một địa điểm. Thông tin tóm tắt về khu vực cung cấp thêm bối cảnh cho một vị trí, bao gồm cả các địa điểm yêu thích ở gần đó, để người dùng có thể đưa ra quyết định sáng suốt hơn về nơi cần đến và việc cần làm khi đến đó. Ví dụ: khi ghé thăm một thành phố mới, bạn có thể xem bản tóm tắt được tạo về khu vực lân cận của một khách sạn để tìm hiểu thêm về khu vực xung quanh:

"Khu vực sôi động này ở San Francisco, nơi giao thoa giữa North Beach và Khu phố người Hoa, nằm ở phía tây bắc của Khu tài chính, nổi bật với các địa danh văn học, điểm tham quan văn hoá độc đáo và ẩm thực đa dạng. Các địa điểm đáng chú ý bao gồm hiệu sách City Lights mang tính biểu tượng, Bảo tàng Cáp treo hấp dẫn và những con phố nhộn nhịp của Khu phố người Hoa."

Nếu đang cân nhắc việc sạc xe điện, bạn có thể xem thông tin tóm tắt được tạo cho một trạm sạc xe điện để tìm hiểu thêm về khu vực xung quanh:

"Khu vực này có nhiều lựa chọn ăn uống trong vòng 9 phút đi bộ, bao gồm Starbucks, Sushi Jin và Safeway."

Ngoài nội dung mô tả về khu vực, phản hồi cũng chứa danh sách các thực thể Place cho những địa điểm được đề cập trong nội dung mô tả; hãy gọi fetchFields() trên các thực thể Place này để yêu cầu thêm thông tin chi tiết cho từng địa điểm.

Có hai loại bản tóm tắt khu vực dựa trên AI:

Tóm tắt về khu vực lân cận: Thông tin tổng quan bao quát về các địa điểm yêu thích ở gần đối với những địa điểm có loại premise, street_address và tất cả các loại trong danh mục Nhà ở và Chỗ ở.
Thông tin tóm tắt về tiện nghi của trạm sạc xe điện: Thông tin tổng quan cấp cao về các địa điểm yêu thích ở gần đối với những địa điểm có loại electric_vehicle_charging_station.

Thông tin tóm tắt về khu vực được hỗ trợ cho các địa điểm yêu thích bằng những ngôn ngữ và ở những khu vực sau:

Ngôn ngữ	Khu vực
Tiếng Anh	Hoa Kỳ

Yêu cầu cung cấp thông tin tóm tắt về khu vực lân cận

Bạn có thể yêu cầu thông tin tóm tắt về khu vực lân cận cho những địa điểm có loại premise, street_address và tất cả các loại trong danh mục Nhà ở và Cơ sở lưu trú. Để yêu cầu bản tóm tắt về khu vực lân cận, hãy thêm trường neighborhoodSummary khi gọi fetchFields():

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

Sử dụng thuộc tính neighborhoodSummary để truy xuất thông tin tóm tắt về khu vực lân cận. Để truy xuất thông tin tóm tắt về khu vực lân cận, hãy truy cập vào thuộc tính neighborhoodSummary.content để lấy văn bản.

Đoạn mã sau đây truy xuất nội dung của một neighborhoodSummary:

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

Yêu cầu tóm tắt tiện nghi trạm sạc xe điện

Bạn có thể yêu cầu thông tin tóm tắt về tiện nghi trạm sạc xe điện cho những địa điểm có loại electric_vehicle_charging_station. Thông tin tóm tắt về tiện nghi EVCS cung cấp 4 loại thông tin tóm tắt: overview, coffee, restaurant và store; do đó, cấu trúc dữ liệu là một mảng các đối tượng, mỗi đối tượng chứa một thông tin tóm tắt. Để yêu cầu tóm tắt tiện nghi trạm sạc xe điện, hãy thêm trường evChargeAmenitySummary khi gọi fetchFields():

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

Sử dụng thuộc tính evChargeAmenitySummary để truy xuất thông tin tóm tắt về tiện nghi của trạm sạc xe điện. Để truy xuất văn bản từ nội dung tóm tắt, hãy truy cập vào thuộc tính content của các thuộc tính evChargeAmenitySummary.overview, evChargeAmenitySummary.coffee, evChargeAmenitySummary.restaurant và evChargeAmenitySummary.store.

Đoạn mã sau đây truy xuất nội dung của một 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);
}