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

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

প্লেস অটোকমপ্লিট হলো ম্যাপস জাভাস্ক্রিপ্ট এপিআই-এর প্লেসেস লাইব্রেরির একটি ফিচার। আপনি আপনার অ্যাপ্লিকেশনগুলোকে গুগল ম্যাপস সার্চ ফিল্ডের মতো টাইপ-এহেড-সার্চ বৈশিষ্ট্য দিতে অটোকমপ্লিট ব্যবহার করতে পারেন।

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

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

নিম্নলিখিত সারণিতে প্লেসেস অটোকমপ্লিট সার্ভিস (লেগ্যাসি) এবং অটোকমপ্লিট ডেটা এপিআই (নতুন) -এর মধ্যে প্রোগ্রাম্যাটিক প্লেস অটোকমপ্লিট ব্যবহারের কিছু প্রধান পার্থক্য তালিকাভুক্ত করা হলো:

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

নিম্নলিখিতগুলি পুরোনো এবং নতুন উভয় অটোকমপ্লিট এপিআই দ্বারা ব্যবহৃত হয়:

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

এই অংশে প্রোগ্রাম্যাটিক ইন্টারফেসের ক্ষেত্রে Places Service এবং Place ক্লাসের মধ্যকার পার্থক্য তুলে ধরতে অটোকমপ্লিটের কোডের তুলনা করা হয়েছে।

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

লিগ্যাসি প্লেসেস সার্ভিস আপনাকে প্রোগ্রাম্যাটিকভাবে অটোকমপ্লিট প্রেডিকশন পুনরুদ্ধার করার সুযোগ দেয়, যা Autocomplete ক্লাসের তুলনায় ইউজার ইন্টারফেসের উপর আরও বেশি নিয়ন্ত্রণ প্রদান করে। নিম্নলিখিত উদাহরণে, "par"-এর জন্য একটিমাত্র রিকোয়েস্ট করা হয়েছে, যেখানে একটি 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);
}

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

নতুন Place ক্লাসটি আপনাকে প্রোগ্রাম্যাটিকভাবে অটোকমপ্লিট প্রেডিকশনগুলো পুনরুদ্ধার করার সুযোগ দেয়, যা PlaceAutocompleteElement ক্লাসের তুলনায় ইউজার ইন্টারফেসের উপর আরও বেশি নিয়ন্ত্রণ প্রদান করে। নিম্নলিখিত উদাহরণে, "par"-এর জন্য একটিমাত্র রিকোয়েস্ট করা হয়েছে, যেখানে একটি 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}`
}

অটোকমপ্লিট উইজেট স্থাপন করুন

নিম্নলিখিত সারণিতে Places সার্ভিস (পুরানো) এবং Place ক্লাস (নতুন)-এর মধ্যে অটোকমপ্লিট উইজেট ব্যবহারের কিছু প্রধান পার্থক্য তালিকাভুক্ত করা হলো:

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

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

এই বিভাগে পুরোনো Place Autocomplete Widget এবং নতুন Place Autocomplete এলিমেন্টের মধ্যে পার্থক্যগুলো তুলে ধরতে অটোকমপ্লিটের কোডের তুলনা করা হয়েছে।

অটোকমপ্লিট উইজেট স্থাপন করুন (পুরানো সংস্করণ)

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

  • Autocomplete উইজেটের কনস্ট্রাক্টর দুটি আর্গুমেন্ট গ্রহণ করে:
    • text টাইপের একটি HTML input এলিমেন্ট। এটি সেই ইনপুট ফিল্ড, যা অটোকমপ্লিট সার্ভিসটি পর্যবেক্ষণ করবে এবং এর সাথে ফলাফল সংযুক্ত করবে।
    • একটি ঐচ্ছিক AutocompleteOptions আর্গুমেন্ট, যেখানে আপনি কোয়েরিকে সীমাবদ্ধ করার জন্য আরও বিকল্প নির্দিষ্ট করতে পারেন।
  • সীমানা নির্ধারণ করতে, autocomplete.bindTo() কল করার মাধ্যমে Autocomplete ইনস্ট্যান্সটিকে ম্যাপের সাথে স্পষ্টভাবে আবদ্ধ করা যায়।
  • অটোকমপ্লিটের অপশনগুলিতে ডেটা ফিল্ডের স্থান নির্দিষ্ট করুন। 
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);
  });
}

অটোকমপ্লিট উইজেট স্থাপন করুন (নতুন)

Place ক্লাসটি PlaceAutocompleteElement প্রদান করে, যা HTMLElement একটি সাবক্লাস। এটি এমন একটি UI কম্পোনেন্ট যা ম্যাপে ম্যাপ কন্ট্রোল হিসেবে যোগ করা যায়, অথবা সরাসরি কোনো ওয়েব পেজে এমবেড করা যায়। নিচের কোড উদাহরণটিতে একটি PlaceAutocompleteElement উইজেটকে ম্যাপ কন্ট্রোল হিসেবে এমবেড করার পদ্ধতি দেখানো হয়েছে।

প্লেস অটোকমপ্লিট উইজেটটি নিম্নলিখিত উপায়ে উন্নত করা হয়েছে:

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

বাস্তবায়নের প্রধান পার্থক্যগুলোর মধ্যে রয়েছে:

  • PlaceAutocompleteElement তার নিজস্ব ইনপুট ফিল্ড প্রদান করে এবং এটি কোনো বিদ্যমান ইনপুট এলিমেন্ট ব্যবহারের পরিবর্তে সরাসরি HTML বা জাভাস্ক্রিপ্ট ব্যবহার করে পেজে যুক্ত করা হয়।
  • Autocomplete ক্লাসে কোয়েরি প্রেডিকশন উপলব্ধ নেই।
  • PlaceAutocompleteElementOptions ব্যবহার করে PlaceAutocompleteElement টি তৈরি করা হয়।
    • ডেটা ফিল্ডগুলির স্থান নির্বাচনের সময় (যখন fetchFields() কল করা হয়) নির্দিষ্ট করা হয়।
  • locationBounds অথবা locationRestriction অপশন ব্যবহার করে সীমানা নির্ধারণ করুন। 
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-select listener, and display the results on the map.
  placeAutocomplete.addEventListener("gmp-select", async ( place ) => {
    const place = event.placePrediction.toPlace();
    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,
  });
}