স্বয়ংসম্পূর্ণ ডেটা API রাখুন

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

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

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

স্বয়ংক্রিয়ভাবে অনুরোধ পূরণ করুন

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

নিচের স্নিপেটে একটি অনুরোধের বডি তৈরি করা এবং একটি সেশন টোকেন যোগ করা দেখানো হয়েছে, তারপর PlacePrediction এর তালিকা পেতে fetchAutocompleteSuggestions() কল করা হয়েছে।

// Add an initial request body.
let 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.
// @ts-ignore
request.sessionToken = token;
index.js

স্বয়ংক্রিয়ভাবে সম্পূর্ণ ভবিষ্যদ্বাণী সীমাবদ্ধ করুন

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

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

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

পাঁচটি পর্যন্ত স্থানের ধরণ নির্দিষ্ট করতে includedPrimaryTypes বৈশিষ্ট্য ব্যবহার করুন। যদি কোনও প্রকার নির্দিষ্ট না করা থাকে, তাহলে সকল ধরণের স্থান ফেরত পাঠানো হবে।

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

স্থানের বিবরণ পান

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

let 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.
// @ts-ignore
request.sessionToken = token;
index.js

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

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

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

সেশন টোকেন সুপারিশ:

  • সমস্ত প্লেস অটোকম্পলিট কলের জন্য সেশন টোকেন ব্যবহার করুন।
  • প্রতিটি সেশনের জন্য একটি নতুন টোকেন তৈরি করুন।
  • প্রতিটি নতুন সেশনের জন্য একটি অনন্য সেশন টোকেন পাস করুন। একাধিক সেশনের জন্য একই টোকেন ব্যবহার করলে প্রতিটি অনুরোধের জন্য পৃথকভাবে বিল করা হবে।

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

উদাহরণ

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

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

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

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

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

স্থানের স্বয়ংক্রিয়ভাবে সম্পূর্ণ হওয়ার পূর্বাভাস

নিচের উদাহরণটি "Tadi" ইনপুটের জন্য fetchAutocompleteSuggestions() কল করার পদ্ধতি প্রদর্শন করে, তারপর প্রথম পূর্বাভাসের ফলাফলে toPlace() কল করার পদ্ধতি প্রদর্শন করে, তারপর স্থানের বিবরণ পেতে fetchFields() এ কল করার পদ্ধতি প্রদর্শন করে।

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

async function init() {
  const { Place, AutocompleteSessionToken, AutocompleteSuggestion } =
    (await google.maps.importLibrary("places")) as google.maps.PlacesLibrary;

  // Add an initial request body.
  let 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.
  // @ts-ignore
  request.sessionToken = token;
  // Fetch autocomplete suggestions.
  const { suggestions } =
    await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

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

  const resultsElement = document.getElementById("results") as HTMLElement;

  for (let 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);
  }

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

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

init();
index.ts

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

async function init() {
    const { Place, AutocompleteSessionToken, AutocompleteSuggestion } = (await google.maps.importLibrary("places"));
    // Add an initial request body.
    let 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.
    // @ts-ignore
    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 (let 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);
    }
    let 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}`;
}
init();
index.js

সিএসএস 

/* 
 * 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>
  <head>
    <title>Place Autocomplete Data API Predictions</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>
    <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 উপাদানগুলিকে নেস্ট করার জন্য নিয়ন্ত্রণ স্লটিং ব্যবহার করা হচ্ছে।

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

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
let titleElement = document.querySelector('.title') as HTMLElement;
let resultsContainerElement = document.querySelector('.results') as HTMLElement;
let inputElement = document.querySelector('input') as HTMLInputElement;
let tokenStatusElement = document.querySelector('.token-status') as HTMLElement;
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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        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'
    )) as google.maps.PlacesLibrary;

    if (!inputEvent.target?.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', () => {
            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'
    )) as google.maps.MarkerLibrary;

    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'
    )) as google.maps.PlacesLibrary;

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

init();
index.ts

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

const mapElement = document.querySelector('gmp-map');
let innerMap;
let marker;
let titleElement = document.querySelector('.title');
let resultsContainerElement = document.querySelector('.results');
let inputElement = document.querySelector('input');
let 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.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        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', () => {
            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}`;
}
init();
index.js

সিএসএস 

/* 
 * 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>
    <head>
        <title>Place Autocomplete Data API Session</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.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

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