নতুন স্থান স্বয়ংসম্পূর্ণে স্থানান্তর করুন,নতুন স্থানে স্বয়ংসম্পূর্ণে স্থানান্তর করুন,নতুন স্থানে স্বয়ংসম্পূর্ণে স্থানান্তর করুন,নতুন স্থানে স্বয়ংসম্পূর্ণে স্থানান্তর করুন

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

এই পৃষ্ঠাটি উত্তরাধিকার এবং নতুন স্থান স্বয়ংসম্পূর্ণ বৈশিষ্ট্যগুলির মধ্যে পার্থক্য ব্যাখ্যা করে৷ উভয় সংস্করণে স্বয়ংসম্পূর্ণ সংহত করার দুটি সাধারণ উপায় রয়েছে:

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

স্বয়ংসম্পূর্ণ প্রোগ্রাম্যাটিক ইন্টারফেস

নিম্নলিখিত সারণীতে স্থান স্বয়ংসম্পূর্ণ পরিষেবা (লেগেসি) এবং স্বয়ংসম্পূর্ণ ডেটা API (নতুন) এর মধ্যে প্রোগ্রাম্যাটিক প্লেস স্বয়ংসম্পূর্ণ ব্যবহারের কিছু প্রধান পার্থক্য তালিকাভুক্ত করা হয়েছে:

PlacesService (উত্তরাধিকার)	Place (নতুন)
স্থান স্বয়ংসম্পূর্ণ পরিষেবা রেফারেন্স	স্বয়ংসম্পূর্ণ ডেটা (নতুন) রেফারেন্স
AutocompletionRequest	AutocompleteRequest
AutocompleteService.getPlacePredictions	AutocompleteSuggestion.fetchAutocompleteSuggestions
AutocompletePrediction	PlacePrediction
ফলাফল বস্তু এবং PlacesServiceStatus প্রতিক্রিয়া পরিচালনা করার জন্য পদ্ধতিগুলির জন্য একটি কলব্যাক ব্যবহার করা প্রয়োজন৷	প্রতিশ্রুতি ব্যবহার করে, এবং অ্যাসিঙ্ক্রোনাসভাবে কাজ করে।
পদ্ধতিগুলির জন্য একটি PlacesServiceStatus চেক প্রয়োজন৷	কোন প্রয়োজনীয় স্থিতি পরীক্ষা, মান ত্রুটি হ্যান্ডলিং ব্যবহার করতে পারেন.
Autocomplete দৃষ্টান্ত তৈরি করা হলে স্থান ডেটা ক্ষেত্রগুলি বিকল্প হিসাবে সেট করা হয়।	যখন fetchFields() কল করা হয় তখন স্থান ডেটা ক্ষেত্রগুলি পরে সেট করা হয়।
ক্যোয়ারী পূর্বাভাস সমর্থিত (শুধুমাত্র SearchBox )।	Autocomplete ক্লাসে প্রশ্নের পূর্বাভাস পাওয়া যায় না।
স্থানের ধরন এবং স্থান ডেটা ক্ষেত্রগুলির একটি নির্দিষ্ট সেটের মধ্যে সীমাবদ্ধ।	স্থানের ধরন এবং স্থানের ডেটা ক্ষেত্রগুলির একটি বর্ধিত নির্বাচনের অ্যাক্সেস।

নিম্নলিখিতগুলি উত্তরাধিকার এবং নতুন স্বয়ংসম্পূর্ণ API উভয়ই ব্যবহার করে:

• locationBias
• locationRestriction
• AutocompleteSessionToken
• ComponentRestrictions

কোড তুলনা (প্রোগ্রাম্যাটিক)

এই বিভাগটি প্রোগ্রাম্যাটিক ইন্টারফেসের জন্য প্লেসেস পরিষেবা এবং প্লেস ক্লাসের মধ্যে পার্থক্য বোঝাতে স্বয়ংসম্পূর্ণের কোডের তুলনা করে।

স্বয়ংসম্পূর্ণ পূর্বাভাস পুনরুদ্ধার করুন (উত্তরাধিকার)

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

