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

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

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

স্বয়ংসম্পূর্ণ অনুরোধ

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

নিম্নলিখিত স্নিপেটটি একটি অনুরোধের বডি তৈরি করা এবং একটি সেশন টোকেন যোগ করা দেখায়, তারপর PlacePrediction s-এর একটি তালিকা পেতে 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 প্রপার্টি ব্যবহার করুন। কোনো প্রকার নির্দিষ্ট না থাকলে, সব ধরনের স্থান ফেরত দেওয়া হবে।

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

একটি স্থানের পূর্বাভাস ফলাফল থেকে একটি 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

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

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

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

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

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

উদাহরণ

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

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

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

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

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

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

/**
 * Demonstrates making a single request for Place predictions, then requests Place Details for the first result.
 */
async function init() {
    // @ts-ignore
    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 + '":'));

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

        // Create a new list element.
        const listItem = document.createElement('li');
        const resultsElement = document.getElementById("results") as HTMLElement;
        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

/**
 * Demonstrates making a single request for Place predictions, then requests Place Details for the first result.
 */
async function init() {
  // @ts-ignore
  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 + '":'),
  );

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    // Create a new list element.
    const listItem = document.createElement("li");
    const resultsElement = document.getElementById("results");

    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>
  </head>
  <body>
    <div id="title"></div>
    <ul id="results"></ul>
    <p><span id="prediction"></span></p>
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 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: "AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg", v: "weekly"});</script>
  </body>
</html>
index.html

সেশন সহ স্বয়ংসম্পূর্ণ টাইপ-আগে রাখুন

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

let title;
let results;
let input;
let token;

// Add an initial request body.
let request = {
    input: "",
    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",
};

async function init() {
    token = new google.maps.places.AutocompleteSessionToken();

    title = document.getElementById('title');
    results = document.getElementById('results');
    input = document.querySelector("input");
    input.addEventListener("input", makeAcRequest);
    request = refreshToken(request) as any;
}

async function makeAcRequest(input) {
    // Reset elements and exit if an empty string is received.
    if (input.target.value == '') {
        title.innerText = '';
        results.replaceChildren();
        return;
    }

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

    // Fetch autocomplete suggestions and show them in a list.
    // @ts-ignore
    const { suggestions } = await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    title.innerText = 'Query predictions for "' + request.input + '"';

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

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

        // Create a link for the place, add an event handler to fetch the place.
        const a = document.createElement('a');
        a.addEventListener('click', () => {
            onPlaceSelected(placePrediction!.toPlace());
        });
        a.innerText = placePrediction!.text.toString();

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

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place) {
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });
    let placeText = document.createTextNode(place.displayName + ': ' + place.formattedAddress);
    results.replaceChildren(placeText);
    title.innerText = 'Selected Place:';
    input.value = '';
    refreshToken(request);
}

// Helper function to refresh the session token.
async function refreshToken(request) {
    // Create a new session token and add it to the request.
    token = new google.maps.places.AutocompleteSessionToken();
    request.sessionToken = token;
    return request;
}

declare global {
    interface Window {
      init: () => void;
    }
  }
  window.init = init;
index.ts

let title;
let results;
let input;
let token;
// Add an initial request body.
let request = {
  input: "",
  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",
};

async function init() {
  token = new google.maps.places.AutocompleteSessionToken();
  title = document.getElementById("title");
  results = document.getElementById("results");
  input = document.querySelector("input");
  input.addEventListener("input", makeAcRequest);
  request = refreshToken(request);
}

async function makeAcRequest(input) {
  // Reset elements and exit if an empty string is received.
  if (input.target.value == "") {
    title.innerText = "";
    results.replaceChildren();
    return;
  }

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

  // Fetch autocomplete suggestions and show them in a list.
  // @ts-ignore
  const { suggestions } =
    await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(
      request,
    );

  title.innerText = 'Query predictions for "' + request.input + '"';
  // Clear the list first.
  results.replaceChildren();

  for (const suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    // Create a link for the place, add an event handler to fetch the place.
    const a = document.createElement("a");

    a.addEventListener("click", () => {
      onPlaceSelected(placePrediction.toPlace());
    });
    a.innerText = placePrediction.text.toString();

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

    li.appendChild(a);
    results.appendChild(li);
  }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place) {
  await place.fetchFields({
    fields: ["displayName", "formattedAddress"],
  });

  let placeText = document.createTextNode(
    place.displayName + ": " + place.formattedAddress,
  );

  results.replaceChildren(placeText);
  title.innerText = "Selected Place:";
  input.value = "";
  refreshToken(request);
}

// Helper function to refresh the session token.
async function refreshToken(request) {
  // Create a new session token and add it to the request.
  token = new google.maps.places.AutocompleteSessionToken();
  request.sessionToken = token;
  return request;
}

window.init = 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;
}

a {
  cursor: pointer;
  text-decoration: underline;
  color: blue;
}

input {
  width: 300px;
}
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>
  </head>
  <body>
    <input id="input" type="text" placeholder="Search for a place..." />
    <div id="title"></div>
    <ul id="results"></ul>
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the script to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises. See
      https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=init&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>
index.html