Place Autocomplete Data API

ইউরোপীয় অর্থনৈতিক অঞ্চল (EEA)-এর ডেভেলপার

আপনার বিলিং ঠিকানা ইউরোপীয় অর্থনৈতিক অঞ্চলে হলে, ৮ জুলাই ২০২৫ থেকে কার্যকর, Google Maps Platform EEA পরিষেবার শর্তাবলী আপনার পরিষেবা ব্যবহারের ক্ষেত্রে প্রযোজ্য হবে। অঞ্চল অনুযায়ী কার্যকারিতা আলাদা হয়। আরও জানুন।

প্লেস অটোকমপ্লিট ডেটা API আপনাকে প্রোগ্রাম্যাটিকভাবে জায়গার পূর্বাভাস পেতে দেয়, যাতে আপনি অটোকমপ্লিট উইজেটের চেয়ে আরও সূক্ষ্মভাবে নিয়ন্ত্রণ করে কাস্টমাইজ করা অটোকমপ্লিট অভিজ্ঞতা তৈরি করতে পারেন। এই গাইডে আপনি শিখবেন কীভাবে ব্যবহারকারীর কোয়েরির উপর ভিত্তি করে অটোকমপ্লিট অনুরোধ করতে Place Autocomplete Data API ব্যবহার করতে হয়।

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

অটো-কমপ্লিট অনুরোধ

অটোমেটিক সম্পূর্ণ করার অনুরোধ কোয়েরি ইনপুট স্ট্রিং নেয় এবং জায়গার পূর্বাভাসের তালিকা দেখায়। অটোমেটিক সম্পূর্ণ করার অনুরোধ করতে, fetchAutocompleteSuggestions()-এ কল করুন এবং প্রয়োজনীয় প্রপার্টি সহ অনুরোধ পাঠান। input প্রপার্টিতে সার্চ করার জন্য স্ট্রিং থাকে; সাধারণত কোনও অ্যাপ্লিকেশনে এই ভ্যালু আপডেট করা হয় যখন ব্যবহারকারী কোনও কোয়েরি টাইপ করেন। অনুরোধে একটি sessionToken অন্তর্ভুক্ত থাকতে হবে, যা বিলিংয়ের উদ্দেশ্যে ব্যবহৃত হয়।

নিম্নলিখিত স্নিপেট থেকে বোঝা যায় যে কীভাবে অনুরোধের বডি তৈরি করতে হয় এবং সেশন টোকেন যোগ করতে হয়, তারপর PlacePrediction-এর তালিকা পেতে fetchAutocompleteSuggestions()-কে কল করতে হয়।

// Add an initial request body.
const request = {
    input: 'Tadi',
    locationRestriction: {
        west: -122.44,
        north: 37.8,
        east: -122.39,
        south: 37.78,
    },
    origin: { lat: 37.7893, lng: -122.4039 },
    includedPrimaryTypes: ['restaurant'],
    language: 'en-US',
    region: 'us',
};

// Create a session token.
const token = new AutocompleteSessionToken();
// Add the token to the request.
request.sessionToken = token;
index.js

অটোকমপ্লিট পূর্বাভাসের উপর সীমাবদ্ধতা আরোপ করুন

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

ফলাফল সীমাবদ্ধ করার ফলে অটোকমপ্লিট উইজেট সীমাবদ্ধ এলাকার বাইরে থাকা যেকোনও ফলাফলকে উপেক্ষা করে। সাধারণত ম্যাপ বাউন্ডে ফলাফল সীমাবদ্ধ করা হয়। ফলাফল বায়াসিং অটোকমপ্লিট উইজেটকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখাতে বাধ্য করে, তবে কিছু মিল সেই এলাকার বাইরেও হতে পারে।

গন্তব্যের জিওডেসিক দূরত্ব গণনা করার জন্য origin প্রপার্টি ব্যবহার করে উৎস বিন্দু নির্দিষ্ট করুন। এই ভ্যালু বাদ দেওয়া হলে, দূরত্ব দেখানো হয় না।

includedPrimaryTypes প্রপার্টি ব্যবহার করে সর্বাধিক পাঁচটি জায়গার ধরন উল্লেখ করুন। কোনও ধরন উল্লেখ করা না থাকলে, সব ধরনের জায়গা দেখানো হবে।

API রেফারেন্স দেখুন

জায়গার বিবরণ পান

জায়গার পূর্বাভাস সংক্রান্ত ফলাফল থেকে Place অবজেক্ট ফিরিয়ে আনতে, প্রথমে toPlace() কল করুন, তারপর ফলাফল হিসেবে পাওয়া Place অবজেক্টে fetchFields() কল করুন (জায়গার পূর্বাভাস থেকে সেশন আইডি অটোমেটিক অন্তর্ভুক্ত করা হয়)। fetchFields() কল করলে অটোমেটিক সম্পূর্ণ হওয়ার সেশন শেষ হয়ে যায়।