function init() {
  const placeInfo = document.getElementById("prediction");
  const service = new google.maps.places.AutocompleteService();
  const placesService = new google.maps.places.PlacesService(placeInfo);
  var sessionToken = new google.maps.places.AutocompleteSessionToken();

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    bounds: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  }

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const displaySuggestions = function (predictions, status) {
    // Check the status of the Places Service.
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });

    const placeRequest = {
      placeId: predictions[0].place_id,
      fields: ["name", "formatted_address"],
    };

    placesService.getDetails(placeRequest, (place, status) => {
      if (status == google.maps.places.PlacesServiceStatus.OK && place) {
        placeInfo.textContent = `
          First predicted place: ${place.name} at ${place.formatted_address}`
      }
    });

  };

  // Show the results of the query.
  service.getPlacePredictions(request, displaySuggestions);
}

• প্রোগ্রামগতভাবে স্থান স্বয়ংসম্পূর্ণ পরিষেবার পূর্বাভাস পুনরুদ্ধার করা হচ্ছে
• স্বয়ংসম্পূর্ণ উদাহরণ রাখুন
• সেশন টোকেন
• AutocompletionRequest রেফারেন্স
• AutocompletePrediction রেফারেন্স

স্বয়ংসম্পূর্ণ পূর্বাভাস পুনরুদ্ধার করুন (নতুন)

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

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

  // Define request options.
  let request = {
    input: "par",
    sessionToken: sessionToken,
    locationBias: {
      west: -122.44,
      north: 37.8,
      east: -122.39,
      south: 37.78,
    },
  };

  // Display the query string.
  const title = document.getElementById("title");
  title.appendChild(
    document.createTextNode('Place predictions for "' + request.input + '":'),
  );

  // Perform the query and display the results.
  const { suggestions } =
    await google.maps.places.AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

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

  for (let suggestion of suggestions) {
    const placePrediction = suggestion.placePrediction;
    const listItem = document.createElement("li");

    listItem.appendChild(
      document.createTextNode(placePrediction.text.text),
    );

    resultsElement.appendChild(listItem);
  }

  // Show the first predicted place.
  let place = suggestions[0].placePrediction.toPlace();

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

  const placeInfo = document.getElementById("prediction");

  placeInfo.textContent = `
    First predicted place: ${place.displayName} at ${place.formattedAddress}`
}

• স্বয়ংসম্পূর্ণ ডেটা API রাখুন
• স্বয়ংসম্পূর্ণ ডেটা পূর্বাভাসের উদাহরণ রাখুন
• স্বয়ংসম্পূর্ণ ডেটা সেশনের উদাহরণ রাখুন
• সেশন টোকেন
• AutocompleteRequest ইন্টারফেস রেফারেন্স
• AutocompleteSuggestion ক্লাস রেফারেন্স
• PlacePrediction ক্লাস রেফারেন্স

স্বয়ংসম্পূর্ণ উইজেট রাখুন

নিম্নলিখিত সারণীতে স্থান পরিষেবা (উত্তরাধিকার) এবং স্থান শ্রেণী (নতুন):

স্থান পরিষেবা (উত্তরাধিকার)	স্থান (নতুন)
স্থানের পূর্বাভাসের জন্য Autocomplete ক্লাস।	স্থানের পূর্বাভাসের জন্য PlaceAutocompleteElement ক্লাস।
SearchBox ক্লাস ক্যোয়ারী পূর্বাভাস জন্য.	Autocomplete ক্লাসে প্রশ্নের পূর্বাভাস পাওয়া যায় না।
শুধুমাত্র ডিফল্ট ইনপুট স্থানধারক পাঠ্য স্থানীয়করণ করা হয়।	টেক্সট ইনপুট প্লেসহোল্ডার, ভবিষ্যদ্বাণী তালিকার লোগো এবং স্থানের পূর্বাভাস সবই আঞ্চলিক স্থানীয়করণকে সমর্থন করে।
উইজেট setBounds() বা autocomplete.bindTo() ব্যবহার করে অনুসন্ধানকে নির্দিষ্ট সীমার মধ্যে সীমাবদ্ধ করতে (পক্ষপাত), এবং নির্দিষ্ট সীমার মধ্যে ফলাফল সীমাবদ্ধ করতে strictBounds ।	উইজেট locationBias প্রপার্টি ব্যবহার করে নির্দিষ্ট সীমার সাথে ফলাফলের পক্ষপাতিত্ব করতে এবং locationRestriction প্রপার্টি ব্যবহার করে সার্চকে নির্দিষ্ট সীমার মধ্যে সীমাবদ্ধ করতে।
উইজেটগুলি শুধুমাত্র একটি স্ট্যান্ডার্ড HTML ইনপুট উপাদান ব্যবহার করে একত্রিত করা যেতে পারে।	উইজেট একটি স্ট্যান্ডার্ড HTML ইনপুট উপাদান বা একটি gmp-place-autocomplete উপাদান ব্যবহার করে একত্রিত করা যেতে পারে।
উইজেট ব্যবহার করার সময়, ব্যবহারকারীদের পক্ষে এমন জিনিসগুলির অনুরোধ করা সম্ভব যা বৈধ নাও হতে পারে (উদাহরণস্বরূপ "বিসনিল্যান্ড"); এই ক্ষেত্রে স্পষ্টভাবে পরিচালনা করা আবশ্যক.	উইজেট শুধুমাত্র প্রদত্ত পরামর্শের জন্য ফলাফল প্রদান করবে, এবং নির্বিচারে মানগুলির জন্য অনুরোধ জারি করতে পারবে না; তাই সম্ভাব্য অবৈধ অনুরোধগুলি পরিচালনা করার কোন প্রয়োজন নেই।
উত্তরাধিকার PlaceResult উদাহরণ প্রদান করে।	Place উদাহরণ প্রদান করে।
স্থানের ডেটা ক্ষেত্রগুলি Autocomplete বস্তুর বিকল্প হিসাবে সেট করা হয়েছে।	যখন ব্যবহারকারী একটি নির্বাচন করে এবং fetchFields() বলা হয় তখন স্থানের ডেটা ক্ষেত্রগুলি সেট করা হয়।
স্থানের ধরন এবং স্থান ডেটা ক্ষেত্রগুলির একটি নির্দিষ্ট সেটের মধ্যে সীমাবদ্ধ।	স্থানের ধরন এবং স্থানের ডেটা ক্ষেত্রগুলির একটি বর্ধিত নির্বাচনের অ্যাক্সেস।

