‫ Places UI Kit: ספרייה מוכנה לשימוש שמאפשרת למפתחים להתאים אישית ולשלוט. כדאי לנסות ולשתף את המשוב שלך על חוויית השימוש בערכת ממשק המשתמש.

‫Google משתמשת בטכנולוגיית AI כדי לתרגם תוכן לשפה המועדפת עליך. בתרגומים כאלו עשויות להיות שגיאות.

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

האלמנטים Advanced Place Details Element ו-Advanced Place Details Compact Element הם אלמנטים של HTML שמציגים פרטים של מקום:

התג AdvancedPlaceDetailsElement תומך בכל נתוני המקום שניתנים להצגה, ויכול לכלול כמה תמונות.
התבנית AdvancedPlaceDetailsCompactElement נועדה לתפוס כמה שפחות מקום ולהציג מידע תמציתי על מקום, כולל השם, הכתובת, הדירוג וכו'. היא עשויה לכלול גם תמונה אחת.

גם הרכיב 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 של המקום והביקורות עליו, בהתאמה. הסדר של רכיבי ה-child לא משנה, כי הפרטים שנבחרו תמיד מוצגים בסדר קבוע מראש.

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

הרכיב gmp-place-media משמש להצגת תמונה אחת, והוא כולל מאפיין lightbox-preferred שפותח את התמונה בחלון קופץ כשלוחצים עליה. האפשרות 'תיבת אור' מושבתת כברירת מחדל.
רכיב 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 הוא 250 פיקסלים עד 400 פיקסלים. יכול להיות שהרוחב לא יוצג בצורה תקינה אם הוא קטן מ-250 פיקסלים. מגדירים את הגובה בהתאם לאפליקציה. האלמנט 'פרטים מתקדמים על מקום' מיועד לגלילה בתוך המקום המוקצה לפי הצורך.

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

דוגמה מלאה של קוד

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;