const place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
await place.fetchFields({
    fields: ['displayName', 'formattedAddress'],
});

const placeInfo = document.getElementById('prediction');
placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
index.js

সেশন টোকেন

সেশন টোকেন বিলিংয়ের উদ্দেশ্যে ব্যবহারকারীর অটোমেটিক সম্পূর্ণ হওয়া সার্চের কোয়েরি ও বেছে নেওয়ার ধাপগুলিকে একটি পৃথক সেশনে গ্রুপ করে। ব্যবহারকারী টাইপ করা শুরু করলে সেশন শুরু হয়। ব্যবহারকারী কোনও জায়গা বেছে নিলে এবং জায়গার বিবরণ সংক্রান্ত কল করা হলে সেশন শেষ হয়।

নতুন সেশন টোকেন তৈরি করে অনুরোধে যোগ করতে, AutocompleteSessionToken-এর ইনস্ট্যান্স তৈরি করুন, তারপর অনুরোধের sessionToken প্রপার্টি সেট করুন যাতে নিম্নলিখিত স্নিপেটে দেখানো টোকেন ব্যবহার করা যায়:

// Create a session token.
const token = new AutocompleteSessionToken();
// Add the token to the request.
request.sessionToken = token;
index.js

fetchFields() কল করা হলে সেশন শেষ হয়। Place ইনস্ট্যান্স তৈরি করার পরে, আপনাকে fetchFields()-এ সেশন টোকেন পাস করতে হবে না কারণ এটি অটোমেটিক ম্যানেজ করা হয়।

await place.fetchFields({
    fields: ['displayName', 'formattedAddress'],
});
index.js

AutocompleteSessionToken-এর নতুন ইনস্ট্যান্স তৈরি করে পরবর্তী সেশনের জন্য সেশন টোকেন তৈরি করুন।

সেশন টোকেন সংক্রান্ত সাজেশন:

• সব 'জায়গা অটোমেটিক সম্পূর্ণ করা' কলের জন্য সেশন টোকেন ব্যবহার করুন।
• প্রতিটি সেশনের জন্য নতুন টোকেন জেনারেট করুন।
• প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করুন। একাধিক সেশনের জন্য একই টোকেন ব্যবহার করলে প্রতিটি অনুরোধের জন্য আলাদাভাবে বিল করা হবে।

আপনি চাইলে অনুরোধ থেকে অটোমেটিক সম্পূর্ণ হওয়া সেশন টোকেন বাদ দিতে পারেন। সেশন টোকেন বাদ দেওয়া হলে, প্রতিটি অনুরোধের জন্য আলাদাভাবে বিল করা হয়, যা অটোমেটিক সম্পূর্ণ করা - প্রতিটি অনুরোধের জন্য SKU ট্রিগার করে। আপনি সেশন টোকেন আবার ব্যবহার করলে, সেশনটি অবৈধ বলে বিবেচিত হয় এবং অনুরোধের জন্য চার্জ করা হয় যেন কোনও সেশন টোকেন প্রদান করা হয়নি।

উদাহরণ

ব্যবহারকারী কোনও কোয়েরি টাইপ করলে, প্রতি কয়েকবার কীবোর্ড স্ট্রোকের (প্রতিটি অক্ষর নয়) পরে অটোকমপ্লিট অনুরোধ কল করা হয় এবং সম্ভাব্য ফলাফলের একটি তালিকা দেখানো হয়। ব্যবহারকারী ফলাফল তালিকা থেকে কোনও বিকল্প বেছে নিলে, সেটি একটি অনুরোধ হিসেবে গণনা করা হয় এবং সার্চ করার সময় করা সব অনুরোধ একসাথে করে একটি অনুরোধ হিসেবে গণনা করা হয়। ব্যবহারকারী কোনও জায়গা বেছে নিলে, সার্চ কোয়েরি বিনা খরচে উপলভ্য হয় এবং শুধু জায়গার ডেটার জন্য চার্জ করা হয়। সেশন শুরু হওয়ার কয়েক মিনিটের মধ্যে ব্যবহারকারী কোনও কিছু বেছে না নিলে, শুধু সার্চ কোয়েরির জন্য চার্জ করা হয়।

অ্যাপের দৃষ্টিকোণ থেকে, ইভেন্টের ফ্লো এইভাবে চলে:

