Google は AI 技術を使用して、コンテンツをご希望の言語に翻訳しています。AI 翻訳には誤りが含まれる場合があります。

AI を活用した要約

サンプルソースコードの全文を見る

場所を検索すると、AI による要約が表示されます。検索候補の例:

周辺地域の概要の「ホテル」。
EVCS 設備概要の「EV 充電スタンド」。
場所とクチコミの要約の対象となるレストランやビジネス。

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();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 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();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: 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;
}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>
        <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>index.html

AI による要約は、特定の場所、場所の周辺地域、場所に関連するクチコミに関する有用な分析情報を提供する、場所や地域の概要です。AI を活用した要約には、次の 3 種類があります。

場所の概要: 特定のプレイス ID に固有の 100 文字程度の概要。さまざまな種類のデータを集約して、場所の概要をまとめたものです。
クチコミの要約: ユーザーのクチコミのみに基づいて生成された場所の要約。
エリアの概要: 場所の周辺エリアの概要。近くのスポットなどの追加のコンテキストが提供されます。エリアの概要は、次の 2 種類のいずれかです。
- 近隣の概要: premise、street_address、住宅カテゴリと宿泊施設カテゴリのすべてのタイプの場所について、近隣のスポットの概要を示します。
- 電気自動車充電スタンドの設備概要: タイプ electric_vehicle_charging_station の場所の近くにあるスポットの概要。

AI による要約を取得する

AI を活用した要約を取得して表示する手順は次のとおりです。

Places ライブラリを読み込みます。

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 文字の簡潔な概要で、場所の概要を把握できます。場所の概要では、その場所で購入できる人気の料理、サービス、商品がハイライト表示されることがあります。

「フォーラムショップスにあるレストラン。カジュアルな空間で、ボリュームたっぷりの伝統的なイタリア料理を提供。」
「ヘアカット、カラーリング、ブローを提供するスタイリッシュなサロン。」
「さまざまなヴィンテージの装飾品、家具、衣料品を扱う多くのベンダーが入る大型店舗。」

場所の概要は、サポートされているタイプに示されている場所タイプのうち、文化、エンタメとレクリエーション、飲食、ショッピング、サービス、スポーツのカテゴリに属する場所タイプで利用できます。

場所の概要は、次の言語と地域のスポットでサポートされています。

言語	リージョン
英語	インド米国

言語

リージョン

英語

インド

米国

場所の概要をリクエストする

生成された場所の概要をリクエストするには、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);
}

エリアの概要

エリアの概要は、場所の周辺エリアに対して生成されます。エリアの概要には、近くのスポットなど、場所に関する追加のコンテキスト情報が表示されるため、ユーザーはどこに行くか、到着後に何をするかについて、より多くの情報に基づいて決定を下すことができます。たとえば、初めて訪れる都市で、ホテルの周辺情報として生成された概要を表示して、周辺地域について詳しく知ることができます。

「サンフランシスコのこの活気あるエリアは、ノースビーチとチャイナタウンが融合した、金融街の北西に位置する地区です。文学的なランドマーク、ユニークな文化スポット、多様なレストランが特徴です。有名なスポットには、象徴的なシティライツブックストア、魅力的なケーブルカー博物館、賑やかなチャイナタウンの通りなどがあります。

電気自動車の充電を検討している場合は、電気自動車充電スタンドの生成された要約を表示して、周辺エリアの詳細を確認できます。

「このエリアには、徒歩 9 分圏内にスターバックス、Sushi Jin、Safeway など、さまざまな飲食店があります。」

レスポンスには、エリアの説明に加えて、説明で参照されている場所の 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);
}