উন্নত স্থানের বিবরণের উপাদানসমূহ (পূর্বরূপ)

Advanced Place Details Element এবং Advanced Place Details Compact Element হলো এমন HTML এলিমেন্ট যা কোনো স্থানের বিবরণ প্রদর্শন করে:

  • AdvancedPlaceDetailsElement সকল দর্শনযোগ্য স্থানের ডেটা সমর্থন করে এবং এতে একাধিক ছবি অন্তর্ভুক্ত থাকতে পারে।
  • AdvancedPlaceDetailsCompactElement টি ন্যূনতম স্থান ব্যবহার করার জন্য এবং কোনো স্থান সম্পর্কে নাম, ঠিকানা, রেটিং ইত্যাদি সংক্ষিপ্ত তথ্য প্রদর্শনের জন্য ডিজাইন করা হয়েছে। এতে একটিমাত্র ছবিও অন্তর্ভুক্ত থাকতে পারে।

অ্যাডভান্সড প্লেস ডিটেইলস এলিমেন্ট এবং অ্যাডভান্সড প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্ট উভয়ই একই উন্নত বৈশিষ্ট্য প্রদান করে, যার মধ্যে রয়েছে অ্যাকশন বাটন কাস্টমাইজ করা, স্থানের নাম বাদ দেওয়া এবং রিভিউ ও মিডিয়া ফিল্টার করা।

কাস্টমাইজেশন টুল ব্যবহার করে দেখুন কীভাবে বিভিন্ন প্রপার্টি সেট একটি প্লেসেস ডিটেইলস এলিমেন্টের চেহারাকে প্রভাবিত করবে এবং HTML/CSS, Kotlin/XML, ও Swift-এ কোডটি অ্যাক্সেস করুন।

উন্নত স্থান বিবরণী উপাদান (পূর্বরূপ)

অ্যাডভান্সড প্লেস ডিটেইলস এলিমেন্ট-এ কোনো একটি মার্কারের স্থানের বিবরণ দেখতে, মানচিত্রে সেটিতে ক্লিক করুন।

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

মানচিত্রে স্থানের বিবরণ প্রদর্শন করতে, HTML পৃষ্ঠার gmp-map এলিমেন্টের মধ্যে একটি gmp-advanced-place-details এলিমেন্ট যোগ করুন। স্থানটি নির্বাচন করার জন্য gmp-place-details-place-request একটি চাইল্ড এলিমেন্ট অন্তর্ভুক্ত করুন। এটি একটি Place অবজেক্ট , একটি প্লেস আইডি , অথবা কোনো প্লেসের রিসোর্স নেম হতে পারে।

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
  <div class="widget-container" slot="control-inline-start-block-start">
    <gmp-advanced-place-details>
      <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-advanced-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

বিষয়বস্তু কনফিগার করুন

এই উদাহরণে দেখানো অনুযায়ী, চাইল্ড এলিমেন্ট নেস্ট করার মাধ্যমে আপনি gmp-advanced-place-details এলিমেন্ট দ্বারা প্রদর্শিত নির্দিষ্ট স্থানের বিষয়বস্তু নিয়ন্ত্রণ করতে পারেন এবং স্থানের বিবরণ নির্বাচন ও কনফিগার করতে পারেন।

        <gmp-advanced-place-details>
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                <gmp-place-name></gmp-place-name>
                <gmp-place-address></gmp-place-address>
                <gmp-place-rating></gmp-place-rating>
                <gmp-place-type></gmp-place-type>
                <gmp-place-price></gmp-place-price>
                <gmp-place-accessible-entrance-icon></gmp-place-accessible-entrance-icon>
                <gmp-place-opening-hours></gmp-place-opening-hours>
                <gmp-place-website></gmp-place-website>
                <gmp-place-phone-number></gmp-place-phone-number>
                <gmp-place-summary></gmp-place-summary>
                <gmp-place-type-specific-highlights></gmp-place-type-specific-highlights>
                <gmp-place-review-summary></gmp-place-review-summary>
                <gmp-place-reviews></gmp-place-reviews>
                <gmp-place-feature-list></gmp-place-feature-list>
                <gmp-place-attribution></gmp-place-attribution>
        </gmp-advanced-place-details>