1. "প্যারিস, ফ্রান্স" সার্চ করার জন্য একজন ব্যবহারকারী কোয়েরি টাইপ করা শুরু করেন।
2. ব্যবহারকারীর ইনপুট শনাক্ত করার পরে, অ্যাপটি একটি নতুন সেশন টোকেন, "টোকেন A" তৈরি করে।
3. ব্যবহারকারী টাইপ করার সময়, API প্রতি কয়েকটি অক্ষর অন্তর একটি অটোমেটিক সম্পূর্ণ করার অনুরোধ করে, প্রতিটির জন্য সম্ভাব্য ফলাফলের একটি নতুন তালিকা দেখায়:
   "P"
   "Par"
   "Paris,"
   "Paris, Fr"
   
4. ব্যবহারকারী বেছে নিলে:
   • কোয়েরি থেকে পাওয়া সব অনুরোধ গ্রুপ করা হয় এবং "টোকেন A" দ্বারা দেখানো সেশনে একটি অনুরোধ হিসেবে যোগ করা হয়।
   • ব্যবহারকারীর বেছে নেওয়াকে জায়গার বিবরণ সংক্রান্ত অনুরোধ হিসেবে গণ্য করা হয় এবং "টোকেন A" দ্বারা উপস্থাপিত সেশনে যোগ করা হয়।
5. সেশন শেষ হয়ে গেছে এবং অ্যাপ "টোকেন A" বাতিল করে দিয়েছে।

সেশনের জন্য কীভাবে বিল করা হয় সেই সম্পর্কে জানুন

সম্পূর্ণ উদাহরণ কোড

এই বিভাগে সম্পূর্ণ উদাহরণ রয়েছে যা দেখায় যে কীভাবে Place Autocomplete Data API ব্যবহার করতে হয়।

জায়গা অটোমেটিক সম্পূর্ণ করার পূর্বাভাষ

নিচের উদাহরণে দেখানো হয়েছে যে কীভাবে ইনপুট "Tadi"-এর জন্য fetchAutocompleteSuggestions() কল করা হয়, তারপর প্রথম পূর্বাভাসের ফলাফলে toPlace() কল করা হয় এবং তারপরে জায়গার বিবরণ পেতে fetchFields()-এ কল করা হয়।

TypeScript

async function init() {
    const { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const request: google.maps.places.AutocompleteRequest = {
        input: 'Tadi',
        locationRestriction: {
            west: -122.44,
            north: 37.8,
            east: -122.39,
            south: 37.78,
        },
        origin: { lat: 37.7893, lng: -122.4039 },
        includedPrimaryTypes: ['restaurant'],
        language: 'en-US',
        region: 'us',
    };

    // Create a session token.
    const token = new AutocompleteSessionToken();
    // Add the token to the request.
    request.sessionToken = token;
    // Fetch autocomplete suggestions.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    const title = document.getElementById('title')!;
    title.appendChild(
        document.createTextNode(
            'Query predictions for "' + request.input + '":'
        )
    );

    const resultsElement = document.getElementById('results')!;

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        // Create a new list element.
        const listItem = document.createElement('li');

        listItem.appendChild(
            document.createTextNode(placePrediction!.text.toString())
        );
        resultsElement.appendChild(listItem);
    }

    const place = suggestions[0].placePrediction!.toPlace(); // Get first predicted place.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    const placeInfo = document.getElementById('prediction')!;
    placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

async function init() {
    const { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const request = {
        input: 'Tadi',
        locationRestriction: {
            west: -122.44,
            north: 37.8,
            east: -122.39,
            south: 37.78,
        },
        origin: { lat: 37.7893, lng: -122.4039 },
        includedPrimaryTypes: ['restaurant'],
        language: 'en-US',
        region: 'us',
    };

    // Create a session token.
    const token = new AutocompleteSessionToken();
    // Add the token to the request.
    request.sessionToken = token;
    // Fetch autocomplete suggestions.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    const title = document.getElementById('title');
    title.appendChild(
        document.createTextNode(
            'Query predictions for "' + request.input + '":'
        )
    );

    const resultsElement = document.getElementById('results');

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        // Create a new list element.
        const listItem = document.createElement('li');

        listItem.appendChild(
            document.createTextNode(placePrediction.text.toString())
        );
        resultsElement.appendChild(listItem);
    }

    const place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    const placeInfo = document.getElementById('prediction');
    placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete Data API Predictions</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>
        <div id="title"></div>
        <ul id="results"></ul>
        <p><span id="prediction"></span></p>
        <img
            class="powered-by-google"
            src="./powered_by_google_on_white.png"
            alt="Powered by Google" />
    </body>
</html>
index.html

সেশনের সাথে জায়গা অটোমেটিক সম্পূর্ণ করার টাইপ-অ্যাহেড

এই উদাহরণে নিম্নলিখিত ধারণাগুলি দেখানো হয়েছে:

• ব্যবহারকারীর কোয়েরির উপর ভিত্তি করে fetchAutocompleteSuggestions() কল করা এবং উত্তরে সম্ভাব্য জায়গার তালিকা দেখানো।
• চূড়ান্ত জায়গার বিবরণ সংক্রান্ত অনুরোধের সাথে ব্যবহারকারীর কোয়েরি গ্রুপ করতে সেশন টোকেন ব্যবহার করা।
• বেছে নেওয়া জায়গার বিবরণ ফিরিয়ে আনা হচ্ছে এবং মার্কার দেখানো হচ্ছে।
• gmp-map এলিমেন্টে UI এলিমেন্ট নেস্ট করতে কন্ট্রোল স্লটিং ব্যবহার করা।

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
const titleElement = document.querySelector<HTMLElement>('.title')!;
const resultsContainerElement = document.querySelector('.results')!;
const inputElement = document.querySelector('input')!;
const tokenStatusElement = document.querySelector('.token-status')!;
let newestRequestId = 0;
let tokenCount = 0;

// Create an initial request body.
const request: google.maps.places.AutocompleteRequest = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};

async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Update request center and bounds when the map bounds change.
    innerMap.addListener('bounds_changed', () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

    inputElement.addEventListener('input', makeAutocompleteRequest);
}

async function makeAutocompleteRequest(inputEvent: Event) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;

    const { AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    if (!(inputEvent.target as HTMLInputElement)?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }

    // Add the latest char sequence to the request.
    request.input = (inputEvent.target as HTMLInputElement).value;

    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId) return;

    titleElement.innerText = `Place predictions for "${request.input}"`;

    // Clear the list first.
    resultsContainerElement.replaceChildren();

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        if (!placePrediction) {
            continue;
        }

        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            void onPlaceSelected(placePrediction.toPlace());
        });

        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');

        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place: google.maps.places.Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });

    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';

    await refreshToken();

    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }

    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}

// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } =
        await google.maps.importLibrary('places');

    // Increment the token counter.
    tokenCount++;

    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}

void init();
index.ts

মনে রাখবেন: TypeScript ও Google Maps ব্যবহার করার ব্যাপারে গাইড পড়ুন।

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
let marker;
const titleElement = document.querySelector('.title');
const resultsContainerElement = document.querySelector('.results');
const inputElement = document.querySelector('input');
const tokenStatusElement = document.querySelector('.token-status');
let newestRequestId = 0;
let tokenCount = 0;

// Create an initial request body.
const request = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};

async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Update request center and bounds when the map bounds change.
    innerMap.addListener('bounds_changed', () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

    inputElement.addEventListener('input', makeAutocompleteRequest);
}

async function makeAutocompleteRequest(inputEvent) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;

    const { AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    if (!inputEvent.target?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }

    // Add the latest char sequence to the request.
    request.input = inputEvent.target.value;

    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId) return;

    titleElement.innerText = `Place predictions for "${request.input}"`;

    // Clear the list first.
    resultsContainerElement.replaceChildren();

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        if (!placePrediction) {
            continue;
        }

        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            void onPlaceSelected(placePrediction.toPlace());
        });

        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');

        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });

    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';

    await refreshToken();

    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }

    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}

// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } =
        await google.maps.importLibrary('places');

    // Increment the token counter.
    tokenCount++;

    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}

void init();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-button {
    height: 3rem;
    width: 100%;
    background-color: transparent;
    text-align: left;
    border: none;
    cursor: pointer;
}

.place-button:focus-visible {
    outline: 2px solid #0056b3;
    border-radius: 2px;
}

.input {
    width: 300px;
    font-size: small;
    margin-bottom: 1rem;
}

/* Styles for the floating panel */
.controls {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    font-size: small;
    margin: 12px;
    padding: 1rem;
}

