স্থানগুলি UI কিট : একটি রেডি-টু-ব্যবহারের লাইব্রেরি যা কাস্টমাইজেশন এবং কম-কোড বিকাশের জন্য জায়গা প্রদান করে। এটি ব্যবহার করে দেখুন, এবং আপনার UI কিট অভিজ্ঞতাতে আপনার ইনপুট শেয়ার করুন।

এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

এআই-চালিত সারাংশ

সম্পূর্ণ উদাহরণ সোর্স কোডটি দেখুন

AI-চালিত সারাংশ দেখার জন্য স্থানগুলি অনুসন্ধান করুন। কিছু প্রস্তাবিত অনুসন্ধান:

পাড়ার সারসংক্ষেপের জন্য "হোটেল"।
EVCS সুবিধার সারাংশের জন্য "EV চার্জিং স্টেশন"।
স্থান এবং পর্যালোচনার সারাংশের জন্য যেকোনো রেস্তোরাঁ বা ব্যবসা।

টাইপস্ক্রিপ্ট

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

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

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

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

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

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

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

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

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

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

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

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

    let firstTabActivated = false;

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

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

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

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

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

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

        tabContainer.appendChild(btn);

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

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

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

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

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

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

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

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

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

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

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

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

initMap();index.ts

জাভাস্ক্রিপ্ট

// Define DOM elements.
const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
const summaryPanel = document.getElementById('summary-panel');
const placeName = document.getElementById('place-name');
const placeAddress = document.getElementById('place-address');
const tabContainer = document.getElementById('tab-container');
const summaryContent = document.getElementById('summary-content');
const aiDisclosure = document.getElementById('ai-disclosure');
const flagContentLink = document.getElementById('flag-content-link');
let innerMap;
let marker;
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
        fullscreenControl: false,
    });
    // Bind autocomplete bounds to map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    // Handle selection of an autocomplete result.
    // prettier-ignore
    // @ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        // Fetch all summary fields.
        await place.fetchFields({
            fields: [
                'displayName',
                'formattedAddress',
                'location',
                'generativeSummary',
                'neighborhoodSummary',
                'reviewSummary',
                'evChargeAmenitySummary',
            ],
        });
        // Update the map viewport and position the marker.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        }
        else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }
        marker.position = place.location;
        // Update the panel UI.
        updateSummaryPanel(place);
    });
}
function updateSummaryPanel(place) {
    // Reset UI
    summaryPanel.classList.remove('hidden');
    tabContainer.innerHTML = ''; // innerHTML is OK here since we're clearing known child elements.
    summaryContent.textContent = '';
    aiDisclosure.textContent = '';
    placeName.textContent = place.displayName || '';
    placeAddress.textContent = place.formattedAddress || '';
    let firstTabActivated = false;
    /**
     * Safe Helper: Accepts either a text string or a DOM Node (like a div or DocumentFragment).
     */
    const createTab = (label, content, disclosure, flagUrl) => {
        const btn = document.createElement('button');
        btn.className = 'tab-button';
        btn.textContent = label;
        btn.onclick = () => {
            // Do nothing if the tab is already active.
            if (btn.classList.contains('active')) {
                return;
            }
            // Manage the active class state.
            document
                .querySelectorAll('.tab-button')
                .forEach((b) => b.classList.remove('active'));
            btn.classList.add('active');
            if (typeof content === 'string') {
                summaryContent.textContent = content;
            }
            else {
                summaryContent.replaceChildren(content.cloneNode(true));
            }
            // Set the disclosure text.
            aiDisclosure.textContent = disclosure || 'AI-generated content.';
            // Add the content flag URI.
            if (flagUrl) {
                flagContentLink.href = flagUrl;
                flagContentLink.textContent = "Report an issue";
            }
        };
        tabContainer.appendChild(btn);
        // Auto-select the first available summary.
        if (!firstTabActivated) {
            btn.click();
            firstTabActivated = true;
        }
    };
    // --- 1. Generative Summary (Place) ---
    //@ts-ignore
    if (place.generativeSummary?.overview) {
        createTab('Overview', 
        //@ts-ignore
        place.generativeSummary.overview, 
        //@ts-ignore
        place.generativeSummary.disclosureText, 
        //@ts-ignore
        place.generativeSummary.flagContentURI);
    }
    // --- 2. Review Summary ---
    //@ts-ignore
    if (place.reviewSummary?.text) {
        createTab('Reviews', 
        //@ts-ignore
        place.reviewSummary.text, 
        //@ts-ignore
        place.reviewSummary.disclosureText, 
        //@ts-ignore
        place.reviewSummary.flagContentURI);
    }
    // --- 3. Neighborhood Summary ---
    //@ts-ignore
    if (place.neighborhoodSummary?.overview?.content) {
        createTab('Neighborhood', 
        //@ts-ignore
        place.neighborhoodSummary.overview.content, 
        //@ts-ignore
        place.neighborhoodSummary.disclosureText, 
        //@ts-ignore
        place.neighborhoodSummary.flagContentURI);
    }
    // --- 4. EV Amenity Summary (uses content blocks)) ---
    //@ts-ignore
    if (place.evChargeAmenitySummary) {
        //@ts-ignore
        const evSummary = place.evChargeAmenitySummary;
        const evContainer = document.createDocumentFragment();
        // Helper to build a safe DOM section for EV categories.
        const createSection = (title, text) => {
            const wrapper = document.createElement('div');
            wrapper.style.marginBottom = '15px'; // Or use a CSS class
            const titleEl = document.createElement('strong');
            titleEl.textContent = title;
            const textEl = document.createElement('div');
            textEl.textContent = text;
            wrapper.appendChild(titleEl);
            wrapper.appendChild(textEl);
            return wrapper;
        };
        // Check and append each potential section
        if (evSummary.overview?.content) {
            evContainer.appendChild(createSection('Overview', evSummary.overview.content));
        }
        if (evSummary.coffee?.content) {
            evContainer.appendChild(createSection('Coffee', evSummary.coffee.content));
        }
        if (evSummary.restaurant?.content) {
            evContainer.appendChild(createSection('Food', evSummary.restaurant.content));
        }
        if (evSummary.store?.content) {
            evContainer.appendChild(createSection('Shopping', evSummary.store.content));
        }
        // Only add the tab if the container has children
        if (evContainer.hasChildNodes()) {
            createTab('EV Amenities', evContainer, // Passing a Node instead of string
            evSummary.disclosureText, evSummary.flagContentURI);
        }
    }
    // Safely handle the empty state.
    if (!firstTabActivated) {
        const msg = document.createElement('em');
        msg.textContent =
            'No AI summaries are available for this specific location.';
        summaryContent.replaceChildren(msg);
        aiDisclosure.textContent = '';
    }
}
initMap();index.js

