Places UI Kit: gotowa do użycia biblioteka, która zapewnia programistom możliwość dostosowywania i kontrolowania. Wypróbuj go i podziel się opinią na temat korzystania z interfejsu UI Kit.

Ta strona została przetłumaczona przez Cloud Translation API.

Podsumowania oparte na AI

Zobacz pełny przykładowy kod źródłowy

Wyszukaj miejsca, aby zobaczyć podsumowania przygotowane przez AI. Przykładowe sugerowane wyszukiwania:

„Hotel” w przypadku podsumowań dotyczących okolicy.
„Stacja ładowania EV” w podsumowaniach udogodnień EVCS.
Każda restauracja lub firma w przypadku podsumowań miejsc i opinii.

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

Wypróbuj przykład

JSFiddle.net

Podsumowania oparte na AI to przeglądy miejsca lub obszaru, które zawierają przydatne informacje o konkretnych miejscach, obszarze wokół nich i opiniach z nimi związanych. Istnieją 3 rodzaje podsumowań opartych na AI:

Podsumowanie miejsca: krótkie, 100-znakowe podsumowanie dotyczące konkretnego identyfikatora miejsca, które zawiera wiele różnych rodzajów danych w postaci ogólnego przeglądu miejsca.
Podsumowanie opinii: wygenerowane podsumowanie miejsca na podstawie opinii użytkowników.
Podsumowanie obszaru: wygenerowane podsumowanie obszaru otaczającego miejsce, które zawiera dodatkowe informacje, w tym pobliskie punkty orientacyjne. Podsumowania obszaru mogą być jednego z 2 rodzajów:
- Podsumowanie okolicy: ogólny przegląd pobliskich ważnych miejsc w przypadku miejsc o typach premise, street_address i wszystkich typach w kategoriach Mieszkania i Obiekty noclegowe.
- Podsumowanie udogodnień stacji ładowania pojazdów elektrycznych: ogólne podsumowanie pobliskich punktów zainteresowania w przypadku miejsc typu electric_vehicle_charging_station.

Wyświetlanie podsumowań wygenerowanych przez AI

Aby pobrać i wyświetlić podsumowania oparte na AI, wykonaj te czynności:

Załaduj Placesbibliotekę.

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

Uzyskaj instancję Place. Poniższy fragment kodu pokazuje, jak utworzyć instancję Place na podstawie identyfikatora miejsca:
```
const place = new Place("ChIJaYaXFTqq3oARNy537Kb_W_c");
```

W wywołaniu funkcji place.fetchFields() określ pola dla rodzajów podsumowań, których chcesz użyć. W poniższym fragmencie kodu żądane są wszystkie pola podsumowania:

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

Pobierz dane podsumowujące, uzyskując dostęp do właściwości generativeSummary, neighborhoodSummary, reviewSummary i evChargeAmenitySummary. Poniższy fragment kodu pokazuje, jak pobrać przegląd z generativeSummary.
```
const summaryText = place.generativeSummary.overview;
        
```

Nie wszystkie miejsca mają podsumowania oparte na AI, więc przed wyświetleniem danych użytkownikom sprawdź, czy są one dostępne. Poniższy fragment kodu używa instrukcji if do sprawdzenia, czy występuje znak generativeSummary:

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

Możesz też użyć operatora nullish, aby zwięźle sprawdzić, czy podsumowanie jest obecne:

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

Wyświetlanie wymaganych atrybucji

Wszystkie podsumowania oparte na AI wyświetlane w Twojej aplikacji muszą zawierać odpowiednie atrybucje zgodnie z zasadami i standardami Google. Więcej informacji znajdziesz w artykule Zasady i atrybucje dotyczące interfejsu Maps JavaScript API.

Podsumowania miejsc

Podsumowania miejsc to krótkie, 100-znakowe opisy dotyczące konkretnego identyfikatora miejsca, które zawierają ogólne informacje o danym miejscu. Podsumowania miejsc mogą wyróżniać popularne potrawy, usługi lub towary dostępne w danym miejscu:

„Restauracja w Forum Shops serwująca duże porcje tradycyjnych dań kuchni włoskiej w nieformalnej atmosferze”.
„Stylowy salon oferujący strzyżenie i koloryzację włosów oraz modelowanie.”
„Duży sklep z wieloma sprzedawcami oferującymi różnorodne dekoracje w stylu vintage, meble i odzież”.

Podsumowania miejsc są dostępne w przypadku typów miejsc wymienionych w sekcji Obsługiwane typy w kategoriach Kultura, Rozrywka i rekreacja, Jedzenie i napoje, Zakupy, Usługi i Sport.

Podsumowania miejsc są obsługiwane w przypadku punktów orientacyjnych w tych językach i regionach:

Język	Region
angielski	Indie Stany Zjednoczone

Język

Region

angielski

Indie

Stany Zjednoczone

Prośba o podsumowanie miejsca

Aby poprosić o wygenerowane podsumowanie miejsca, podczas wywoływania funkcji fetchFields() uwzględnij pole generativeSummary:

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

Aby pobrać podsumowania miejsc, użyj właściwości generativeSummary. Poniższy fragment kodu pobiera tekst podsumowania i informacji z generativeSummary:

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

Podsumowania opinii

Podsumowania opinii to wygenerowane podsumowania oparte wyłącznie na opiniach użytkowników. Podsumowania opinii zawierają najważniejsze elementy opinii użytkowników, takie jak atrybuty miejsca i nastawienie recenzenta. Dostarczają one ogólnych informacji i pomagają użytkownikom podejmować świadome decyzje.

