Riepiloghi basati sull'AI

Visualizza il codice sorgente dell'esempio completo

Cerca luoghi per visualizzare i riepiloghi basati sull'AI. Ecco alcune ricerche suggerite:

  • "Hotel" per i riepiloghi dei quartieri.
  • "Stazione di ricarica EV" per i riepiloghi dei servizi EVCS.
  • Qualsiasi ristorante o attività per i riepiloghi dei luoghi e delle recensioni.

TypeScript

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

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

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

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

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

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

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

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

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

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

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

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

    let firstTabActivated = false;

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

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

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

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

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

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

        tabContainer.appendChild(btn);

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

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

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

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

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

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

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

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

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

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

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

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

void init();

JavaScript

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

let innerMap;
let marker;

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

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

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

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

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

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

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

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

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

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

    let firstTabActivated = false;

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

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

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

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

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

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

        tabContainer.appendChild(btn);

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

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

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

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

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

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

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

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

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

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

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

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

void init();

CSS

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

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

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

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

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

.hidden {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

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

HTML

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

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

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

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

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

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

I riepiloghi basati sull'AI sono panoramiche di un luogo o di un'area che forniscono insight utili su luoghi specifici, l'area circostante e le recensioni associate a un luogo. Esistono tre diversi tipi di riepiloghi basati sull'AI:

  • Riepilogo del luogo: una breve panoramica di 100 caratteri specifica per un determinato ID luogo, che aggrega molti tipi diversi di dati in un'istantanea di alto livello di un luogo.

  • Riepilogo delle recensioni: un riepilogo generato di un luogo basato esclusivamente sulle recensioni degli utenti.

  • Riepilogo dell'area: un riepilogo generato per l'area circostante un luogo, che fornisce un contesto aggiuntivo, inclusi i punti di interesse nelle vicinanze. I riepiloghi delle aree possono essere di due tipi:

    • Riepilogo del quartiere: una panoramica generale dei punti di interesse nelle vicinanze per i luoghi con i tipi premise, street_address e tutti i tipi nelle categorie Alloggi e Alloggi.

    • Riepilogo dei servizi della stazione di ricarica per veicoli elettrici: una panoramica generale dei punti di interesse nelle vicinanze per i luoghi con tipo electric_vehicle_charging_station.

Recupera i riepiloghi basati sull'AI

Per recuperare e visualizzare i riepiloghi basati sull'AI, segui questi passaggi:

  1. Carica la libreria Places. 

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

  2. Ottieni un'istanza Place. Il seguente snippet mostra la creazione di un'istanza Place da un ID luogo: 

    const place = new Place("ChIJaYaXFTqq3oARNy537Kb_W_c");

  3. Nella chiamata a place.fetchFields(), specifica i campi per i tipi di riepiloghi che vuoi utilizzare. Nello snippet seguente vengono richiesti tutti i campi di riepilogo:

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

  4. Recupera i dati di riepilogo accedendo rispettivamente alle proprietà generativeSummary, neighborhoodSummary, reviewSummary e evChargeAmenitySummary. Il seguente snippet mostra il recupero della panoramica da un generativeSummary. 

    const summaryText = place.generativeSummary.overview;

Poiché non tutti i luoghi dispongono di riepiloghi basati sull'AI, assicurati di verificare la presenza dei dati necessari prima di mostrarli agli utenti. Lo snippet seguente utilizza un'istruzione if per verificare la presenza di un generativeSummary: 

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

In alternativa, utilizza un operatore nullish per verificare in modo conciso la presenza di un riepilogo:

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

Mostra le attribuzioni richieste

Tutti i riepiloghi basati sull'AI visualizzati nella tua app devono essere accompagnati dall'attribuzione appropriata in conformità con le norme e gli standard di Google. Per saperne di più, consulta Norme e attribuzioni per l'API Maps JavaScript.

Riepiloghi dei luoghi

I riepiloghi dei luoghi sono brevi panoramiche di 100 caratteri specifiche per un determinato ID luogo, per fornire un'istantanea di alto livello di un luogo. I riepiloghi dei luoghi possono mettere in evidenza cibi, servizi o prodotti popolari disponibili per l'acquisto in una località:

  • "Ristorante del Forum Shops che serve abbondanti porzioni di piatti tradizionali italiani in un ambiente informale."

  • "Salone elegante che offre tagli di capelli e colorazioni, oltre a messe in piega."

  • "Grande negozio con molti venditori che offrono una varietà di decorazioni, mobili e abbigliamento vintage."

I riepiloghi dei luoghi sono disponibili per i tipi di luoghi mostrati in Tipi supportati per le categorie Cultura, Intrattenimento e svago, Cibo e bevande, Shopping, Servizi e Sport.

I riepiloghi dei luoghi sono supportati per i punti d'interesse nelle seguenti lingue e regioni:

Lingua Regione
Inglese

India

Stati Uniti

Richiedi un riepilogo del luogo

Per richiedere un riepilogo dei luoghi generativo, includi il campo generativeSummary quando chiami fetchFields(): 

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

Utilizza la proprietà generativeSummary per recuperare i riepiloghi dei luoghi. Il seguente snippet recupera la panoramica e il testo dell'informativa da un generativeSummary: 

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

Riepiloghi delle recensioni

I riepiloghi delle recensioni vengono generati esclusivamente in base alle recensioni degli utenti. Sintetizzando gli elementi chiave delle recensioni degli utenti, come gli attributi dei luoghi e il sentiment dei recensori, i riepiloghi delle recensioni forniscono informazioni di alto livello e aiutano gli utenti a prendere decisioni informate.

Ad esempio, un riepilogo delle recensioni del Ferry Building di San Francisco include informazioni che vanno dal cibo e dallo shopping alle viste e all'atmosfera:

"I visitatori affermano che questo punto di riferimento storico offre una vasta selezione di negozi, ristoranti e un mercato contadino, e molti lodano la vista sulla baia e sulla città. They also highlight the vibrant atmosphere, convenient ferry access to other destinations, and the opportunity to enjoy local businesses."

I riepiloghi delle recensioni sono supportati per i punti d'interesse nelle seguenti lingue e regioni:

Lingua Regione
Inglese Argentina, Bolivia, Brasile, Cile, Colombia, Costa Rica, Ecuador, Giappone, Guatemala, India, Messico, Paraguay, Perù, Regno Unito, Repubblica Dominicana, Stati Uniti, Uruguay, Venezuela
Giapponese Giappone
Portoghese Brasile
Spagnolo Argentina, Bolivia, Cile, Colombia, Costa Rica, Ecuador, Guatemala, Messico, Paraguay, Perù, Repubblica Dominicana, Stati Uniti, Uruguay, Venezuela

Richiedi un riepilogo delle recensioni

Per richiedere un riepilogo delle recensioni, includi il campo reviewSummary quando chiami fetchFields(): 

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

Utilizza la proprietà reviewSummary per recuperare i riepiloghi delle recensioni. Per recuperare i riepiloghi delle recensioni, accedi alla proprietà reviewSummary.text. Il seguente snippet recupera il testo da un reviewSummary. 

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

Riepiloghi delle aree

I riepiloghi delle aree vengono generati per l'area circostante un luogo. I riepiloghi delle aree forniscono un contesto aggiuntivo per una località, inclusi i punti di interesse nelle vicinanze, in modo che gli utenti possano prendere una decisione più informata su dove andare e cosa fare una volta arrivati. Ad esempio, quando visiti una nuova città, puoi visualizzare un riepilogo generato del quartiere di un hotel per scoprire di più sulla zona circostante:

  • "Questa vivace area di San Francisco, che unisce North Beach e Chinatown, si trova a nord-ovest del Financial District e offre punti di riferimento letterari, attrazioni culturali uniche e una varietà di ristoranti. Tra i luoghi più importanti figurano l'iconica libreria City Lights, l'affascinante Cable Car Museum e le vivaci strade di Chinatown."

Se stai pensando di ricaricare un veicolo elettrico, puoi visualizzare un riepilogo generato per una stazione di ricarica per veicoli elettrici per scoprire di più sull'area circostante:

  • "Questa zona offre una serie di punti ristoro a 9 minuti a piedi, tra cui Starbucks, Sushi Jin e Safeway."

Oltre a una descrizione dell'area, la risposta contiene anche un elenco di istanze Place per i luoghi a cui si fa riferimento nella descrizione. Chiama fetchFields() su queste istanze Place per richiedere ulteriori dettagli per ogni luogo.

Esistono due tipi di riepiloghi delle zone basati sull'AI:

  • Riepilogo del quartiere: una panoramica generale dei punti di interesse nelle vicinanze per i luoghi con i tipi premise, street_address e tutti i tipi nelle categorie Alloggi e Alloggi.

  • Riepilogo dei servizi della stazione di ricarica per veicoli elettrici: una panoramica generale dei punti di interesse nelle vicinanze per i luoghi con tipo electric_vehicle_charging_station.

I riepiloghi delle aree sono supportati per i punti d'interesse nelle seguenti lingue e regioni:

Lingua Regione
Inglese Stati Uniti

Richiedi un riepilogo del quartiere

Puoi richiedere riepiloghi dei quartieri per i luoghi con i tipi premise, street_address e tutti i tipi nelle categorie Alloggi e Alloggi. Per richiedere un riepilogo del quartiere, includi il campo neighborhoodSummary quando chiami fetchFields(): 

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

Utilizza la proprietà neighborhoodSummary per recuperare i riepiloghi dei quartieri. Per recuperare i riepiloghi dei quartieri, accedi alla proprietà neighborhoodSummary.content per ottenere il testo.

Il seguente snippet recupera i contenuti di un neighborhoodSummary: 

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

Richiedi un riepilogo dei servizi delle stazioni di ricarica per veicoli elettrici

Puoi richiedere riepiloghi dei servizi delle stazioni di ricarica per veicoli elettrici per i luoghi con tipo electric_vehicle_charging_station. Il riepilogo dei servizi EVCS offre quattro tipi di riepiloghi: overview, coffee, restaurant e store. Per questo motivo, la struttura dei dati è un array di oggetti, ciascuno contenente un riepilogo. Per richiedere un riepilogo dei servizi della stazione di ricarica per veicoli elettrici, includi il campo evChargeAmenitySummary quando chiami fetchFields(): 

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

Utilizza la proprietà evChargeAmenitySummary per recuperare i riepiloghi dei servizi delle stazioni di ricarica per veicoli elettrici. Per recuperare il testo dai riepiloghi, accedi alla proprietà content delle proprietà evChargeAmenitySummary.overview, evChargeAmenitySummary.coffee, evChargeAmenitySummary.restaurant e evChargeAmenitySummary.store.

Il seguente snippet recupera i contenuti di un 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);
}