.title {
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.results {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.results li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.results li:hover {
    background-color: #eee;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete Data API Session</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.7893, -122.4039" zoom="12" map-id="DEMO_MAP_ID">
            <div class="controls" slot="control-inline-start-block-start">
                <input
                    type="text"
                    class="input"
                    placeholder="Search for a place..."
                    autocomplete="off" /><!-- Turn off the input's own autocomplete (not supported by all browsers).-->
                <div class="token-status"></div>
                <div class="title"></div>
                <ol class="results"></ol>
            </div>
        </gmp-map>
    </body>
</html>
index.html

অটো-কমপ্লিট (নতুন) অপ্টিমাইজেশন

এই বিভাগে, অটোকমপ্লিট (নতুন) পরিষেবা থেকে সর্বাধিক সুবিধা পেতে আপনাকে সাহায্য করার জন্য পেশাদার পদ্ধতিগুলি বর্ণনা করা হয়েছে।

এখানে কিছু সাধারণ নির্দেশিকা দেওয়া হল:

• কাজ করে এমন ইউজার ইন্টারফেস ডেভেলপ করার সবচেয়ে দ্রুত উপায় হল Maps JavaScript API অটোকমপ্লিট (নতুন) উইজেট, Android-এর জন্য Places SDK অটোকমপ্লিট (নতুন) উইজেট, অথবা iOS-এর জন্য Places SDK অটোকমপ্লিট (নতুন) উইজেট ব্যবহার করা।
• শুরু থেকেই অটোমেটিক সম্পূর্ণ হওয়া (নতুন) ডেটা ফিল্ড সম্পর্কে প্রয়োজনীয় তথ্য জেনে নিন।
• লোকেশন বায়াসিং এবং লোকেশন সংক্রান্ত বিধিনিষেধের ফিল্ডগুলি ঐচ্ছিক হলেও, অটো-কমপ্লিট পারফর্ম্যান্সের উপর উল্লেখযোগ্য প্রভাব ফেলতে পারে।
• API কোনও সমস্যা রিটার্ন করলে, আপনার অ্যাপ যাতে ঠিকভাবে কাজ করা বন্ধ করে দেয় তা নিশ্চিত করতে সমস্যা ম্যানেজ করার সুবিধা ব্যবহার করুন।
• কোনও কিছু বেছে না নেওয়া হলে আপনার অ্যাপ যেন সেটি ম্যানেজ করতে পারে এবং ব্যবহারকারীকে চালিয়ে যাওয়ার উপায় অফার করে তা নিশ্চিত করুন।

খরচ অপ্টিমাইজ করার পেশাদার পদ্ধতি

বেসিক খরচ অপ্টিমাইজেশন

Autocomplete (New) পরিষেবা ব্যবহারের খরচ অপ্টিমাইজ করতে, জায়গার বিবরণ (New) এবং Autocomplete (New) উইজেটে ফিল্ড মাস্ক ব্যবহার করুন যাতে শুধু আপনার প্রয়োজনীয় Autocomplete (New) ডেটা ফিল্ড ফেরত পাওয়া যায়।

উন্নত খরচ অপ্টিমাইজেশন

অ্যাক্সেস করতে Autocomplete (New)-এর প্রোগ্রাম্যাটিক ইমপ্লিমেন্টেশন বিবেচনা করুন SKU: Autocomplete Request-এর দাম এবং Place Details (New)-এর পরিবর্তে বেছে নেওয়া জায়গা সম্পর্কে Geocoding API ফলাফল অনুরোধ করুন। Geocoding API-এর সাথে পেয়ার করা প্রতি-অনুরোধের মূল্য সেশন-ভিত্তিক (সেশন-ভিত্তিক) মূল্যের চেয়ে বেশি সাশ্রয়ী হয় যদি নিম্নলিখিত দুটি শর্তই পূরণ হয়:

• ব্যবহারকারীর বেছে নেওয়া জায়গার অক্ষাংশ ও দ্রাঘিমাংশ বা ঠিকানা জানতে চাইলে, Geocoding API এই তথ্য Place Details (New) কলের চেয়ে কম খরচে প্রদান করে।
• ব্যবহারকারীরা যদি গড়ে চারটি অটোকমপ্লিট (নতুন) পূর্বাভাসের অনুরোধ বা তার কমের মধ্যে একটি অটোকমপ্লিট পূর্বাভাস বেছে নেন, তাহলে প্রতি-অনুরোধের মূল্য প্রতি-সেশনের মূল্যের চেয়ে বেশি সাশ্রয়ী হতে পারে।

আপনার প্রয়োজন অনুযায়ী অটোমেটিক সম্পূর্ণ (নতুন) প্রয়োগ বেছে নেওয়ার ব্যাপারে সাহায্য পেতে, নিম্নলিখিত প্রশ্নের উত্তর অনুযায়ী ট্যাব বেছে নিন।

আপনার অ্যাপ্লিকেশনে কি বেছে নেওয়া পূর্বাভাসের ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ ছাড়া অন্য কোনও তথ্যের প্রয়োজন আছে?

হ্যাঁ, আরও বিবরণ প্রয়োজন

জায়গার বিবরণ (নতুন) সহ সেশন-ভিত্তিক অটোমেটিক সম্পূর্ণ (নতুন) ব্যবহার করুন।
যেহেতু আপনার অ্যাপ্লিকেশনের জন্য জায়গার বিবরণ (নতুন) প্রয়োজন, যেমন জায়গার নাম, ব্যবসার স্ট্যাটাস বা খোলা থাকার সময়, তাই আপনার Autocomplete (নতুন) ইমপ্লিমেন্টেশনে সেশন টোকেন ব্যবহার করা উচিত (প্রোগ্রাম্যাটিক্যালি বা JavaScript, Android বা iOS উইজেটে বিল্ট-ইন) প্রতি সেশন এবং প্রযোজ্য Places SKU, আপনি কোন কোন জায়গার ডেটা ফিল্ডের জন্য অনুরোধ করছেন তার উপর নির্ভর করে।^১

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android, অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে অটোকমপ্লিট (নতুন) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর ভিত্তি করে জায়গার বিবরণ (নতুন) অনুরোধ অন্তর্ভুক্ত। আপনার প্রয়োজনীয় fields প্যারামিটার উল্লেখ করতে ভুলবেন না, যাতে আপনি শুধু Autocomplete (নতুন) ডেটা ফিল্ড অনুরোধ করছেন তা নিশ্চিত করা যায়।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার অটো-কমপ্লিট (নতুন) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য Place Details (New) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

1. অটোমেটিক সম্পূর্ণ করা (নতুন) উত্তর থেকে পাওয়া জায়গার আইডি
2. অটোকমপ্লিট (নতুন) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
3. fields প্যারামিটারটি আপনার প্রয়োজনীয় অটোফিল (নতুন) ডেটা ফিল্ড নির্দিষ্ট করে

না, শুধু ঠিকানা ও লোকেশন প্রয়োজন

আপনার Autocomplete (New) ব্যবহারের পারফর্ম্যান্সের উপর নির্ভর করে, আপনার অ্যাপ্লিকেশনের জন্য Geocoding API, Place Details (New)-এর চেয়ে বেশি সাশ্রয়ী বিকল্প হতে পারে। ব্যবহারকারী কী লিখছেন, অ্যাপ্লিকেশনটি কোথায় ব্যবহার করা হচ্ছে এবং পারফর্ম্যান্স অপ্টিমাইজেশন সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করা হয়েছে কিনা তার উপর নির্ভর করে প্রতিটি অ্যাপ্লিকেশনের অটো-কমপ্লিট (নতুন) ফিচারের কার্যকারিতা পরিবর্তিত হয়।

নিম্নলিখিত প্রশ্নের উত্তর দিতে, আপনার অ্যাপ্লিকেশনে অটোকমপ্লিট (নতুন) পূর্বাভাস বেছে নেওয়ার আগে একজন ব্যবহারকারী গড়ে কতগুলি অক্ষর টাইপ করেন তা বিশ্লেষণ করুন।

আপনার ব্যবহারকারীরা কি গড়ে চার বা তার কম অনুরোধে একটি Autocomplete (New) পূর্বাভাস বেছে নেন?

হ্যাঁ

সেশন টোকেন ছাড়াই প্রোগ্রাম্যাটিকভাবে অটো-কমপ্লিট (নতুন) প্রয়োগ করুন এবং বেছে নেওয়া জায়গার পূর্বাভাসের উপর Geocoding API কল করুন।
Geocoding API ঠিকানা এবং অক্ষাংশ/দ্রাঘিমাংশ কোঅর্ডিনেট প্রদান করে। চারটি অটোমেটিক সম্পূর্ণ করার অনুরোধ অনুরোধ এবং বেছে নেওয়া জায়গার পূর্বাভাসের জন্য Geocoding API কল করার খরচ সেশন প্রতি অটোমেটিক সম্পূর্ণ করার (নতুন) খরচের চেয়ে কম।^১

আপনার ব্যবহারকারীরা যাতে আরও কম অক্ষর টাইপ করেই তাদের কাঙ্ক্ষিত পূর্বাভাস পেতে পারেন, তার জন্য পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করার কথা বিবেচনা করুন।

না

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

উইজেট প্রয়োগ করা
সেশন ম্যানেজমেন্ট অটোমেটিক JavaScript, Android অথবা iOS উইজেটে তৈরি করা হয়। এর মধ্যে অটোকমপ্লিট (নতুন) অনুরোধ এবং বেছে নেওয়া পূর্বাভাসের উপর জায়গার বিবরণ (নতুন) অনুরোধ অন্তর্ভুক্ত। আপনার প্রয়োজনীয় ফিল্ডের জন্য অনুরোধ করছেন কিনা তা নিশ্চিত করতে fields প্যারামিটার উল্লেখ করতে ভুলবেন না।

প্রোগ্রাম্যাটিক প্রয়োগ
আপনার অটো-কমপ্লিট (নতুন) অনুরোধের সাথে সেশন টোকেন ব্যবহার করুন। বেছে নেওয়া পূর্বাভাসের জন্য জায়গার বিবরণ (নতুন) সংক্রান্ত অনুরোধ করার সময়, নিম্নলিখিত প্যারামিটারগুলি অন্তর্ভুক্ত করুন:

1. অটোমেটিক সম্পূর্ণ করা (নতুন) উত্তর থেকে পাওয়া জায়গার আইডি
2. অটোকমপ্লিট (নতুন) অনুরোধে সেশন টোকেন ব্যবহার করা হয়েছে
3. fields প্যারামিটার ঠিকানা ও জ্যামিতির মতো ফিল্ড নির্দিষ্ট করে

অটোকমপ্লিট (নতুন) অনুরোধে দেরি করার কথা বিবেচনা করুন
আপনি এমন কৌশল অবলম্বন করতে পারেন, যেমন ব্যবহারকারী প্রথম তিন বা চারটি অক্ষর টাইপ না করা পর্যন্ত অটোকমপ্লিট (নতুন) অনুরোধে দেরি করা, যাতে আপনার অ্যাপ্লিকেশন কম অনুরোধ করে। যেমন, ব্যবহারকারী তৃতীয় অক্ষর টাইপ করার পরে প্রতিটি অক্ষরের জন্য অটোকমপ্লিট (নতুন) অনুরোধ করার অর্থ হল, ব্যবহারকারী সাতটি অক্ষর টাইপ করে একটি পূর্বাভাস বেছে নিলে, যার জন্য আপনি একটি Geocoding API অনুরোধ করেন, তাহলে মোট খরচ হবে ৪টি অটোকমপ্লিট (নতুন) প্রতি অনুরোধ + Geocoding-এর জন্য।^১

অনুরোধে দেরি করার ফলে আপনার গড় প্রোগ্র্যামাটিক অনুরোধ চারটির কম হলে, আপনি Geocoding API-এর সাথে পারফর্ম্যান্ট অটোমেটিক সম্পূর্ণ (নতুন) প্রয়োগ করার নির্দেশিকা অনুসরণ করতে পারেন। মনে রাখবেন, অনুরোধ পাঠাতে দেরি হলে ব্যবহারকারী মনে করতে পারেন যে লেটেন্সি হচ্ছে, কারণ তিনি হয়ত প্রতিটি নতুন কীস্ট্রোকের সাথে সাথে সাজেশন দেখতে চান।

আপনার ব্যবহারকারীরা যাতে কম অক্ষর টাইপ করেই তাদের প্রয়োজনীয় পূর্বাভাস পেতে পারেন, তার জন্য পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি প্রয়োগ করার কথা বিবেচনা করুন।

---

1. খরচের জন্য, Google Maps Platform-এর দামের তালিকা দেখুন।

পারফর্ম্যান্স সংক্রান্ত পেশাদার পদ্ধতি

নিচের নির্দেশিকায় অটোমেটিক সম্পূর্ণ করা (নতুন) ফিচারের পারফর্ম্যান্স অপ্টিমাইজ করার উপায় বর্ণনা করা হয়েছে:

• আপনার Autocomplete (নতুন) ইমপ্লিমেন্টেশনে দেশ সংক্রান্ত বিধিনিষেধ, লোকেশন বায়াসিং এবং (প্রোগ্রাম্যাটিক ইমপ্লিমেন্টেশনের জন্য) পছন্দের ভাষা যোগ করুন। উইজেটের ক্ষেত্রে ভাষার পছন্দ সেট করার প্রয়োজন নেই কারণ এটি ব্যবহারকারীর ব্রাউজার বা মোবাইল ডিভাইস থেকে ভাষার পছন্দ বেছে নেয়।
• অটোমেটিক সম্পূর্ণ (নতুন) ফিচারের সাথে ম্যাপ থাকলে, আপনি ম্যাপ ভিউপোর্ট অনুযায়ী লোকেশন বায়াস করতে পারবেন।
• এমন পরিস্থিতিতে যখন কোনও ব্যবহারকারী অটোকমপ্লিট (নতুন) পূর্বাভাসের মধ্যে থেকে কোনও একটি বেছে নেন না, সাধারণত কারণ সেইসব পূর্বাভাসের মধ্যে কোনওটিই কাঙ্ক্ষিত ফলাফল-ঠিকানা নয়, আপনি আরও প্রাসঙ্গিক ফলাফল পাওয়ার চেষ্টা করতে ব্যবহারকারীর আসল ইনপুট আবার ব্যবহার করতে পারবেন:
  • আপনি যদি আশা করেন যে ব্যবহারকারী শুধুমাত্র ঠিকানা সংক্রান্ত তথ্য লিখবেন, তাহলে Geocoding API-তে কল করার সময় ব্যবহারকারীর আসল ইনপুট আবার ব্যবহার করুন।
  • ব্যবহারকারী নাম বা ঠিকানা দিয়ে নির্দিষ্ট কোনও জায়গা সার্চ করবেন বলে আপনি আশা করলে, 'জায়গার বিবরণ (নতুন)' সংক্রান্ত অনুরোধ ব্যবহার করুন। ফলাফল শুধুমাত্র নির্দিষ্ট অঞ্চলে প্রত্যাশিত হলে, লোকেশন বায়াসিং ব্যবহার করুন।
  অন্যান্য পরিস্থিতিতে Geocoding API-তে ফিরে যাওয়া সবচেয়ে ভালো, যার মধ্যে রয়েছে:
  • ব্যবহারকারীরা সাবপ্রিমাইজ ঠিকানা ইনপুট করছেন, যেমন কোনও বিল্ডিংয়ের মধ্যে নির্দিষ্ট ইউনিট বা অ্যাপার্টমেন্টের ঠিকানা। যেমন, চেক প্রজাতন্ত্রের ঠিকানা "Stroupežnického 3191/17, Praha" অটোমেটিক সম্পূর্ণ (নতুন) ফিচারে আংশিক পূর্বাভাস দেখায়।
  • ব্যবহারকারীরা নিউ ইয়র্ক সিটিতে "23-30 29th St, Queens" বা হাওয়াইয়ের কাউয়াই দ্বীপে "47-380 Kamehameha Hwy, Kaneohe"-এর মতো রোড-সেগমেন্ট প্রিফিক্স সহ ঠিকানা ইনপুট করছেন।

লোকেশন বায়াসিং

location প্যারামিটার এবং radius প্যারামিটার পাস করে নির্দিষ্ট এলাকার জন্য পক্ষপাতমূলক ফলাফল। এটি Autocomplete (নতুন) ফিচারকে নির্দিষ্ট এলাকার মধ্যে ফলাফল দেখানোর জন্য অগ্রাধিকার দিতে নির্দেশ দেয়। নির্দিষ্ট করা এলাকার বাইরের ফলাফল এখনও দেখানো হতে পারে। আপনি includedRegionCodes প্যারামিটার ব্যবহার করে ফলাফল ফিল্টার করতে পারেন যাতে শুধুমাত্র নির্দিষ্ট দেশের মধ্যে থাকা জায়গাগুলি দেখানো হয়।

সতর্কতা: radius প্রদান করা না হলে, location প্যারামিটার উপেক্ষা করা হয়।

সার্চের এলাকা বড় হলে, সাধারণত প্রতিষ্ঠানের ফলাফল সার্চ ফলাফলে দেখানোর মতো যথেষ্ট উচ্চ র‍্যাঙ্ক পায় না। আপনি যদি মিশ্র প্রতিষ্ঠান/জিওকোড ফলাফলে প্রতিষ্ঠান দেখাতে চান, তাহলে আপনি একটি ছোট ব্যাসার্ধ নির্দিষ্ট করতে পারেন। বিকল্প হিসেবে, types=establishment ব্যবহার করে শুধু প্রতিষ্ঠান সংক্রান্ত ফলাফল দেখুন।

লোকেশন সংক্রান্ত বিধিনিষেধ

locationRestriction প্যারামিটার পাস করে নির্দিষ্ট এলাকায় ফলাফল সীমিত করুন।

এছাড়াও, আপনি location এবং radius প্যারামিটার দ্বারা নির্ধারিত অঞ্চলে ফলাফল সীমাবদ্ধ করতে পারেন, এর জন্য locationRestriction প্যারামিটার যোগ করতে হবে। এটি Autocomplete (New)-কে শুধুমাত্র সেই অঞ্চলের মধ্যে ফলাফল দেখানোর নির্দেশ দেয়।

মনে রাখবেন: লোকেশন সংক্রান্ত বিধিনিষেধ শুধুমাত্র সম্পূর্ণ রুটের ক্ষেত্রে প্রযোজ্য। লোকেশন সংক্রান্ত বিধিনিষেধের বাইরে অবস্থিত সিন্থেটিক ফলাফল এমন একটি রুটের উপর ভিত্তি করে ফেরত দেওয়া হতে পারে যা লোকেশন সংক্রান্ত বিধিনিষেধের সাথে ওভারল্যাপ করে।