Places UI Kit: ไลบรารีที่พร้อมใช้งานซึ่งช่วยให้นักพัฒนาซอฟต์แวร์ปรับแต่งและควบคุมได้ ลองใช้ดู แล้วแชร์ความคิดเห็นเกี่ยวกับประสบการณ์การใช้ UI Kit

หน้านี้ได้รับการแปลโดย Cloud Translation API

ข้อมูลสรุปที่ทำงานด้วยระบบ AI

ดูซอร์สโค้ดตัวอย่างที่สมบูรณ์

ค้นหาสถานที่เพื่อดูข้อมูลสรุปที่ทำงานด้วยระบบ AI ตัวอย่างการค้นหาที่แนะนำ

"โรงแรม" สำหรับข้อมูลสรุปของย่าน
"สถานีชาร์จ EV" สำหรับข้อมูลสรุปเกี่ยวกับสิ่งอำนวยความสะดวกของ EVCS
ร้านอาหารหรือธุรกิจใดก็ได้สำหรับข้อมูลสรุปของสถานที่และรีวิว

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

ลองใช้ตัวอย่าง

JSFiddle.net

ข้อมูลสรุปที่ทำงานด้วยระบบ AI คือภาพรวมของสถานที่หรือพื้นที่ที่ให้ข้อมูลเชิงลึกที่เป็นประโยชน์เกี่ยวกับ สถานที่ที่เฉพาะเจาะจง พื้นที่รอบๆ สถานที่ และรีวิวที่เชื่อมโยงกับสถานที่ สรุปที่ทำงานด้วยระบบ AI มี 3 ประเภท ดังนี้

ข้อมูลสรุปของสถานที่: ภาพรวมสั้นๆ ความยาว 100 อักขระที่เจาะจงสำหรับรหัสสถานที่ที่กำหนด โดยรวบรวมข้อมูลประเภทต่างๆ มากมายไว้ในภาพรวมระดับสูงของสถานที่
สรุปรีวิว: สรุปที่สร้างขึ้นของสถานที่โดยอิงตามรีวิวจากผู้ใช้เท่านั้น
ข้อมูลสรุปของพื้นที่: ข้อมูลสรุปที่สร้างขึ้นสำหรับพื้นที่รอบๆ สถานที่ ซึ่งให้บริบทเพิ่มเติมรวมถึงจุดที่น่าสนใจในบริเวณใกล้เคียง สรุปพื้นที่อาจเป็น ประเภทใดประเภทหนึ่งต่อไปนี้
- ข้อมูลสรุปเกี่ยวกับย่านใกล้เคียง: ภาพรวมระดับสูงของจุดที่น่าสนใจใกล้เคียง สำหรับสถานที่ประเภท premise, street_address และ ทุกประเภทในหมวดหมู่ที่พักอาศัยและที่พัก
- ข้อมูลสรุปเกี่ยวกับสิ่งอำนวยความสะดวกของสถานีชาร์จรถยนต์ไฟฟ้า: ภาพรวมระดับสูง ของจุดที่น่าสนใจในบริเวณใกล้เคียงสำหรับสถานที่ประเภท electric_vehicle_charging_station

ดึงข้อมูลสรุปที่ทำงานด้วยระบบ AI

หากต้องการดึงและแสดงข้อมูลสรุปที่ทำงานด้วยระบบ AI ให้ทำตามขั้นตอนต่อไปนี้

โหลด Placesไลบรารี

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

รับอินสแตนซ์ Place ข้อมูลโค้ดต่อไปนี้แสดงการสร้างอินสแตนซ์ 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

ข้อมูลสรุปสถานที่

ข้อมูลสรุปสถานที่คือภาพรวมสั้นๆ ที่มีอักขระ 100 ตัวซึ่งเจาะจงรหัสสถานที่ที่กำหนด เพื่อแสดงภาพรวมระดับสูงของสถานที่ ข้อมูลสรุปของสถานที่อาจไฮไลต์อาหารยอดนิยม บริการ หรือสินค้าที่พร้อมจำหน่ายในสถานที่

"ร้านอาหารใน Forum Shops เสิร์ฟอาหารอิตาเลียนแบบดั้งเดิมในปริมาณมากใน บรรยากาศสบายๆ"
"ร้านทำผมสุดเก๋ที่ให้บริการตัดและทำสีผม รวมถึงไดร์ผม"
"ร้านค้าขนาดใหญ่ที่มีผู้ขายหลายรายนำของตกแต่ง เฟอร์นิเจอร์ และเสื้อผ้าสไตล์วินเทจมาขาย หลากหลาย"