কোড তুলনা (উইজেট)

এই বিভাগটি উত্তরাধিকার স্থান স্বয়ংসম্পূর্ণ উইজেট এবং নতুন স্থান স্বয়ংসম্পূর্ণ উপাদানের মধ্যে পার্থক্যগুলি চিত্রিত করতে স্বয়ংসম্পূর্ণের জন্য কোডের তুলনা করে৷

স্বয়ংসম্পূর্ণ উইজেট রাখুন (উত্তরাধিকার)

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

• Autocomplete উইজেট কনস্ট্রাক্টর দুটি আর্গুমেন্ট নেয়:
  • টাইপ text একটি HTML input উপাদান। এটি সেই ইনপুট ক্ষেত্র যা স্বয়ংসম্পূর্ণ পরিষেবা নিরীক্ষণ করবে এবং এর ফলাফল সংযুক্ত করবে।
  • একটি ঐচ্ছিক AutocompleteOptions আর্গুমেন্ট, যেখানে আপনি ক্যোয়ারী সীমাবদ্ধ করার জন্য আরও বিকল্প নির্দিষ্ট করতে পারেন।
• সীমা নির্ধারণ করতে, Autocomplete উদাহরণ autocomplete.bindTo() কল করে স্পষ্টভাবে মানচিত্রের সাথে আবদ্ধ হতে পারে।
• স্বয়ংসম্পূর্ণের বিকল্পগুলিতে স্থান ডেটা ক্ষেত্রগুলি নির্দিষ্ট করুন৷

function initMap() {
  const map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapTypeControl: false,
  });
  const card = document.getElementById("pac-card");
  const input = document.getElementById("pac-input");
  const options = {
    fields: ["formatted_address", "geometry", "name"],
    strictBounds: false,
  };

  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  const autocomplete = new google.maps.places.Autocomplete(input, options);

  // Bind the map's bounds (viewport) property to the autocomplete object,
  // so that the autocomplete requests use the current map bounds for the
  // bounds option in the request.
  autocomplete.bindTo("bounds", map);

  const infowindow = new google.maps.InfoWindow();
  const infowindowContent = document.getElementById("infowindow-content");

  infowindow.setContent(infowindowContent);

  const marker = new google.maps.Marker({
    map,
    anchorPoint: new google.maps.Point(0, -29),
  });

  autocomplete.addListener("place_changed", () => {
    infowindow.close();
    marker.setVisible(false);

    const place = autocomplete.getPlace();

    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
      window.alert("No details available for input: '" + place.name + "'");
      return;
    }

    // If the place has a geometry, then present it on a map.
    if (place.geometry.viewport) {
      map.fitBounds(place.geometry.viewport);
    } else {
      map.setCenter(place.geometry.location);
      map.setZoom(17);
    }

    marker.setPosition(place.geometry.location);
    marker.setVisible(true);
    infowindowContent.children["place-name"].textContent = place.name;
    infowindowContent.children["place-address"].textContent =
      place.formatted_address;
    infowindow.open(map, marker);
  });
}

