عناصر تفاصيل المكان المتقدّمة (معاينة)

إنّ عنصر "تفاصيل المكان المتقدّمة" وعنصر "تفاصيل المكان المتقدّمة المصغّرة" هما عنصران HTML يعرضان تفاصيل مكان معيّن:

يقدّم كل من عنصر "تفاصيل المكان المتقدّمة" وعنصر "تفاصيل المكان المتقدّمة المصغّرة" الميزات المتقدّمة نفسها، بما في ذلك تخصيص أزرار الإجراءات وحذف اسم المكان وفلترة المراجعات والوسائط.

استخدِم أداة التخصيص لتصوُّر كيفية تأثير مجموعات الخصائص المختلفة على مظهر عنصر "تفاصيل المكان" والوصول إلى الرمز في HTML/CSS وKotlin/XML وSwift.

عنصر "تفاصيل المكان المتقدّمة" (معاينة)

انقر على علامة على الخريطة للاطّلاع على تفاصيل المكان في عنصر "تفاصيل المكان المتقدّمة" ".

يتوافق AdvancedPlaceDetailsElement مع مجموعة واسعة من عناصر المحتوى، بما في ذلك ساعات العمل الكاملة، والموقع الإلكتروني، ورقم الهاتف، والملخّص المستند إلى الذكاء الاصطناعي مع الرجوع إلى الملخّص التحريري، وأهم العناصر الخاصة بالنوع، والمراجعات، وملخّص المراجعات المستند إلى الذكاء الاصطناعي، بالإضافة إلى الرمز، وقوائم الميزات.

لعرض تفاصيل المكان على الخريطة، أضِف عنصر gmp-advanced-place-details إلى عنصر gmp-map في صفحة HTML. أدرِج عنصرًا ثانويًا، gmp-place-details-place-request، لاختيار المكان. يمكن أن يكون هذا العنصر كائن "مكان" أو رقم تعريف مكان أو اسم مورد "مكان": 

<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 بين 250 بكسل و400 بكسل. قد لا يتم عرض العروض الأقل من 250 بكسل بشكلٍ صحيح. اضبط الارتفاع بما يناسب تطبيقك تم تصميم عنصر "تفاصيل المكان المتقدّمة" بحيث يمكنه الانتقال ضمن المساحة المخصّصة حسب الحاجة.

يتوافق عنصر gmp-advanced-place-details أيضًا مع مجموعة متنوّعة من خصائص CSS المخصّصة لإعداد ألوان الخطوط والخطوط للعنصر. يُرجى الاطّلاع على تخصيص مظهر حزمة أدوات "خرائط Google" الجاهزة للأماكن لمزيد من التفاصيل.

عنصر "تفاصيل المكان المتقدّمة المصغّرة" (معاينة)

انقر على علامة على الخريطة للاطّلاع على تفاصيل المكان في عنصر "تفاصيل المكان المتقدّمة المص101}غّرة".

يعرض AdvancedPlaceDetailsCompactElement تفاصيل مكان محدّد باستخدام مساحة قليلة. قد يكون ذلك مفيدًا في نافذة معلومات تبرز مكانًا على الخريطة، أو في تجربة على وسائل التواصل الاجتماعي مثل مشاركة موقع جغرافي في محادثة، أو كاقتراح لاختيار موقعك الجغرافي الحالي، أو ضِمن مقالة إعلامية للإشارة إلى المكان على "خرائط Google". يمكن أن يعرض 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 في الاتجاه الرأسي بين 180 بكسل و300 بكسل. قد لا يتم عرض العروض الأقل من 160 بكسل بشكلٍ صحيح. لا تضبط ارتفاعًا ثابتًا.

يتراوح نطاق العرض المقترَح لعنصر gmp-advanced-place-details-compact في الاتجاه الأفقي بين 180 بكسل و500 بكسل. قد لا يتم عرض العروض الأقل من 160 بكسل بشكلٍ صحيح. لن يتم عرض الصورة المصغّرة عند العروض الأقل من 350 بكسل. لا تضبط ارتفاعًا ثابتًا.

يتوافق عنصر gmp-advanced-place-details-compact أيضًا مع مجموعة متنوّعة من خصائص CSS المخصّصة لإعداد ألوان الخطوط والخطوط للعنصر. يُرجى الاطّلاع على تخصيص مظهر حزمة أدوات "خرائط Google" الجاهزة للأماكن لمزيد من التفاصيل.

يُرجى العِلم أنّه إذا تمت إضافة عنصر "تفاصيل المكان المتقدّمة المصغّرة" إلى نافذة معلومات، يجب تطبيق التنسيق المخصّص مباشرةً على عنصر 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.

الميزات المتقدمة

تخصيص أزرار الإجراءات

أضِف أزرار الإجراءات كعناصر ثانوية مباشرةً لمكوّن "تفاصيل المكان المتقدّمة" . استخدِم <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>

متطلبات تحديد المصدر المرئية

ملاحظة مهمة: يجب أن توضّح للمستخدمين النهائيين متى سيشارك زر إجراء مخصّص معلومات المستخدم مع جهة خارجية غير Google. يُرجى الاطّلاع على متطلبات تحديد المصدر المرئية.

حذف اسم المكان

لحذف اسم المكان، استبعِد عنصر <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>

يمكنك أيضًا استخدام JavaScript لاسترداد العدد الإجمالي للعناصر التي تطابق طلب البحث المحدّد من خلال قراءة سمتَي 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);
});