ข้อมูลสรุปของสถานที่พร้อมใช้งานสำหรับประเภทสถานที่ที่แสดงในประเภทที่รองรับ สำหรับหมวดหมู่วัฒนธรรม ความบันเทิงและนันทนาการ อาหารและเครื่องดื่ม ช็อปปิ้ง บริการ และ กีฬา

ระบบรองรับข้อมูลสรุปสถานที่สำหรับจุดที่น่าสนใจในภาษาและภูมิภาคต่อไปนี้

ภาษา	ภูมิภาค
อังกฤษ	อินเดีย สหรัฐอเมริกา

ภาษา

ภูมิภาค

อังกฤษ

อินเดีย

สหรัฐอเมริกา

ขอข้อมูลสรุปเกี่ยวกับสถานที่

หากต้องการขอข้อมูลสรุปสถานที่แบบ Generative ให้รวมฟิลด์ generativeSummary เมื่อเรียกใช้ fetchFields()

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);
}

สรุปรีวิว

สรุปรีวิวคือสรุปที่สร้างขึ้นโดยอิงตามรีวิวของผู้ใช้เท่านั้น การสังเคราะห์องค์ประกอบสำคัญของรีวิวจากผู้ใช้ เช่น แอตทริบิวต์ของสถานที่และความรู้สึกของผู้รีวิว สรุปรีวิวจะให้ข้อมูลเชิงลึกระดับสูงและช่วยให้ผู้ใช้ตัดสินใจได้อย่างสมเหตุสมผล

ตัวอย่างเช่น ข้อมูลสรุปรีวิวของ Ferry Building ในซานฟรานซิสโกมีข้อมูล ตั้งแต่เรื่องอาหารและการช็อปปิ้งไปจนถึงวิวและบรรยากาศ

"ผู้เข้าชมกล่าวว่าสถานที่สำคัญทางประวัติศาสตร์แห่งนี้มีร้านค้า ร้านอาหาร และตลาดเกษตรกรให้เลือกมากมาย โดยหลายคนชื่นชมวิวอ่าวและเมือง นอกจากนี้ยังเน้นย้ำ บรรยากาศที่มีชีวิตชีวา การเดินทางด้วยเรือข้ามฟากที่สะดวกไปยังจุดหมายอื่นๆ และโอกาสในการ สนับสนุนธุรกิจในท้องถิ่น"

สรุปรีวิวรองรับสถานที่น่าสนใจในภาษาและภูมิภาคต่อไปนี้

ภาษา	ภูมิภาค
อังกฤษ	อาร์เจนตินา โบลิเวีย บราซิล ชิลี โคลอมเบีย คอสตาริกา สาธารณรัฐโดมินิกัน เอกวาดอร์ กัวเตมาลา อินเดีย ญี่ปุ่น เม็กซิโก ปารากวัย เปรู สหราชอาณาจักร สหรัฐอเมริกา อุรุกวัย เวเนซุเอลา
ญี่ปุ่น	ญี่ปุ่น
โปรตุเกส	บราซิล
สเปน	อาร์เจนตินา โบลิเวีย ชิลี โคลอมเบีย คอสตาริกา สาธารณรัฐโดมินิกัน เอกวาดอร์ กัวเตมาลา เม็กซิโก ปารากวัย เปรู สหรัฐอเมริกา อุรุกวัย เวเนซุเอลา

ขอสรุปรีวิว

หากต้องการขอสรุปรีวิว ให้ใส่ฟิลด์ reviewSummary เมื่อเรียกใช้ fetchFields()

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);
}

สรุปพื้นที่

ระบบจะสร้างข้อมูลสรุปของพื้นที่สำหรับพื้นที่รอบๆ สถานที่ ข้อมูลสรุปเกี่ยวกับพื้นที่ ให้บริบทเพิ่มเติมเกี่ยวกับสถานที่ รวมถึงจุดที่น่าสนใจในบริเวณใกล้เคียง เพื่อให้ผู้ใช้ มีข้อมูลประกอบการตัดสินใจมากขึ้นเกี่ยวกับสถานที่ที่จะไปและสิ่งที่ควรทำเมื่อไปถึง ตัวอย่างเช่น เมื่อไปเยือนเมืองใหม่ คุณสามารถดูข้อมูลสรุปเกี่ยวกับย่านที่สร้างขึ้นสำหรับโรงแรมเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่โดยรอบได้โดยทำดังนี้