প্রতিটি চাইল্ড কন্টেন্ট এলিমেন্ট প্রদর্শনের জন্য একটি সংশ্লিষ্ট স্থানের বিবরণ নির্বাচন করে: gmp-place-address স্থানটির ঠিকানা নির্বাচন করে, gmp-place-price স্থানটির মূল্যস্তর নির্বাচন করে, ইত্যাদি। gmp-place-summary এবং gmp-place-review-summary এলিমেন্টগুলো যথাক্রমে স্থানটি এবং এর রিভিউগুলোর একটি এআই-চালিত সারাংশ প্রদান করে। চাইল্ড এলিমেন্টগুলোর ক্রম অপ্রাসঙ্গিক, কারণ নির্বাচিত বিবরণগুলো সর্বদা একটি নির্দিষ্ট পূর্বনির্ধারিত ক্রমে রেন্ডার করা হয়।

এই উপাদানগুলোর কয়েকটিকে বিষয়বস্তু-নির্দিষ্ট অ্যাট্রিবিউট ব্যবহার করে আরও কনফিগার করা যেতে পারে:

  • gmp-place-media এলিমেন্টটি একটিমাত্র ছবি প্রদর্শনের জন্য ব্যবহৃত হয় এবং এতে একটি lightbox-preferred অ্যাট্রিবিউট অন্তর্ভুক্ত রয়েছে, যা ক্লিক করলে ছবিটিকে একটি লাইটবক্সে খোলে। ডিফল্টরূপে লাইটবক্স নিষ্ক্রিয় থাকে।
  • gmp-place-attribution এলিমেন্টটি Maps API ডেটার সামগ্রিক অ্যাট্রিবিউশন কনফিগারেশন, যেমন কোনো ছবি বা পর্যালোচনার উৎস, প্রদর্শন করতে ব্যবহৃত হয়। light-scheme-color এবং dark-scheme-color অ্যাট্রিবিউটগুলো লাইট এবং ডার্ক মোডে অ্যাট্রিবিউশন টেক্সটের রঙ নির্ধারণ করতে ব্যবহৃত হয়।

সকল সমর্থিত কন্টেন্ট এলিমেন্ট সম্পর্কে আরও তথ্যের জন্য প্লেস উইজেট কন্টেন্ট কাস্টমাইজেশন রেফারেন্স ডকুমেন্টেশন দেখুন।

সরলতার জন্য, আপনি অ্যাডভান্সড প্লেস ডিটেইলস এলিমেন্টে উপলব্ধ সমস্ত বিবরণ দেখানোর জন্য gmp-place-all-content ব্যবহার করতে পারেন, অথবা একটি স্ট্যান্ডার্ড কনফিগারেশন প্রদর্শন করার জন্য gmp-place-standard-content ব্যবহার করতে পারেন।

চেহারা কনফিগার করুন

gmp-advanced-place-details এলিমেন্টটির জন্য প্রস্তাবিত প্রস্থের পরিসীমা হলো ২৫০px-৪০০px। ২৫০px-এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। আপনার অ্যাপ্লিকেশনের প্রয়োজন অনুযায়ী উচ্চতা নির্ধারণ করুন। Advanced Place Details এলিমেন্টটি প্রয়োজন অনুসারে বরাদ্দকৃত স্থানের মধ্যে স্ক্রল করার জন্য ডিজাইন করা হয়েছে।

gmp-advanced-place-details এলিমেন্টটি তার রং এবং ফন্ট কনফিগার করার জন্য বিভিন্ন ধরনের কাস্টম CSS প্রপার্টিও সাপোর্ট করে। আরও বিস্তারিত জানতে Places UI Kit Custom Styling দেখুন।

উন্নত স্থানের বিবরণ কম্প্যাক্ট এলিমেন্ট (প্রিভিউ)

অ্যাডভান্সড প্লেস ডিটেইলস কম্প্যাক্ট এলিমেন্ট-এ কোনো একটি মার্কারের স্থানের বিবরণ দেখতে, মানচিত্রে সেটিতে ক্লিক করুন।

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

