רכיב Place Details

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

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

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

המוצר או התכונה האלה נמצאים בגרסת טרום-השקה (Preview). יכול להיות שהתמיכה בתכונות ובמוצרים בגרסת טרום-GA תהיה מוגבלת, וששינויים בתכונות ובמוצרים בגרסת טרום-GA לא יהיו תואמים לגרסאות אחרות של טרום-GA. המוצרים בגרסת טרום-GA כפופים לתנאים הספציפיים לשירות של הפלטפורמה של מפות Google. מידע נוסף זמין בקטע תיאורים של שלבי ההשקה.

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

כדי להוסיף את הרכיב למפה, מוסיפים רכיב gmp-place-details-compact לרכיב gmp-map בדף ה-HTML, ומשתמשים במאפיין orientation כדי להגדיר את הכיוון שלו.

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

<gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
  <gmp-place-details-compact orientation = "horizontal" truncation-preferred slot="control-block-start-inline-center" >
    <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>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

הרכיב gmp-place-details-compact מכיל רכיב בן, gmp-place-details-place-request, כדי לבחור את המקום. זה יכול להיות אובייקט Place, מזהה מקום או שם המשאב של מקום בפורמט'places/{place_id}:

<gmp-place-details-place-request place = "ChIJC8HakaIRkFQRiOgkgdHmqkk"></gmp-place-details-place-request>
index.html

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

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

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

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

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

<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 באלמנט gmp-place-all-content> כדי להציג את כל הפרטים שזמינים באלמנט הקומפקטי, או באלמנט gmp-place-standard-content> כדי להציג הגדרה רגילה.

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

gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);

  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  margin-top: 100px;
  overflow-y: hidden;
}
style.css

דוגמה למאפייני צבע ב-CSS

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
//@ts-ignore
const marker = document.querySelector('gmp-advanced-marker');
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    await google.maps.importLibrary("places");
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Set marker collision behavior.
    marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
    // Add marker to place location.
    marker.position = { lat: 47.75972, lng: -122.25094 };
}
initMap();
index.js

הערה: קובץ ה-JavaScript נוצר מהקטע של TypeScript.

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
body {
  display: flex;
  width: 100%;
  height: 100%;
}

gmp-map {
  height: 600px;
  pointer-events: none; 
}
gmp-place-details-compact {
  /* Sets the color for text and icons on the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-on-surface: light-dark(black, white);
  /* Sets the background color of the surface */
  /* Adapts automatically to the user's system light/dark mode preference */
  --gmp-mat-color-surface: light-dark(white, black);

  /* Defines the primary font stack used within the component */
  --gmp-mat-font-family: Google Sans Text, sans-serif;
  /* Defines the style for medium body text (e.g., address, descriptions) */
  --gmp-mat-font-body-medium: normal 400 0.875em/1.25em var(--gmp-mat-font-family, 'Google Sans Text');

  width: 360px;
  margin-top: 100px;
  overflow-y: hidden;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <gmp-map center="47.75972, -122.25094" zoom="19" map-id="DEMO_MAP_ID">
      <gmp-place-details-compact orientation = "horizontal" slot="control-block-start-inline-center">
        <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>
      <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "beta"});</script>
  </body>
</html>
index.html

רכיב פרטי המקום (ניסיוני)

המוצר או התכונה האלה הם ניסיוניים (טרום-GA). יכול להיות שהתמיכה בתכונות ובמוצרים בגרסת טרום-GA תהיה מוגבלת, וששינויים בתכונות ובמוצרים בגרסת טרום-GA לא יהיו תואמים לגרסאות אחרות של טרום-GA. המוצרים בגרסת טרום-GA כפופים לתנאים הספציפיים לשירות של הפלטפורמה של מפות Google. מידע נוסף זמין בקטע תיאורים של שלבי ההשקה.

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

• השיטה configureFromPlace גורמת להצגה של הרכיב 'פרטי המקום' על סמך מזהה מקום או אובייקט Place.
• השיטה configureFromLocation גורמת להצגה של הרכיב 'פרטי המקום' על סמך קואורדינטות של קו אורך וקו רוחב.

טיפ: האובייקט Place שמוחזר על ידי Places UI Kit מכיל רק את מזהה המקום, המיקום והתצוגה הניתנת לצפייה של המקום שעבר עיבוד. אם הפעלתם את Places API בפרויקט, תוכלו לקבל מידע נוסף על המקום על ידי קריאה לפונקציה place.fetchFields().

בדוגמה שבקטע הזה, הרכיב 'פרטי המקום' מוצג כשהמשתמש לוחץ על המפה. כדי להוסיף פרטי מקום למפה, מוסיפים אלמנט gmp-place-details לדף ה-HTML. מגדירים את המיקום והגודל שלו באמצעות המאפיינים size ו-slot, בהתאמה. בדוגמה הבאה, הוא מוטמע בתוך אלמנט gmp-map עם הערך size שמוגדר ל-x-large והערך slot שמוגדר ל-control-inline-start-block-start.

<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 size="x-large"></gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>
index.html

ה-querySelector משמש לבחירת כל רכיב בדף לצורך אינטראקציה:

const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');
index.js

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

// Add an event listener to handle map clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            await placeDetails.configureFromPlace({ id: event.placeId });
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            await placeDetails.configureFromLocation(event.latLng);
        }
        // Get the offset center.
        let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
        // Show the marker at the selected place.
        marker.position = placeDetails.place.location;
        marker.style.display = 'block';
        map.innerMap.panTo(adjustedCenter);
    });
}
index.js

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

JavaScript

// Use querySelector to select elements for interaction.
const map = document.querySelector('gmp-map');
const placeDetails = document.querySelector('gmp-place-details');
const marker = document.querySelector('gmp-advanced-marker');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement, PinElement } = await google.maps.importLibrary("marker");
    const { Place } = await google.maps.importLibrary("places");
    // Hide the map type control.
    map.innerMap.setOptions({ mapTypeControl: false });
    // Set the default selection.
    const place = new Place({
        id: "ChIJC8HakaIRkFQRiOgkgdHmqkk",
        requestedLanguage: "en", // optional
    });
    await placeDetails.configureFromPlace(place);
    let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
    map.innerMap.panTo(adjustedCenter);
    map.innerMap.setZoom(16);
    marker.position = placeDetails.place.location;
    marker.style.display = 'block';
    marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
    // Add an event listener to handle map clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (event.placeId) {
            // Fire when the user clicks a POI.
            await placeDetails.configureFromPlace({ id: event.placeId });
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            await placeDetails.configureFromLocation(event.latLng);
        }
        // Get the offset center.
        let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
        // Show the marker at the selected place.
        marker.position = placeDetails.place.location;
        marker.style.display = 'block';
        map.innerMap.panTo(adjustedCenter);
    });
}
// Helper function to offset the map center.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();
index.js

הערה: קובץ ה-JavaScript נוצר מהקטע של TypeScript.

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
  height: 100%;
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  display: block;
}

h1 {
  font-size: 16px;
  text-align: center;
}

gmp-map {
  height: 400px;
}

gmp-place-details {
  background-color: #fff;
  border-radius: 8px;
  margin: 20px;
  width: 400px;
  padding: 12px;
  margin-top: 10px;
  overflow-y: auto;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  height: 400px;
  width: 457px; 
  overflow-y: auto;
  overflow-x: hidden;
}
style.css

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Click on the map to view place details</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <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 size="x-large"></gmp-place-details>
      </div>
      <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <script>(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: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "alpha"});</script>
  </body>
</html>
index.html