• স্বয়ংসম্পূর্ণ ডকুমেন্টেশন রাখুন
• স্বয়ংসম্পূর্ণ উইজেট উদাহরণ রাখুন
• স্থান অনুসন্ধান বাক্স উদাহরণ
• Autocomplete বর্গ রেফারেন্স

স্বয়ংসম্পূর্ণ উইজেট রাখুন (নতুন)

প্লেস ক্লাসটি PlaceAutocompleteElement অফার করে, একটি HTMLElement সাবক্লাস যা একটি UI উপাদান প্রদান করে যা একটি মানচিত্র নিয়ন্ত্রণ হিসাবে একটি মানচিত্রে যোগ করা যেতে পারে, বা সরাসরি একটি ওয়েব পৃষ্ঠায় এম্বেড করা যেতে পারে৷ নিম্নলিখিত কোড উদাহরণ একটি মানচিত্র নিয়ন্ত্রণ হিসাবে একটি PlaceAutocompleteElement উইজেট এম্বেড করা দেখায়।

প্লেস স্বয়ংসম্পূর্ণ উইজেট নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

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

মূল বাস্তবায়ন পার্থক্য অন্তর্ভুক্ত:

• Autocomplete ক্লাসে প্রশ্নের পূর্বাভাস পাওয়া যায় না।
• PlaceAutocompleteElement টি PlaceAutocompleteElementOptions ব্যবহার করে তৈরি করা হয়েছে।
• স্থান ডেটা ক্ষেত্র নির্বাচনের সময় নির্দিষ্ট করা হয় (যখন fetchFields() বলা হয়)।
• locationBounds বা locationRestriction বিকল্প ব্যবহার করে সীমানা সেট করুন।
• id অ্যাট্রিবিউট ব্যবহার করে একটি HTML পাঠ্য ইনপুট উপাদানের সাথে PlaceAutocompleteElement যুক্ত করুন ( HTMLElement থেকে উত্তরাধিকারসূত্রে প্রাপ্ত)।

let map;
let marker;
let infoWindow;

async function initMap() {
  // Request needed libraries.
  const [{ Map }, { AdvancedMarkerElement }] = await Promise.all([
    google.maps.importLibrary("marker"),
    google.maps.importLibrary("places"),
  ]);

  // Initialize the map.
  map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 40.749933, lng: -73.98633 },
    zoom: 13,
    mapId: "4504f8b37365c3d0",
    mapTypeControl: false,
  });

  const placeAutocomplete =
    new google.maps.places.PlaceAutocompleteElement({
      locationRestriction: map.getBounds(),
    });

  placeAutocomplete.id = "place-autocomplete-input";
  const card = document.getElementById("place-autocomplete-card");

  card.appendChild(placeAutocomplete);
  map.controls[google.maps.ControlPosition.TOP_LEFT].push(card);

  // Create the marker and infowindow.
  marker = new google.maps.marker.AdvancedMarkerElement({
    map,
  });
  infoWindow = new google.maps.InfoWindow({});

  // Add the gmp-placeselect listener, and display the results on the map.
  placeAutocomplete.addEventListener("gmp-placeselect", async ({ place }) => {
    await place.fetchFields({
      fields: ["displayName", "formattedAddress", "location"],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      map.fitBounds(place.viewport);
    } else {
      map.setCenter(place.location);
      map.setZoom(17);
    }

    let content =
      '<div id="infowindow-content">' +
      '<span id="place-displayname" class="title">' +
      place.displayName +
      '</span><br />' +
      '<span id="place-address">' +
      place.formattedAddress +
      '</span>' +
      '</div>';

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  });
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
  infoWindow.setContent(content);
  infoWindow.setPosition(center);
  infoWindow.open({
    map,
    anchor: marker,
    shouldFocus: false,
  });
}

• স্বয়ংসম্পূর্ণ উইজেট (প্রিভিউ) ডকুমেন্টেশন রাখুন
• স্বয়ংসম্পূর্ণ উইজেট উদাহরণ রাখুন
• স্বয়ংসম্পূর্ণ উপাদানের উদাহরণ রাখুন
• PlaceAutocompleteElement ক্লাস রেফারেন্স