רכיבים מתקדמים של פרטי מקום (תצוגה מקדימה)

רכיב פרטי המקום המתקדם ורכיב פרטי המקום המתקדם הקומפקטי הם רכיבי HTML שמציגים פרטים של מקום:

גם הרכיב Advanced Place Details וגם הרכיב Advanced Place Details Compact מציעים את אותן תכונות מתקדמות, כולל התאמה אישית של לחצני פעולה, השמטת שם המקום וסינון ביקורות ומדיה.

אפשר להשתמש בכלי ההתאמה האישית כדי לראות איך קבוצות שונות של מאפיינים ישפיעו על המראה של רכיב 'פרטי מקום' ולגשת לקוד ב-HTML/CSS, ב-Kotlin/XML וב-Swift.

רכיב מתקדם של פרטי מקום (תצוגה מקדימה)

לוחצים על סמן במפה כדי לראות את פרטי המקום שלו ברכיב 'פרטי מקום מתקדמים'.

התכונה AdvancedPlaceDetailsElement תומכת במגוון רחב של רכיבי תוכן, כולל שעות פתיחה מלאות, אתר, מספר טלפון, סיכום מבוסס-AI עם מעבר אוטומטי לסיכום עריכה, נקודות מרכזיות ספציפיות לסוג, ביקורות, סיכום של ביקורות מבוסס-AI, בנוסף ל-Plus Code ולרשימות תכונות.

כדי להציג פרטי מקום במפה, מוסיפים רכיב gmp-advanced-place-details לרכיב gmp-map בדף ה-HTML. כוללים רכיב צאצא, 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 מספקים סיכום של המקום והביקורות עליו, בהתאמה, שמבוסס על AI. הסדר של רכיבי הבן לא משנה, כי הפרטים שנבחרו תמיד מוצגים בסדר קבוע מראש.

אפשר להגדיר חלק מהרכיבים האלה באמצעות מאפיינים ספציפיים לתוכן:

  • הרכיב 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 הוא 250px-400px. יכול להיות שרוחב של פחות מ-250px לא יוצג בצורה תקינה. מגדירים את הגובה בהתאם לאפליקציה. האלמנט 'פרטים מתקדמים על המקום' מיועד לגלילה בתוך המקום המוקצה לפי הצורך.

רכיב gmp-advanced-place-details תומך גם במגוון מאפייני CSS בהתאמה אישית להגדרת הצבעים והגופנים של הרכיב. פרטים נוספים זמינים במאמר בנושא התאמה אישית של סגנונות ב-Places UI Kit.

רכיב קומפקטי מתקדם של פרטי מקום (תצוגה מקדימה)

לוחצים על סמן במפה כדי לראות את פרטי המקום שלו ברכיב 'פרטי מקום מתקדמים' קומפקטי.

התג AdvancedPlaceDetailsCompactElement מציג פרטים על מקום נבחר תוך שימוש במקום מינימלי. המידע הזה יכול להיות שימושי בחלון מידע שמציג מקום במפה, בחוויית שימוש ברשתות חברתיות כמו שיתוף מיקום בצ'אט, כהצעה לבחירת המיקום הנוכחי או במאמר חדשותי כדי להפנות למקום במפות Google. התג AdvancedPlaceDetailsCompactElement יכול להציג שם, כתובת, דירוג, סוג, מחיר, סמל נגישות, סטטוס פתיחה ותמונה אחת. אפשר להציג אותו אופקית או אנכית, בהתאם לבחירה במאפיין orientation.

בקטע הקוד הבא, gmp-advanced-place-details-compact מוגדר עם orientation שמוגדר ל-horizontal. מאפיין נוסף, truncation-preferred, חותך תוכן מסוים כדי שיתאים לשורה אחת במקום להציג אותו בשורה חדשה. רכיב gmp-advanced-place-details-compact מכיל רכיב צאצא, gmp-place-details-place-request, כדי לבחור את המקום. זה יכול להיות אובייקט 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 בכיוון אנכי הוא 180px-300px. יכול להיות שרוחב קטן מ-160px לא יוצג כמו שצריך. לא מגדירים גובה קבוע.

טווח הרוחב המומלץ לרכיב gmp-advanced-place-details-compact בכיוון אופקי הוא 180px-500px. יכול להיות שרוחב קטן מ-160px לא יוצג כמו שצריך. אם הרוחב קטן מ-350 פיקסלים, התמונה הממוזערת לא תוצג. לא מגדירים גובה קבוע.

רכיב gmp-advanced-place-details-compact תומך גם במגוון מאפייני CSS בהתאמה אישית להגדרת הצבעים והגופנים של הרכיב. פרטים נוספים זמינים במאמר בנושא התאמה אישית של סגנונות ב-Places UI Kit.

הערה: אם מוסיפים את הרכיב 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>

דרישות לייחוס חזותי

חשוב: עליכם להבהיר למשתמשי הקצה מתי לחצן של פעולה מותאמת אישית ישתף מידע על המשתמשים עם צד שלישי שאינו 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);
});