عناصر جزئیات مکان پیشرفته (پیش‌نمایش)

عنصر جزئیات مکان پیشرفته و عنصر فشرده جزئیات مکان پیشرفته، عناصر HTML هستند که جزئیات یک مکان را رندر می‌کنند:

  • عنصر AdvancedPlaceDetailsElement از تمام داده‌های قابل تجسم Place پشتیبانی می‌کند و می‌تواند شامل چندین عکس باشد.
  • عنصر AdvancedPlaceDetailsCompactElement به گونه‌ای طراحی شده است که حداقل فضا را اشغال کند و مجموعه‌ای مختصر از اطلاعات مربوط به یک مکان، شامل نام، آدرس، رتبه‌بندی و غیره را نمایش دهد. همچنین ممکن است شامل یک عکس واحد باشد.

هر دو عنصر جزئیات مکان پیشرفته و عنصر فشرده جزئیات مکان پیشرفته، ویژگی‌های پیشرفته یکسانی از جمله سفارشی‌سازی دکمه‌های عملیاتی، حذف نام مکان و فیلتر کردن نظرات و رسانه‌ها را ارائه می‌دهند.

از ابزار سفارشی‌سازی برای تجسم چگونگی تأثیر مجموعه‌های مختلف ویژگی‌ها بر ظاهر یک عنصر Places Details استفاده کنید و به کد موجود در HTML/CSS، Kotlin/XML و Swift دسترسی پیدا کنید.

عنصر جزئیات مکان پیشرفته (پیش‌نمایش)

برای مشاهده جزئیات مکان در عنصر جزئیات مکان پیشرفته، روی یک نشانگر روی نقشه کلیک کنید.

AdvancedPlaceDetailsElement از طیف گسترده‌ای از عناصر محتوا، از جمله ساعات کاری کامل، وب‌سایت، شماره تلفن، خلاصه مبتنی بر هوش مصنوعی با قابلیت بازگشت به خلاصه سرمقاله، نکات برجسته مربوط به هر نوع، نقد و بررسی‌ها، خلاصه نقد مبتنی بر هوش مصنوعی ، کد اضافی و لیست ویژگی‌ها پشتیبانی می‌کند.

برای نمایش جزئیات مکان روی نقشه، یک عنصر gmp-advanced-place-details به عنصر gmp-map در صفحه HTML اضافه کنید. یک عنصر فرزند، gmp-place-details-place-request ، برای انتخاب مکان اضافه کنید. این عنصر می‌تواند یک شیء Place ، یک شناسه place یا نام منبع 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 است که با کلیک روی آن، عکس در یک lightbox باز می‌شود. Lightbox به طور پیش‌فرض غیرفعال است.
  • عنصر gmp-place-attribution برای نمایش پیکربندی‌های کلی انتساب داده‌های Maps API، مانند منبع یک عکس یا نقد، استفاده می‌شود. ویژگی‌های light-scheme-color و dark-scheme-color برای تنظیم رنگ متن انتساب در حالت روشن و تاریک استفاده می‌شوند.

برای اطلاعات بیشتر در مورد تمام عناصر محتوای پشتیبانی شده، به مستندات مرجع سفارشی‌سازی محتوای ویجت مکان مراجعه کنید.

برای سادگی، می‌توانید gmp-place-all-content برای نمایش تمام جزئیات موجود در عنصر Advanced Place Details یا از gmp-place-standard-content برای نمایش پیکربندی استاندارد استفاده کنید.

پیکربندی ظاهر

محدوده عرض توصیه شده برای عنصر gmp-advanced-place-details ، ۲۵۰ پیکسل تا ۴۰۰ پیکسل است. عرض‌های کمتر از ۲۵۰ پیکسل ممکن است به درستی نمایش داده نشوند. ارتفاع را متناسب با برنامه خود تنظیم کنید. عنصر 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 ، برای انتخاب مکان است. این می‌تواند یک شیء Place ، یک شناسه place یا نام منبع place باشد.

  <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 برای نمایش تمام جزئیات موجود در عنصر Advanced Place Details Compact یا از gmp-place-standard-content برای نمایش پیکربندی استاندارد استفاده کنید.

پیکربندی ظاهر

محدوده عرض توصیه شده برای عنصر gmp-advanced-place-details-compact در جهت عمودی ۱۸۰px-300px است. عرض‌های کمتر از ۱۶۰px ممکن است به درستی نمایش داده نشوند. ارتفاع ثابتی تعیین نکنید.

محدوده عرض توصیه شده برای عنصر gmp-advanced-place-details-compact در جهت افقی، ۱۸۰px-500px است. عرض‌های کمتر از ۱۶۰px ممکن است به درستی نمایش داده نشوند. در عرض‌های کمتر از ۳۵۰px، تصویر بندانگشتی نشان داده نمی‌شود. ارتفاع ثابتی تعیین نکنید.

عنصر gmp-advanced-place-details-compact همچنین از انواع ویژگی‌های CSS سفارشی برای پیکربندی رنگ‌ها و فونت‌های عنصر پشتیبانی می‌کند. برای جزئیات بیشتر به بخش Places UI Kit Custom Styling مراجعه کنید.

توجه داشته باشید که اگر عنصر Advanced Place Details Compact به یک پنجره اطلاعات اضافه شود، سبک‌بندی سفارشی باید مستقیماً به عنصر gmp-advanced-place-details-compact اعمال شود. دلیل این امر این است که پنجره اطلاعات بخشی از 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;
}

این مثال، افزودن یک AdvancedPlaceDetailsCompactElement به یک نقشه را به صورت برنامه‌نویسی شده با استفاده از یک InfoWindow و یک AdvancedMarkerElement نشان می‌دهد.

ویژگی‌های پیشرفته

سفارشی‌سازی دکمه‌های عملیاتی

دکمه‌های عملیاتی را به عنوان فرزندان مستقیم کامپوننت جزئیات مکان پیشرفته (Advanced Place Details) اضافه کنید. برای اتصالات ناوبری استاندارد <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);
});