স্থান বিবরণ

ক্ষেত্রগুলি আনুন

আপনার যদি একটি বিদ্যমান Place বস্তু বা স্থান আইডি থাকে, তাহলে সেই স্থান সম্পর্কে বিশদ বিবরণ পেতে Place.fetchFields পদ্ধতি ব্যবহার করুন৷ প্রত্যাবর্তনের জন্য স্থান ডেটা ক্ষেত্রগুলির একটি কমা দ্বারা পৃথক তালিকা প্রদান করুন; উটের ক্ষেত্রে ক্ষেত্রের নাম উল্লেখ করুন। অনুরোধ করা ক্ষেত্রগুলির জন্য ডেটা পেতে রিটার্ন করা Place অবজেক্টটি ব্যবহার করুন।

নিম্নলিখিত উদাহরণটি একটি নতুন Place তৈরি করতে একটি স্থান আইডি ব্যবহার করে, Place.fetchFields displayName এবং formattedAddress ক্ষেত্রগুলির জন্য অনুরোধ করে, মানচিত্রে একটি মার্কার যুক্ত করে এবং কনসোলে কিছু ডেটা লগ করে৷

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

async function getPlaceDetails(Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary;
    // Use place ID to create a new Place instance.
    const place = new Place({
        id: 'ChIJN5Nz71W3j4ARhx5bwpTQEGg',
        requestedLanguage: 'en', // optional
    });

    // Call fetchFields, passing the desired data fields.
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });

    // Log the result
    console.log(place.displayName);
    console.log(place.formattedAddress);

    // Add an Advanced Marker
    const marker = new AdvancedMarkerElement({
        map,
        position: place.location,
        title: place.displayName,
    });
}
index.ts

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

async function getPlaceDetails(Place) {
  const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
  // Use place ID to create a new Place instance.
  const place = new Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the desired data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });
  // Log the result
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker
  const marker = new AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

index.js

স্থান ওভারভিউ উপাদান ব্যবহার করুন

দ্রষ্টব্য: এই নমুনাটি একটি ওপেন সোর্স লাইব্রেরি ব্যবহার করে। লাইব্রেরি সম্পর্কিত সমর্থন এবং প্রতিক্রিয়ার জন্য README দেখুন।

ওয়েব কম্পোনেন্ট ব্যবহার করে মাত্র কয়েকটি লাইন কোড সহ স্থানের বিবরণ প্রদর্শন করুন।

প্লেস ওভারভিউ কম্পোনেন্টের x-ছোট, ছোট, মাঝারি, বৃহৎ এবং x-বড় আকারের বৈচিত্র দেখানো ছবি ব্যবহারকারীর দ্বারা প্রবেশ করা মাপের ক্ষেত্রের উপর ভিত্তি করে দেখানো হয়েছে।
চিত্র 1: পাঁচটি ভিন্ন আকারের বৈচিত্র সহ বিস্তারিত তথ্য রাখুন

ওয়েব উপাদান কি?

ওয়েব উপাদানগুলি আপনাকে কাস্টম, পুনঃব্যবহারযোগ্য, এনক্যাপসুলেটেড এইচটিএমএল ট্যাগ তৈরি করার অনুমতি দেয় যা আপনার ওয়েব অ্যাপের HTML-এর যেকোনো জায়গায় ব্যবহারযোগ্য। এগুলি সমস্ত আধুনিক ব্রাউজারে সমর্থিত এবং UI এবং কার্যকারিতা এনক্যাপসুলেট করার জন্য একটি ফ্রেমওয়ার্ক-অজ্ঞেয়মূলক প্রক্রিয়া প্রকাশ করে৷

স্থান ওভারভিউ উপাদান কি?

প্লেস ওভারভিউ কম্পোনেন্ট লক্ষ লক্ষ ব্যবসা সম্পর্কে বিস্তারিত তথ্য প্রদর্শন করে, যার মধ্যে খোলার সময়, তারকা পর্যালোচনা এবং ফটো, পাশাপাশি দিকনির্দেশ এবং অন্যান্য ক্রিয়াগুলি 5 আকার এবং বিন্যাসে একটি পূর্বনির্ধারিত UI-তে রয়েছে৷

এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরি কি?

Google মানচিত্র প্ল্যাটফর্মের এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরি হল ওয়েব কম্পোনেন্টগুলির একটি সেট যা ডেভেলপারদের আরও ভাল মানচিত্র এবং অবস্থান বৈশিষ্ট্যগুলি দ্রুত এবং কম পরিশ্রমে তৈরি করতে সাহায্য করে৷ এটি বয়লারপ্লেট কোড, সর্বোত্তম অনুশীলন এবং প্রতিক্রিয়াশীল ডিজাইনকে এনক্যাপসুলেট করে, জটিল মানচিত্র ইন্টারফেসগুলিকে একটি একক HTML উপাদানে হ্রাস করে। শেষ পর্যন্ত, এই উপাদানগুলি মানচিত্র এবং অবস্থান-সম্পর্কিত কোড পড়া, শিখতে, কাস্টমাইজ করা এবং বজায় রাখা সহজ করে তোলে।

এবার শুরু করা যাক

শুরু করতে, এনপিএম সহ এক্সটেন্ডেড কম্পোনেন্ট লাইব্রেরি লোড করুন।

সেরা পারফরম্যান্সের জন্য, একটি প্যাকেজ ম্যানেজার ব্যবহার করুন এবং শুধুমাত্র আপনার প্রয়োজনীয় উপাদানগুলি আমদানি করুন। এই প্যাকেজটি npm-এ @googlemaps/extended-component-library হিসাবে তালিকাভুক্ত। এটি দিয়ে ইনস্টল করুন:

  npm i @googlemaps/extended-component-library;

তারপরে আপনি আপনার অ্যাপ্লিকেশনে যে কোনও উপাদান ব্যবহার করেন তা আমদানি করুন।

  import '@googlemaps/extended-component-library/place_overview.js';

npm লাইব্রেরি লোড করার পরে, ক্লাউড কনসোল থেকে একটি API কী পান ।

  <gmpx-api-loader key="YOUR_API_KEY" solution-channel="GMP_DOCS_placeoverview_v1"></gmpx-api-loader>

আপনার পছন্দের একটি প্লেস আইডি সহ প্লেস ওভারভিউ কম্পোনেন্ট ট্যাগ ব্যবহার করুন। এটি অকল্যান্ডে একটি Google অফিসের জন্য একটি স্থানধারক৷

  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw"></gmpx-place-overview>

প্লেস ওভারভিউ উপাদানের পাঁচটি আকারের বৈচিত্র রয়েছে। ডিফল্ট উপাদান একটি x-large আকারের বৈচিত্র ব্যবহার করে। অন্যান্য আকারের বৈচিত্র পেতে, size বৈশিষ্ট্য যোগ করুন এবং সংশোধন করুন।

  <!-- Try setting the size attribute to "x-small", "small", "medium", "large", or "x-large" -->
  <gmpx-place-overview place="ChIJVVVVnvlHDW0Rwyod-_ddhAw" size="small"></gmpx-place-overview>

আরো বিস্তারিত জানার জন্য, GitHub বা npm দেখুন। নমুনা কোডে ব্যবহৃত উপাদানগুলি দেখতে, গিটহাবের উদাহরণ পৃষ্ঠাটি দেখুন।