সিএসএস

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

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

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

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

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

.hidden {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

.flag-content-link {
    font-size: 0.75rem;
    color: #666;
    padding: 10px 15px;
    border-top: 1px solid #eee;
}
/* Reuse existing map height */
gmp-map {
    height: 100%;
}

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

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

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

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

.hidden {
    display: none;
}

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

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

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

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

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

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

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

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

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

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

.flag-content-link {
    font-size: 0.75rem;
    color: #666;
    padding: 10px 15px;
}style.css

এইচটিএমএল

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

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

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

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

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

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

নমুনা চেষ্টা করুন

জেএসফিডল.নেট

এআই-চালিত সারসংক্ষেপ হল একটি স্থান বা এলাকার সংক্ষিপ্তসার যা নির্দিষ্ট স্থান, স্থানের আশেপাশের এলাকা এবং স্থানের সাথে সম্পর্কিত পর্যালোচনা সম্পর্কে সহায়ক অন্তর্দৃষ্টি প্রদান করে। এআই-চালিত সারসংক্ষেপ তিনটি ভিন্ন ধরণের:

স্থানের সারাংশ : একটি নির্দিষ্ট স্থানের আইডির জন্য নির্দিষ্ট একটি সংক্ষিপ্ত, ১০০-অক্ষরের ওভারভিউ, যা বিভিন্ন ধরণের ডেটা একত্রিত করে একটি স্থানের একটি উচ্চ-স্তরের স্ন্যাপশটে পরিণত করে।
পর্যালোচনার সারাংশ : শুধুমাত্র ব্যবহারকারীর পর্যালোচনার উপর ভিত্তি করে একটি স্থানের তৈরি সারাংশ।
এলাকার সারাংশ : কোনও স্থানের আশেপাশের এলাকার জন্য তৈরি একটি সারাংশ, যা কাছাকাছি আকর্ষণীয় স্থানগুলি সহ অতিরিক্ত প্রসঙ্গ প্রদান করে। এলাকার সারাংশ দুটি ধরণের হতে পারে:
- আশেপাশের এলাকার সারসংক্ষেপ : premise , street_address এবং আবাসন এবং আবাসন বিভাগের সকল ধরণের স্থানের জন্য কাছাকাছি আকর্ষণীয় স্থানগুলির একটি উচ্চ-স্তরের ওভারভিউ।
- বৈদ্যুতিক যানবাহন চার্জিং স্টেশনের সুযোগ-সুবিধার সারাংশ : electric_vehicle_charging_station টাইপের স্থানগুলির জন্য কাছাকাছি আকর্ষণীয় স্থানগুলির একটি উচ্চ-স্তরের ওভারভিউ।

AI-চালিত সারাংশগুলি পুনরুদ্ধার করুন

AI-চালিত সারাংশগুলি পুনরুদ্ধার এবং প্রদর্শন করতে, এই পদক্ষেপগুলি অনুসরণ করুন:

Places লাইব্রেরি লোড করুন ।

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;
        
```

যেহেতু সব জায়গায় 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-এর নীতি এবং অ্যাট্রিবিউশন দেখুন।

স্থানের সারাংশ

স্থানের সারাংশ হল একটি নির্দিষ্ট স্থান আইডির জন্য নির্দিষ্ট ১০০-অক্ষরের সংক্ষিপ্তসার, যা কোনও স্থানের উচ্চ-স্তরের স্ন্যাপশট প্রদান করে। স্থানের সারাংশগুলি কোনও স্থানে কেনার জন্য উপলব্ধ জনপ্রিয় খাবার, পরিষেবা বা পণ্যগুলিকে হাইলাইট করতে পারে:

"ফোরাম শপস খাবারের দোকান যেখানে একটি নৈমিত্তিক স্থানে ঐতিহ্যবাহী ইতালীয় খাবারের বৃহৎ অংশ পরিবেশন করা হয়।"
"আড়ম্বরপূর্ণ সেলুনে চুল কাটা এবং রঙ করার পাশাপাশি ব্লোআউটের সুবিধা রয়েছে।"
"বড় দোকান যেখানে অনেক বিক্রেতা বিভিন্ন ধরণের ভিনটেজ সাজসজ্জা, আসবাবপত্র এবং পোশাক সরবরাহ করে।"

সংস্কৃতি , বিনোদন এবং বিনোদন , খাদ্য এবং পানীয় , কেনাকাটা , পরিষেবা এবং খেলাধুলা বিভাগগুলির জন্য সমর্থিত প্রকারগুলিতে দেখানো স্থানের ধরণের জন্য স্থানের সারাংশ উপলব্ধ।

নিম্নলিখিত ভাষা এবং অঞ্চলের আগ্রহের বিষয়গুলির জন্য স্থানের সারাংশ সমর্থিত:

ভাষা	অঞ্চল
ইংরেজী	ভারত মার্কিন যুক্তরাষ্ট্র

ভাষা

অঞ্চল

ইংরেজী

ভারত

মার্কিন যুক্তরাষ্ট্র

স্থানের সারাংশের জন্য অনুরোধ করুন

একটি জেনারেটিভ প্লেস সারাংশের অনুরোধ করতে, 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);
}

এলাকার সারাংশ

কোনও স্থানের আশেপাশের এলাকার জন্য এলাকার সারাংশ তৈরি করা হয়। এলাকার সারাংশগুলি কোনও স্থানের জন্য অতিরিক্ত প্রসঙ্গ প্রদান করে, যার মধ্যে কাছাকাছি আকর্ষণীয় স্থানগুলিও অন্তর্ভুক্ত থাকে, যাতে ব্যবহারকারীরা সেখানে পৌঁছানোর পরে কোথায় যেতে হবে এবং কী করতে হবে সে সম্পর্কে আরও সচেতন সিদ্ধান্ত নিতে পারেন। উদাহরণস্বরূপ, কোনও নতুন শহরে যাওয়ার সময়, আশেপাশের এলাকা সম্পর্কে আরও জানতে আপনি কোনও হোটেলের জন্য তৈরি করা পাড়ার সারাংশ দেখতে পারেন:

"সান ফ্রান্সিসকোর এই প্রাণবন্ত এলাকাটি, নর্থ বিচ এবং চায়নাটাউনের মিশ্রণে, ফিনান্সিয়াল ডিস্ট্রিক্টের উত্তর-পশ্চিমে অবস্থিত এবং এখানে সাহিত্যিক ল্যান্ডমার্ক, অনন্য সাংস্কৃতিক আকর্ষণ এবং বৈচিত্র্যময় খাবারের ব্যবস্থা রয়েছে। উল্লেখযোগ্য স্থানগুলির মধ্যে রয়েছে আইকনিক সিটি লাইটস বুকস্টোর, আকর্ষণীয় কেবল কার মিউজিয়াম এবং চায়নাটাউনের ব্যস্ত রাস্তা।"

আপনি যদি বৈদ্যুতিক গাড়ি চার্জ করার কথা ভাবছেন, তাহলে আশেপাশের এলাকা সম্পর্কে আরও জানতে বৈদ্যুতিক গাড়ির চার্জিং স্টেশনের জন্য তৈরি করা সারাংশ দেখতে পারেন:

"এই এলাকাটি ৯ মিনিটের হাঁটার দূরত্বে স্টারবাকস, সুশি জিন এবং সেফওয়ে সহ বিভিন্ন ধরণের খাবারের বিকল্প অফার করে।"

এলাকার বর্ণনার পাশাপাশি, প্রতিক্রিয়াটিতে বর্ণনায় উল্লেখিত স্থানগুলির জন্য Place উদাহরণগুলির একটি তালিকাও রয়েছে; প্রতিটি স্থানের জন্য আরও বিশদ জানতে এই Place উদাহরণগুলিতে fetchFields() কল করুন।

এআই-চালিত এলাকার সারাংশ দুই ধরণের:

আশেপাশের এলাকার সারসংক্ষেপ : premise , street_address এবং আবাসন এবং আবাসন বিভাগের সকল ধরণের স্থানের জন্য কাছাকাছি আকর্ষণীয় স্থানগুলির একটি উচ্চ-স্তরের ওভারভিউ।
বৈদ্যুতিক যানবাহন চার্জিং স্টেশনের সুযোগ-সুবিধার সারাংশ : electric_vehicle_charging_station টাইপের স্থানগুলির জন্য কাছাকাছি আকর্ষণীয় স্থানগুলির একটি উচ্চ-স্তরের ওভারভিউ।

নিম্নলিখিত ভাষা এবং অঞ্চলের আগ্রহের বিষয়গুলির জন্য এলাকার সারাংশ সমর্থিত:

ভাষা	অঞ্চল
ইংরেজী	মার্কিন যুক্তরাষ্ট্র

এলাকার সারাংশের জন্য অনুরোধ করুন

আপনি premise , street_address এবং Housing এবং Lodging বিভাগের সকল ধরণের স্থানের জন্য পাড়ার সারাংশের জন্য অনুরোধ করতে পারেন। পাড়ার সারাংশের জন্য অনুরোধ করতে, 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 ; এই কারণে ডেটা স্ট্রাকচার হল বস্তুর একটি অ্যারে, প্রতিটিতে একটি সারাংশ থাকে। বৈদ্যুতিক যানবাহন চার্জিং স্টেশন সুবিধার সারাংশের জন্য অনুরোধ করতে, 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);
}