নিম্নলিখিত কোড স্নিপেটে, gmp-advanced-place-details-compact orientation horizontal ওরিয়েন্টেশন দিয়ে কনফিগার করা হয়েছে। truncation-preferred একটি অতিরিক্ত অ্যাট্রিবিউট নির্দিষ্ট কন্টেন্টকে র‍্যাপ না করে এক লাইনে ফিট করার জন্য ছোট করে দেয়। gmp-advanced-place-details-compact এলিমেন্টটির মধ্যে gmp-place-details-place-request একটি চাইল্ড এলিমেন্ট রয়েছে, যা প্লেস নির্বাচন করার জন্য ব্যবহৃত হয়। এটি একটি প্লেস অবজেক্ট , একটি প্লেস আইডি , অথবা কোনো প্লেসের রিসোর্স নেম হতে পারে।

  <gmp-advanced-place-details-compact orientation="horizontal" truncation-preferred>
    <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-all-content></gmp-place-all-content>
  </gmp-advanced-place-details-compact>

বিষয়বস্তু কনফিগার করুন

এই কোড স্নিপেটে দেখানো পদ্ধতি অনুযায়ী, gmp-advanced-place-details-compact এলিমেন্টের মাধ্যমে প্রদর্শিত নির্দিষ্ট স্থানের বিষয়বস্তু নিয়ন্ত্রণ করতে, আপনি চাইল্ড এলিমেন্ট নেস্ট করে স্থানের বিবরণ নির্বাচন ও কনফিগার করতে পারেন।

<gmp-advanced-place-details-compact>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
    <gmp-place-photo></gmp-place-photo>
    <gmp-place-name></gmp-place-name>
    <gmp-place-rating></gmp-place-rating>
    <gmp-place-address></gmp-place-address>
    <gmp-place-opening-hours></gmp-place-opening-hours>
    <gmp-place-attribution></gmp-place-attribution>
</gmp-advanced-place-details-compact>

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

সকল সমর্থিত কন্টেন্ট এলিমেন্ট সম্পর্কে আরও তথ্যের জন্য প্লেস উইজেট কন্টেন্ট কাস্টমাইজেশন রেফারেন্স ডকুমেন্টেশন দেখুন।

সরলতার জন্য, আপনি অ্যাডভান্সড প্লেস ডিটেইলস কমপ্যাক্ট এলিমেন্টে উপলব্ধ সমস্ত বিবরণ দেখানোর জন্য gmp-place-all-content ব্যবহার করতে পারেন, অথবা একটি স্ট্যান্ডার্ড কনফিগারেশন প্রদর্শন করার জন্য gmp-place-standard-content ব্যবহার করতে পারেন।

চেহারা কনফিগার করুন

উল্লম্ব বিন্যাসে gmp-advanced-place-details-compact এলিমেন্টটির জন্য প্রস্তাবিত প্রস্থের পরিসীমা হলো ১৮০px-৩০০px। ১৬০px-এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। কোনো নির্দিষ্ট উচ্চতা নির্ধারণ করবেন না।

হরাইজন্টাল ওরিয়েন্টেশনে gmp-advanced-place-details-compact এলিমেন্টটির জন্য প্রস্তাবিত প্রস্থের পরিসীমা হলো ১৮০px-৫০০px। ১৬০px-এর কম প্রস্থ সঠিকভাবে প্রদর্শিত নাও হতে পারে। ৩৫০px-এর কম প্রস্থে থাম্বনেইল ছবিটি দেখানো হবে না। কোনো নির্দিষ্ট উচ্চতা সেট করবেন না।

gmp-advanced-place-details-compact এলিমেন্টটি তার রং এবং ফন্ট কনফিগার করার জন্য বিভিন্ন ধরনের কাস্টম CSS প্রপার্টিও সাপোর্ট করে। আরও বিস্তারিত জানতে Places UI Kit Custom Styling দেখুন।

মনে রাখবেন যে, যদি Advanced Place Details Compact এলিমেন্টটি কোনো ইনফো উইন্ডোতে যোগ করা হয়, তাহলে কাস্টম স্টাইলিং সরাসরি gmp-advanced-place-details-compact এলিমেন্টটিতে প্রয়োগ করতে হবে। এর কারণ হলো, ইনফো উইন্ডোটি ম্যাপের শ্যাডো ডোম (shadow DOM)-এর একটি অংশ, তাই বাইরের কোনো CSS স্টাইল প্রয়োগ করা হবে না।

gmp-advanced-place-details-compact {
  --gmp-color-surface: #202124;
  --gmp-color-on-surface: #ffffff;
  --gmp-color-on-surface-variant: #9aa0a6;
  --gmp-color-primary: #8ab4f8;
  --gmp-font-family: "Roboto", sans-serif;
}

