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

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

רכיבים של פרטי המקום

בחירת פלטפורמה: Android iOS JavaScript

הרכיב Place Details (פרטי מקום) והרכיב Place Details Compact (פרטי מקום קומפקטיים) הם רכיבי HTML שמציגים פרטים של מקום:

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

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

רכיב Place Details

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

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

כדי להציג פרטי מקום במפה, מוסיפים רכיב gmp-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-place-details>
      <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
      <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

הגדרת התוכן

אתם יכולים לשלוט בתוכן הספציפי של המקום שמוצג באמצעות הרכיב gmp-place-details על ידי שימוש ברכיב gmp-place-content-config מקונן כדי לבחור ולהגדיר את פרטי המקום, כמו בדוגמה הזו:

        <gmp-place-details>
            <gmp-place-details-place-request
                place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-content-config>
        </gmp-place-details>

האלמנט gmp-place-content-config עצמו מכיל מספר אלמנטים של תוכן משני, וכל אחד מהם בוחר פרט תואם על המקום להצגה: ‫gmp-place-address בוחר את הכתובת של המקום, ‫gmp-place-price בוחר את רמת המחירים של המקום וכו'. האלמנטים gmp-place-summary ו-gmp-place-review-summary מספקים סיכום מבוסס-AI של המקום והביקורות עליו, בהתאמה. הסדר של רכיבי הבן לא משנה, כי הפרטים שנבחרו תמיד מוצגים בסדר קבוע מראש.

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

הרכיב gmp-place-media משמש להצגת תמונה אחת, והוא כולל מאפיין lightbox-preferred שפותח את התמונה בחלון קופץ כשלוחצים עליה. האפשרות 'תיבת אור' מושבתת כברירת מחדל.
הרכיב gmp-place-attribution משמש להצגת המקור של התמונה. מאפייני light-scheme-color ו-dark-scheme-color משמשים להגדרת הצבע של טקסט השיוך במצב בהיר ובמצב כהה.

מידע נוסף על כל רכיבי התוכן הנתמכים מופיע בPlaceContentConfigElementמאמרי העזרה.

כדי לפשט את העניינים, אפשר להחליף את הרכיב gmp-place-content-config ברכיב gmp-place-all-content כדי להציג את כל הפרטים שזמינים ברכיב Place Details, או ברכיב gmp-place-standard-content כדי להציג הגדרה רגילה.

הגדרת המראה

טווח הרוחב המומלץ לרכיב gmp-place-details הוא 250px-400px. יכול להיות שרוחב קטן מ-250px לא יוצג בצורה תקינה. מגדירים את הגובה בהתאם לאפליקציה. האלמנט Place Details (פרטי מקום) מיועד לגלילה בתוך המקום המוקצה לפי הצורך.

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

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-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.place = 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"
            });
        </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-place-details>
                    <gmp-place-details-place-request
                        place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
                    <gmp-place-content-config>
                        <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-content-config>
                </gmp-place-details>
            </div>
        </div>
    </body>
</html>index.html

Place Details Compact Element

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

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

בקטע הקוד הבא, gmp-place-details-compact מוגדר עם orientation שמוגדר ל-horizontal. מאפיין נוסף, truncation-preferred, מקצר תוכן מסוים כדי שיתאים לשורה אחת במקום להוסיף שורה חדשה. רכיב gmp-place-details-compact מכיל רכיב צאצא, gmp-place-details-place-request, כדי לבחור את המקום. זה יכול להיות אובייקט Place, מזהה מקום או שם משאב של מקום.

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

הגדרת התוכן

אתם יכולים לשלוט בתוכן הספציפי של המקום שמוצג באמצעות הרכיב gmp-place-details-compact באמצעות רכיב מקונן gmp-place-content-config כדי לבחור ולהגדיר את פרטי המקום, כמו שמוצג בקטע הקוד הבא:

<gmp-place-content-config>
    <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-place-content-config>index.html

הרכיב gmp-place-content-config עצמו מכיל מספר של רכיבי תוכן צאצאים, וכל אחד מהם בוחר פרט מקום תואם להצגה. סדר רכיבי הבן לא משנה, כי הפרטים שנבחרו תמיד מוצגים בסדר קבוע מראש. אפשר להגדיר חלק מהרכיבים האלה באמצעות מאפיינים שספציפיים לתוכן.

מידע נוסף על כל רכיבי התוכן הנתמכים מופיע בPlaceContentConfigElementמאמרי העזרה.

כדי לפשט את העניינים, אפשר להחליף את האלמנט gmp-place-content-config באלמנט gmp-place-all-content כדי להציג את כל הפרטים שזמינים באלמנט Place Details Compact, או באלמנט gmp-place-standard-content כדי להציג הגדרה רגילה.

הגדרת המראה

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

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

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

הערה: אם מוסיפים את הרכיב Place Details Compact לחלון מידע, צריך להחיל את העיצוב המותאם אישית ישירות על הרכיב gmp-place-details-compact. הסיבה לכך היא שחלון המידע הוא חלק מ-Shadow DOM של המפה, ולכן לא יוחלו סגנונות CSS חיצוניים.

<gmp-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="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>index.html

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

בדוגמה הזו מוסבר איך להוסיף PlaceDetailsCompactElement למפה באופן פרוגרמטי באמצעות InfoWindow ו-AdvancedMarkerElement.

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-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) {
            // When the user clicks a POI.
            marker.position = event.latLng;
            placeDetailsRequest.place = event.placeId;
            showInfoWindow();
        } else {
            // When the user clicks the map (not on a POI).
            marker.position = null;
            placeDetailsRequest.place = null;
            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"
            });
        </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-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-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="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
            <gmp-place-content-config>
                <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-place-content-config>
        </gmp-place-details-compact>
    </body>
</html>index.html

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

רכיב Place Details

הגדרת התוכן

הגדרת המראה

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

JavaScript

CSS

HTML

Place Details Compact Element

הגדרת התוכן

הגדרת המראה

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

JavaScript

CSS

HTML

רכיבים של פרטי המקום