Na przykład podsumowanie opinii o Ferry Building w San Francisco zawiera informacje o jedzeniu, zakupach, widokach i atmosferze:

„Odwiedzający twierdzą, że ten zabytkowy obiekt oferuje różnorodny wybór sklepów, restauracji i targowisko, a wielu chwali widoki na zatokę i miasto. Podkreślają też tętniącą życiem atmosferę, wygodny dostęp promem do innych miejsc docelowych i możliwość korzystania z lokalnych firm”.

Podsumowania opinii są dostępne w przypadku interesujących miejsc w tych językach i regionach:

Język	Region
angielski	Argentyna, Boliwia, Brazylia, Chile, Dominikana, Ekwador, Gwatemala, Indie, Japonia, Kolumbia, Kostaryka, Meksyk, Paragwaj, Peru, Stany Zjednoczone, Urugwaj, Wenezuela, Wielka Brytania
japoński	Japonia
portugalski	Brazylia
hiszpański	Argentyna, Boliwia, Chile, Dominikana, Ekwador, Gwatemala, Kolumbia, Kostaryka, Meksyk, Paragwaj, Peru, Stany Zjednoczone, Urugwaj, Wenezuela

Prośba o podsumowanie weryfikacji

Aby poprosić o podsumowanie opinii, podczas wywoływania funkcji fetchFields() uwzględnij pole reviewSummary:

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

Aby pobrać podsumowania opinii, użyj właściwości reviewSummary. Aby pobrać podsumowania opinii, otwórz usługę reviewSummary.text. Poniższy fragment kodu pobiera tekst z reviewSummary.

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

Podsumowania obszarów

Podsumowania obszarów są generowane dla obszaru otaczającego miejsce. Podsumowania obszarów zawierają dodatkowe informacje o lokalizacji, w tym pobliskie ciekawe miejsca, dzięki czemu użytkownicy mogą podejmować bardziej świadome decyzje o tym, gdzie się udać i co robić po przybyciu na miejsce. Gdy odwiedzasz nowe miasto, możesz wyświetlić wygenerowane podsumowanie okolicy hotelu, aby dowiedzieć się więcej o otoczeniu:

„Ta tętniąca życiem dzielnica San Francisco, łącząca North Beach i Chinatown, znajduje się na północny zachód od dzielnicy finansowej i oferuje zabytki literackie, wyjątkowe atrakcje kulturalne i różnorodną ofertę gastronomiczną. Warto odwiedzić m.in. kultową księgarnię City Lights Bookstore, fascynujące Muzeum Kolejki Linowej i tętniące życiem ulice Chinatown.

Jeśli planujesz naładować pojazd elektryczny, możesz wyświetlić wygenerowane podsumowanie stacji ładowania pojazdów elektrycznych, aby dowiedzieć się więcej o okolicy:

„W odległości 9 minut spacerem od tego miejsca znajduje się wiele lokali gastronomicznych, w tym Starbucks, Sushi Jin i Safeway”.

Oprócz opisu obszaru odpowiedź zawiera też listę instancji Place miejsc wymienionych w opisie. Aby poprosić o więcej informacji o każdym z nich, wywołaj funkcję fetchFields() na tych instancjach Place.

Istnieją 2 rodzaje podsumowań obszarów opartych na AI:

Podsumowanie okolicy: ogólny przegląd pobliskich ważnych miejsc w przypadku miejsc o typach premise, street_address i wszystkich typach w kategoriach Mieszkania i Obiekty noclegowe.
Podsumowanie udogodnień stacji ładowania pojazdów elektrycznych: ogólne informacje o ciekawych miejscach w pobliżu miejsc typu electric_vehicle_charging_station.

Podsumowania obszarów są obsługiwane w przypadku ważnych miejsc w tych językach i regionach:

Język	Region
angielski	Stany Zjednoczone

Prośba o podsumowanie okolicy

Możesz poprosić o podsumowania dotyczące dzielnic w przypadku miejsc o typach premise, street_address oraz wszystkich typów w kategoriach Mieszkania i Zakwaterowanie. Aby poprosić o podsumowanie okolicy, podczas wywoływania funkcji fetchFields() uwzględnij pole neighborhoodSummary:

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

Użyj właściwości neighborhoodSummary, aby pobrać podsumowania dzielnic. Aby pobrać podsumowania dzielnic, uzyskaj dostęp do usługi neighborhoodSummary.content, aby pobrać tekst.

Ten fragment kodu pobiera zawartość elementu neighborhoodSummary:

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

Prośba o podsumowanie udogodnień stacji ładowania pojazdów elektrycznych

Możesz poprosić o podsumowanie udogodnień stacji ładowania pojazdów elektrycznych w miejscach o typie electric_vehicle_charging_station. Podsumowanie udogodnień EVCS zawiera 4 rodzaje podsumowań: overview, coffee, restaurant i store. Z tego powodu struktura danych jest tablicą obiektów, z których każdy zawiera podsumowanie. Aby poprosić o podsumowanie udogodnień związanych ze stacją ładowania pojazdów elektrycznych, podczas wywoływania funkcji fetchFields() uwzględnij pole evChargeAmenitySummary:

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

Użyj właściwości evChargeAmenitySummary, aby pobrać podsumowania udogodnień stacji ładowania pojazdów elektrycznych. Aby pobrać tekst z podsumowań, uzyskaj dostęp do właściwości content właściwości evChargeAmenitySummary.overview, evChargeAmenitySummary.coffee, evChargeAmenitySummary.restaurant i evChargeAmenitySummary.store.

Ten fragment kodu pobiera zawartość elementu 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);
}