"ย่านที่มีชีวิตชีวาแห่งนี้ในซานฟรานซิสโก ซึ่งผสมผสานระหว่างนอร์ทบีชและไชน่าทาวน์ ตั้งอยู่ทางตะวันตกเฉียงเหนือ ของย่านการเงิน และมีสถานที่สำคัญทางวรรณกรรม สถานที่ท่องเที่ยวทางวัฒนธรรมที่ไม่เหมือนใคร และ ร้านอาหารหลากหลาย สถานที่ที่น่าสนใจ ได้แก่ ร้านหนังสือ City Lights อันโด่งดัง พิพิธภัณฑ์รถรางเคเบิลที่น่าตื่นตาตื่นใจ และถนนที่คึกคักของไชน่าทาวน์"

หากกำลังพิจารณาชาร์จรถยนต์ไฟฟ้า คุณสามารถดูข้อมูลสรุปที่สร้างขึ้นสำหรับ สถานีชาร์จรถยนต์ไฟฟ้าเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับพื้นที่โดยรอบได้

"ย่านนี้มีร้านอาหารหลากหลายให้เลือกสรรภายในระยะเดิน 9 นาที ซึ่งรวมถึง สตาร์บัคส์, ซูชิจิน และเซฟเวย์"

นอกเหนือจากคำอธิบายพื้นที่แล้ว การตอบกลับยังมีรายการอินสแตนซ์ Place สำหรับสถานที่ที่อ้างอิงในคำอธิบายด้วย ให้เรียกใช้ fetchFields() ในอินสแตนซ์ Place เหล่านี้เพื่อขอรายละเอียดเพิ่มเติมสำหรับแต่ละสถานที่

ข้อมูลสรุปพื้นที่ที่ทำงานด้วยระบบ AI มี 2 ประเภท ได้แก่

ข้อมูลสรุปเกี่ยวกับย่านใกล้เคียง: ภาพรวมระดับสูงของจุดที่น่าสนใจใกล้เคียง สำหรับสถานที่ประเภท premise, street_address และ ทุกประเภทในหมวดหมู่ที่พักอาศัยและที่พัก
ข้อมูลสรุปเกี่ยวกับสิ่งอำนวยความสะดวกของสถานีชาร์จรถยนต์ไฟฟ้า: ภาพรวมระดับสูง ของจุดที่น่าสนใจใกล้เคียงสำหรับสถานที่ประเภทelectric_vehicle_charging_station

ระบบรองรับข้อมูลสรุปพื้นที่สำหรับจุดที่น่าสนใจในภาษาและภูมิภาคต่อไปนี้

ภาษา	ภูมิภาค
อังกฤษ	สหรัฐอเมริกา

ขอข้อมูลสรุปเกี่ยวกับย่าน

คุณขอข้อมูลสรุปเกี่ยวกับย่านสำหรับสถานที่ที่มีประเภท premise, street_address และทุกประเภทในหมวดหมู่ที่อยู่อาศัยและ ที่พักได้ หากต้องการขอข้อมูลสรุปเกี่ยวกับย่าน โปรดระบุฟิลด์ neighborhoodSummary เมื่อเรียกใช้ fetchFields()

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 มีสรุป 4 ประเภท ได้แก่ overview, coffee, restaurant และ store โครงสร้างข้อมูลจึงเป็นอาร์เรย์ของออบเจ็กต์ ซึ่งแต่ละออบเจ็กต์มีสรุป หากต้องการขอสรุปสิ่งอำนวยความสะดวกของสถานีชาร์จรถยนต์ไฟฟ้า ให้ระบุฟิลด์ evChargeAmenitySummary เมื่อเรียกใช้ fetchFields()

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

ใช้พร็อพเพอร์ตี้ evChargeAmenitySummary เพื่อดึงข้อมูลสรุปสิ่งอำนวยความสะดวกของสถานีชาร์จรถยนต์ไฟฟ้า หากต้องการดึงข้อความจากข้อมูลสรุป ให้เข้าถึงพร็อพเพอร์ตี้ content ของพร็อพเพอร์ตี้ evChargeAmenitySummary.overview, evChargeAmenitySummary.coffee, evChargeAmenitySummary.restaurant และ evChargeAmenitySummary.store

ข้อมูลโค้ดต่อไปนี้จะดึงเนื้อหาของ 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);
}