async function init(): Promise<void> {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener(
        'click',
        (event: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            marker.position = null;
            event.stop();
            if ('placeId' in event && event.placeId) {
                // Fire when the user clicks a POI.
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${event.placeId}`
                );
                updateMapAndMarker();
            } else {
                // Fire when the user clicks the map (not on a POI).
                console.log('No place was selected.');
                marker.style.display = 'none';
            }
        }
    );
}

void init();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-advanced-place-details');
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');

async function init() {
    // Request needed libraries.
    await Promise.all([
        google.maps.importLibrary('maps'),
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });

    // Function to update map and marker based on place details
    const updateMapAndMarker = () => {
        if (placeDetails.place?.location) {
            map.innerMap.panTo(placeDetails.place.location);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';
            marker.style.display = 'block';
        }
    };

    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', () => {
        updateMapAndMarker();
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        marker.position = null;
        event.stop();
        if ('placeId' in event && event.placeId) {
            // Fire when the user clicks a POI.
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            updateMapAndMarker();
        } else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
            marker.style.display = 'none';
        }
    });
}

void init();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}

.ui-panel {
    width: 400px;
    margin-left: 20px;
    margin-top: 10px;
}

gmp-place-details {
    width: 100%;
    margin: 0;
    border: none;
}style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use advanced markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
            <div class="ui-panel">
                <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-advanced-place-details>
            </div>
        </div>
    </body>
</html>index.html

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

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

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

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

דוגמה מלאה של קוד

TypeScript

// Use querySelector to select elements for interaction.
const map = document.querySelector<google.maps.MapElement>('gmp-map')!;
const placeDetails = document.querySelector<
    HTMLElement & { place?: google.maps.places.Place }
>('gmp-advanced-place-details-compact')!;
const placeDetailsRequest = document.querySelector<HTMLElement>(
    'gmp-place-details-place-request'
)!;
const marker = document.querySelector<google.maps.marker.AdvancedMarkerElement>(
    'gmp-advanced-marker'
)!;
async function init(): Promise<void> {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener(
        'click',
        (event: google.maps.MapMouseEvent | google.maps.IconMouseEvent) => {
            event.stop();

            if ('placeId' in event && event.placeId) {
                // When the user clicks a POI.
                marker.position = event.latLng;
                placeDetailsRequest.setAttribute(
                    'place',
                    `places/${event.placeId}`
                );
                showInfoWindow();
            } else {
                // When the user clicks the map (not on a POI).
                marker.position = null;
                placeDetailsRequest.removeAttribute('place');
                console.log('No place was selected.');
            }
        }
    );
}
void init();index.ts

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector(
    'gmp-advanced-place-details-compact'
);
const placeDetailsRequest = document.querySelector(
    'gmp-place-details-place-request'
);
const marker = document.querySelector('gmp-advanced-marker');
async function init() {
    // Request needed libraries.
    void Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    const { InfoWindow } = await google.maps.importLibrary('maps');

    await window.customElements.whenDefined('gmp-map');
    // Set the inner map options.
    map.innerMap.setOptions({
        mapTypeControl: false,
        streetViewControl: false,
    });

    await window.customElements.whenDefined('gmp-advanced-marker');
    marker.collisionBehavior = 'REQUIRED_AND_HIDES_OPTIONAL';

    const infoWindow = new InfoWindow();
    infoWindow.addListener('close', () => {
        marker.position = null;
    });

    const showInfoWindow = () => {
        if (infoWindow.isOpen) return;
        infoWindow.setContent(placeDetails);
        infoWindow.open({ anchor: marker });
    };

    placeDetails.addEventListener('gmp-load', () => {
        // For the initial load case, with no user click, we fall back to the place's location, and ensure the map has a center set and the InfoWindow is show.
        // (The clicked POI LatLng will be a more natural marker position, when available.)
        if (!map.center && placeDetails.place?.location) {
            map.center = marker.position = placeDetails.place.location;
            showInfoWindow();
        }
    });

    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', (event) => {
        event.stop();

        if ('placeId' in event && event.placeId) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.setAttribute(
                'place',
                `places/${event.placeId}`
            );
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.removeAttribute('place');
            console.log('No place was selected.');
        }
    });
}
void init();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.container {
    display: flex;
    height: 100vh;
    width: 100%;
}

gmp-map {
    flex-grow: 1;
}style.css

HTML

<!doctype html>
<html>
    <head>
        <title>Place Details Compact with Google Maps</title>
        <meta charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})({
                key: "GOOGLE_MAPS_API_KEY",
                v: "beta"
            });
        </script>
    </head>
    <body>
        <div class="container">
            <!-- map-id is required to use Advanced Markers. See https://developers.google.com/maps/documentation/javascript/map-ids/mapid-over. -->
            <gmp-map zoom="17" map-id="DEMO_MAP_ID">
                <gmp-advanced-marker></gmp-advanced-marker>
            </gmp-map>
        </div>
        <!--
        The gmp-advanced-place-details-compact element is styled inline because it is
        conditionally rendered and moved into the info window, which is
        part of the map's shadow DOM.
        -->
        <gmp-advanced-place-details-compact
            orientation="horizontal"
            truncation-preferred
            style="
                width: 400px;
                padding: 0;
                margin: 0;
                border: none;
                background-color: transparent;
                color-scheme: light;
            ">
            <gmp-place-details-place-request
                place="places/ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>

            <gmp-place-name></gmp-place-name>
            <gmp-place-media lightbox-preferred></gmp-place-media>
            <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-open-now-status></gmp-place-open-now-status>
            <gmp-place-attribution
                light-scheme-color="gray"
                dark-scheme-color="white"></gmp-place-attribution>

        </gmp-advanced-place-details-compact>
    </body>
</html>index.html

תכונות מתקדמות

התאמה אישית של לחצני פעולה

מוסיפים לחצני פעולה כרכיבי צאצא ישירים של הרכיב 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);
});

רכיבים מתקדמים של פרטי מקום (תצוגה מקדימה) קל לארגן דפים בעזרת אוספים אפשר לשמור ולסווג תוכן על סמך ההעדפות שלך.

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

הגדרת התוכן

הגדרת המראה

דוגמה מלאה של קוד

TypeScript

JavaScript

CSS

HTML

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

הגדרת התוכן

הגדרת המראה

דוגמה מלאה של קוד

TypeScript

JavaScript

CSS

HTML

תכונות מתקדמות

התאמה אישית של לחצני פעולה

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

השמטת שם המקום

סינון ביקורות ותמונות וסרטונים

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