Посмотреть полный пример исходного кода
Найдите места, где можно увидеть сводки на основе искусственного интеллекта. Вот несколько вариантов поисковых запросов:
- "Гостиница" – для сводок по районам.
- "Станция зарядки ЭМ" для сводок об удобствах на станциях зарядки ЭМ.
- любой ресторан или компания (для сводок отзывов и информации о местах);
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>Обзоры от ИИ – это краткие пересказы, которые содержат полезную информацию о месте, его окрестностях и отзывах о нем. Есть три типа сводок, созданных ИИ:
-
Краткое описание места. Краткое описание места (до 100 символов), связанное с определенным идентификатором места. Оно содержит разные типы данных, которые дают общее представление о месте.
-
Сводка отзывов. Сгенерированная сводка о месте, основанная исключительно на отзывах пользователей.
-
Сводка по району. Сгенерированная сводка по району, в котором находится место, с дополнительным контекстом, включая близлежащие достопримечательности. Сводки по областям могут быть двух типов:
-
Сводка по району. Обзор объектов инфраструктуры поблизости для мест с типами
premise,street_addressи всех типов в категориях Жилье и Размещение. -
Сводка по удобствам на станции зарядки электромобилей. Обзор интересных мест поблизости для мест с типом
electric_vehicle_charging_station.
-
Получение сводок на основе искусственного интеллекта
Чтобы получить и посмотреть сводки, созданные ИИ, выполните следующие действия:
-
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;
Поскольку сводки на основе ИИ доступны не для всех мест, перед показом пользователям убедитесь, что нужные данные есть. В следующем фрагменте кода используется оператор if для проверки generativeSummary:
if (place.generativeSummary) { overviewText = place.generativeSummary.overview; } else { overviewText = 'No summary is available.'; }
Вы также можете использовать оператор нулевого слияния, чтобы проверить наличие сводки:
const overviewText = place.generativeSummary.overview ?? 'No summary is available.';
Отображайте необходимую информацию об авторстве
Все сводки на основе искусственного интеллекта, показанные в вашем приложении, должны сопровождаться соответствующей атрибуцией в соответствии с правилами и стандартами Google. Подробную информацию вы найдете в статье Правила и атрибуция для Maps JavaScript API.
Описания мест
Краткие описания мест – это обзоры длиной 100 символов, относящиеся к определенному идентификатору места и дающие общее представление о месте. В описании места могут быть выделены популярные блюда, услуги или товары, доступные для покупки в этом месте:
-
"Ресторан в торговом центре Forum Shops, где подают большие порции традиционных итальянских блюд в непринужденной обстановке".
-
"Стильный салон, предлагающий стрижки, окрашивание и укладку".
-
"Большой магазин, где множество продавцов предлагают разнообразные винтажные предметы интерьера, мебель и одежду".
Краткие описания доступны для типов мест, указанных в разделе Поддерживаемые типы для категорий Культура, Развлечения и отдых, Еда и напитки, Покупки, Услуги и Спорт.
Краткие описания мест поддерживаются для объектов инфраструктуры на следующих языках и в следующих регионах:
| Язык | Регион |
|---|---|
| Английский |
Индия США |
Как запросить краткий пересказ о месте
Чтобы запросить сгенерированное описание места, включите поле 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); }
Сводки отзывов
Сводки отзывов генерируются исключительно на основе отзывов пользователей. Сводки отзывов содержат обобщенную информацию о ключевых элементах отзывов пользователей, таких как атрибуты места и настроение рецензента, и помогают пользователям принимать обоснованные решения.
Например, сводка отзывов о здании паромного терминала в Сан-Франциско включает информацию о еде, магазинах, видах и атмосфере.
"Посетители отмечают, что в этом историческом месте есть множество магазинов, ресторанов и фермерский рынок. Многие хвалят виды на залив и город. Они также отмечают оживленную атмосферу, удобный доступ к паромам, идущим в другие места, и возможность посетить местные заведения".
Сводки отзывов поддерживаются для объектов инфраструктуры на следующих языках и в следующих регионах:
| Язык | Регион |
|---|---|
| Английский | Аргентина, Боливия, Бразилия, Великобритания, Венесуэла, Гватемала, Доминиканская Республика, Индия, Колумбия, Коста-Рика, Мексика, Парагвай, Перу, США, Уругвай, Чили, Эквадор, Япония |
| Японский | Япония |
| Португальский | Бразилия |
| Испанский | Аргентина, Боливия, Венесуэла, Гватемала, Доминиканская Республика, Колумбия, Коста-Рика, Мексика, Парагвай, Перу, США, Уругвай, Чили, Эквадор |
Как запросить сводку отзывов
Чтобы запросить сводку отзывов, включите поле 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 минут, в том числе Starbucks, Sushi Jin и Safeway".
В ответе, помимо описания района, также содержится список экземпляров Place для мест, упомянутых в описании. Вызовите fetchFields() для этих экземпляров Place, чтобы запросить дополнительные сведения о каждом месте.
Есть два типа сводок, созданных ИИ:
-
Сводка по району. Обзор ближайших объектов инфраструктуры для мест с типами
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 может быть четырех типов: 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); }