サンプル ソースコードの全文を見る
場所を検索して、AI による要約を表示します。検索候補の例:
- 近隣地域の概要の場合は「Hotel」。
- EVCS のアメニティの概要には「EV 充電スタンド」と表示されます。
- 場所とレビューの概要の対象となるレストランやビジネス。
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();
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();
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; }
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>サンプルを試す
AI による要約は、特定の場所、その周辺地域、その場所に関連付けられたクチコミに関する役立つ分析情報を提供する、場所や地域の概要です。AI を活用した要約には次の 3 種類があります。
-
場所の概要: 特定のプレイス ID に固有の 100 文字の短い概要。さまざまな種類のデータを集約して、場所の概要を把握できます。
-
レビューの概要: ユーザーのレビューのみに基づいて生成された場所の概要。
-
エリア要約: ある場所の周辺エリアに関する生成された要約。周辺のスポットなどの追加のコンテキストを提供します。エリアの概要には次の 2 種類があります。
-
周辺地域の概要: タイプが
premise、street_addressの場所と、[住宅] カテゴリと [宿泊施設] カテゴリのすべてのタイプの場所について、周辺のスポットの概要が表示されます。 -
電気自動車充電スタンドのアメニティの概要: タイプ
electric_vehicle_charging_stationの場所の近くにあるスポットの概要。
-
AI を活用した要約を取得する
AI を活用した要約を取得して表示する手順は次のとおりです。
-
const { Place } = await google.maps.importLibrary("places");
Placeインスタンスを取得します。次のスニペットは、プレイス ID から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 のポリシーと帰属表示をご覧ください。
場所の概要
場所の要約は、特定のプレイス ID に固有の 100 文字以内の概要で、場所の概要を把握できます。場所の概要では、その場所で購入できる人気の食べ物、サービス、商品がハイライト表示されることがあります。
-
"Forum Shops のレストラン。カジュアルな雰囲気の中で、伝統的なイタリア料理をたっぷり味わえる。"
-
「カットやカラーリング、ブローを提供するスタイリッシュなサロン。」
-
「さまざまなヴィンテージの装飾品、家具、衣料品を扱う業者が多数入っている大型店。」
場所の概要は、文化、エンターテイメントとレクリエーション、飲食、ショッピング、サービス、スポーツのカテゴリのサポートされているタイプに表示される場所のタイプで利用できます。
スポットの概要は、次の言語と地域でサポートされています。
| 言語 | 地域 |
|---|---|
| 英語 |
インド 米国 |
場所の概要をリクエストする
生成された場所の概要をリクエストするには、fetchFields() を呼び出すときに generativeSummary フィールドを含めます。
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); }
レビューの概要
レビューの要約は、ユーザー レビューのみに基づいて生成された要約です。レビューの要約では、場所の属性やレビュー投稿者の感情など、ユーザー レビューの重要な要素を統合することで、概要レベルの分析情報を提供し、ユーザーが情報に基づいて判断できるようにします。
たとえば、サンフランシスコのフェリー ビルディングのレビューの概要には、食べ物やショッピングから景色や雰囲気まで、さまざまな情報が含まれています。
「この歴史的なランドマークには、さまざまなショップ、レストラン、農産物市場があり、湾と街の景色を称賛する声が多く寄せられています。また、活気のある雰囲気、他の目的地へのフェリーの利便性、地元のお店やサービスを楽しめる機会も強調しています。」
レビューの要約は、次の言語と地域でスポットに対してサポートされています。
| 言語 | 地域 |
|---|---|
| 英語 | アルゼンチン、ボリビア、ブラジル、チリ、コロンビア、コスタリカ、ドミニカ共和国、エクアドル、グアテマラ、インド、日本、メキシコ、パラグアイ、ペルー、英国、米国、ウルグアイ、ベネズエラ |
| 日本語 | 日本 |
| ポルトガル語 | ブラジル |
| スペイン語 | アルゼンチン、ボリビア、チリ、コロンビア、コスタリカ、ドミニカ共和国、エクアドル、グアテマラ、メキシコ、パラグアイ、ペルー、米国、ウルグアイ、ベネズエラ |
レビューの要約をリクエストする
レビューの概要をリクエストするには、fetchFields() を呼び出すときに reviewSummary フィールドを含めます。
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); }
エリアの概要
エリアの概要は、場所の周辺エリアについて生成されます。エリアの概要では、周辺のスポットなど、場所に関する追加のコンテキスト情報が提供されるため、ユーザーは目的地に到着してからどこに行って何をするかについて、より多くの情報に基づいて判断できます。たとえば、新しい都市を訪れたときに、ホテルの周辺地域の概要を表示して、周辺地域について詳しく知ることができます。
-
「サンフランシスコの活気あふれるこのエリアは、ノースビーチとチャイナタウンが融合した場所で、金融街の北西に位置しています。文学的なランドマーク、ユニークな文化施設、多様な飲食店が特徴です。有名なスポットには、象徴的なシティ ライツ書店、魅力的なケーブルカー博物館、活気あふれるチャイナタウンの通りなどがあります。」
電気自動車の充電を検討している場合は、電気自動車充電ステーションの生成された概要を表示して、周辺地域について詳しく知ることができます。
-
「このエリアには、スターバックス、Sushi Jin、Safeway など、徒歩 9 分圏内にさまざまな飲食店があります。」
レスポンスには、エリアの説明とともに、説明で参照されている場所の Place インスタンスのリストも含まれます。これらの Place インスタンスで fetchFields() を呼び出して、各場所の詳細情報をリクエストします。
AI を活用したエリアの要約には、次の 2 種類があります。
-
周辺地域の概要: タイプが
premise、street_addressの場所と、住宅カテゴリと宿泊施設カテゴリのすべてのタイプの場所について、周辺のスポットの概要を表示します。 -
電気自動車充電スタンドのアメニティの概要: タイプ
electric_vehicle_charging_stationの場所の近くにあるスポットの概要。
エリアの概要は、次の言語と地域のスポットでサポートされています。
| 言語 | 地域 |
|---|---|
| 英語 | 米国 |
近隣の概要をリクエストする
premise、street_address のタイプ、および住宅カテゴリと宿泊施設カテゴリのすべてのタイプの場所について、周辺地域の概要をリクエストできます。近隣地域の概要をリクエストするには、fetchFields() を呼び出すときに neighborhoodSummary フィールドを含めます。
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 の 4 種類の概要が提供されるため、データ構造はオブジェクトの配列となり、各オブジェクトに概要が含まれます。電気自動車の充電ステーションのアメニティの概要をリクエストするには、fetchFields() を呼び出すときに evChargeAmenitySummary フィールドを含めます。
await place.fetchFields({ fields: [ 'evChargeAmenitySummary', // Include other fields as needed. ], });
電気自動車充電ステーションのアメニティの概要を取得するには、evChargeAmenitySummary プロパティを使用します。要約からテキストを取得するには、evChargeAmenitySummary.overview、evChargeAmenitySummary.coffee、evChargeAmenitySummary.restaurant、evChargeAmenitySummary.store プロパティの content プロパティにアクセスします。
次のスニペットは、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); }