এই উদাহরণটিতে একটি InfoWindow এবং একটি AdvancedMarkerElement ব্যবহার করে প্রোগ্রাম্যাটিকভাবে একটি ম্যাপে AdvancedPlaceDetailsCompactElement যোগ করার পদ্ধতি দেখানো হয়েছে।

উন্নত বৈশিষ্ট্য

অ্যাকশন বাটনগুলি কাস্টমাইজ করুন

অ্যাডভান্সড প্লেস ডিটেইলস কম্পোনেন্টের সরাসরি চাইল্ড হিসেবে অ্যাকশন বাটন যোগ করুন। সাধারণ নেভিগেশনাল সংযোগের জন্য <gmp-place-link> ব্যবহার করুন এবং action অ্যাট্রিবিউটটি স্পষ্টভাবে উল্লেখ করুন। আপনি চাইলে slot অ্যাট্রিবিউটও উল্লেখ করতে পারেন। বৈধ প্রিডিফাইন্ড অ্যাকশনগুলো হলো open-website , open-directions , open-map এবং call । যদি slot অ্যাট্রিবিউটটি বাদ দেওয়া হয়, তবে এটি ডিফল্টভাবে action-main হিসেবে ব্যবহৃত হবে।

<gmp-advanced-place-details-compact orientation="vertical" truncation-preferred>
  <gmp-place-details-place-request place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <!-- Other content items -->
  <gmp-place-link action="open-website" target="_blank"></gmp-place-link>
  <gmp-place-link action="open-directions" slot="action-corner"></gmp-place-link>
</gmp-advanced-place-details-compact>

চাক্ষুষ অ্যাট্রিবিউশনের প্রয়োজনীয়তা

গুরুত্বপূর্ণ: যখন কোনো কাস্টম অ্যাকশন বাটন গুগল ছাড়া অন্য কোনো তৃতীয় পক্ষের সাথে ব্যবহারকারীর তথ্য শেয়ার করবে, তখন আপনাকে তা ব্যবহারকারীদের কাছে স্পষ্টভাবে জানিয়ে দিতে হবে। ভিজ্যুয়াল অ্যাট্রিবিউশনের আবশ্যকতাগুলো দেখুন।

স্থানের নাম বাদ দিন

স্থানের নাম বাদ দিতে চাইলে, আপনার কাস্টম কন্টেন্ট থেকে <gmp-place-name> এলিমেন্টটি স্পষ্টভাবে বাদ দিন।

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <!-- Exclude <gmp-place-name> to hide the place name -->
  <gmp-place-rating></gmp-place-rating>
  <gmp-place-address></gmp-place-address>
</gmp-advanced-place-details>

পর্যালোচনা এবং মিডিয়া ফিল্টার করুন

এই কোড নমুনাটি শুধুমাত্র সেইসব মিডিয়া এবং রিভিউ দেখায় যেগুলিতে 'কফি'র উল্লেখ আছে।

<gmp-advanced-place-details>
  <gmp-place-details-place-request place="places/ChIJT7FdmYiAhYAROFOvrIxRJDU"></gmp-place-details-place-request>
  <gmp-place-media query="coffee"></gmp-place-media>
  <gmp-place-reviews query="coffee" rank-preference="newest"></gmp-place-reviews>
</gmp-advanced-place-details>

আপনি জাভাস্ক্রিপ্ট ব্যবহার করে searchMediaCount এবং searchReviewsCount প্রপার্টিগুলো পড়ে প্রদত্ত সার্চ কোয়েরির সাথে মেলে এমন মোট আইটেমের সংখ্যাও জানতে পারেন। এই প্রপার্টিগুলো অ্যাক্সেস করার আগে আপনাকে অবশ্যই gmp-load ইভেন্টের জন্য অপেক্ষা করতে হবে।

const detailsElement = document.querySelector('gmp-advanced-place-details');
const mediaElement = detailsElement.querySelector('gmp-place-media');
mediaElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching photos: ', e.target.searchMediaCount);
});

const reviewsElement = detailsElement.querySelector('gmp-place-reviews');
reviewsElement.addEventListener('gmp-load', (e) => {
  console.log('Total matching reviews: ', e.target.searchReviewsCount);
});