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

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

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

רכיב Place Details

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

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

כדי להציג Place Details במפה, מוסיפים רכיב 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-details>
            <gmp-place-details-place-request
                place="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-details>

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

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

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

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

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

הגדרת המראה

טווח הרוחב המומלץ לרכיב gmp-place-details הוא 250px-400px. אם הרוחב קטן מ-250 פיקסלים, יכול להיות שהתצוגה לא תהיה תקינה. מגדירים את הגובה בהתאם לאפליקציה. הרכיב 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();

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;
}

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>

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

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

הרכיב 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-details-compact orientation="horizontal" truncation-preferred>
  <gmp-place-details-place-request place="ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
  <gmp-place-media lightbox-preferred></gmp-place-media>
  <gmp-place-name></gmp-place-name>
  <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-details-compact>

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

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

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

הגדרת המראה

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

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

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

שימו לב: אם מוסיפים את הרכיב Place Details Compact לחלון מידע, צריך להחיל את הסגנון המותאם אישית ישירות על הרכיב gmp-place-details-compact. הסיבה לכך היא שחלון המידע הוא חלק מה-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>

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

בדוגמה הזו מוסבר איך להוסיף 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();

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;
}

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>