השקת Places UI Kit: ספריית רכיבים מוכנה לשימוש בעלות נמוכה, שמאפשרת לכם להוסיף לכל מפה שתבחרו את ממשק המשתמש המוכר של 'מקומות' במפות Google. כדאי לנסות אותו ולשלוח לנו משוב כדי לעזור לנו לעצב את העתיד של GMP.

דף זה תורגם על ידי Cloud Translation API.

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

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

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

רכיב Place Details

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

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

כדי להציג פרטים של מקום במפה, מוסיפים רכיב gmp-place-details לרכיב gmp-map בדף ה-HTML. כוללים רכיב צאצא, gmp-place-details-place-request, כדי לבחור את המקום. זה יכול להיות אובייקט של מקום, מזהה מקום או שם משאב של מקום בפורמט places/{place_id}:

<gmp-map center="47.759737, -122.250632" zoom="16" map-id="DEMO_MAP_ID">
    <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>index.html

<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-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-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-reviews></gmp-place-reviews>
        <gmp-place-feature-list></gmp-place-feature-list>
        <gmp-place-media
          lightbox-preferred
          ></gmp-place-media>
          <gmp-place-attribution light-scheme-color="gray" dark-scheme-color="white"></gmp-place-attribution>
      </gmp-place-content-config>
    </gmp-place-details>
  </div>
  <gmp-advanced-marker></gmp-advanced-marker>
</gmp-map>

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

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

הרכיב 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 Custom Styling.

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

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');
let center = { lat: 47.759737, lng: -122.250632 };
async function initMap() {
    // Request needed libraries.
    await google.maps.importLibrary("maps");
    await google.maps.importLibrary("marker");
    await 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 && placeDetails.place.location) {
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, -0.005);
            map.innerMap.panTo(adjustedCenter);
            map.innerMap.setZoom(16); // Set zoom after panning if needed
            marker.position = placeDetails.place.location;
            marker.collisionBehavior = google.maps.CollisionBehavior.REQUIRED_AND_HIDES_OPTIONAL;
            marker.style.display = 'block';
        }
    };
    // Set up map once widget is loaded.
    placeDetails.addEventListener('gmp-load', (event) => {
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    map.innerMap.addListener('click', async (event) => {
        marker.position = null;
        event.stop();
        if (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';
        }
    });
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, longitudeOffset) {
    const newLng = latLng.lng() + longitudeOffset;
    return new google.maps.LatLng(latLng.lat(), newLng);
}
initMap();index.js

CSS

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    display: flex; /* Use flexbox for layout */
    justify-content: center; /* Center the content horizontally */
    align-items: flex-start; /* Align items to the top */
    width: 100%
}

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

gmp-map {
  height: 500px;
}

gmp-place-details {
  border-radius: 0px;
  margin: 20px;
  width: 400px;
  height: 500px;
  margin-top: 0px;
}

gmp-advanced-marker {
    display: none;
}

.widget-container {
  min-width: 400px;
  overflow-y: none;
  overflow-x: none;
}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">
        <gmp-advanced-marker></gmp-advanced-marker>
    </gmp-map>
    <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>
    <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: "weekly"});</script>
  </body>
</html>index.html

Place Details Compact Element

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

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

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

<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-content-config כדי לבחור ולהגדיר את פרטי המקום. הרכיב 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 Custom Styling.

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

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

JavaScript

// Use querySelector to select elements for interaction.
const mapContainer = document.getElementById("map-container");
const placeDetails = document.querySelector("gmp-place-details-compact");
const placeDetailsRequest = document.querySelector("gmp-place-details-place-request");
let gMap;
let marker;
async function initMap() {
    const { PlaceDetailsCompactElement, PlaceDetailsPlaceRequestElement } = await google.maps.importLibrary("places");
    const { Map } = await google.maps.importLibrary("maps");
    const { AdvancedMarkerElement } = await google.maps.importLibrary("marker");
    gMap = new Map(mapContainer, { mapId: 'DEMO_MAP_ID' });
    marker = new AdvancedMarkerElement({ map: gMap });
    // Hide the map type control.
    gMap.setOptions({ mapTypeControl: false });
    // Set up map, marker, and infowindow once widget is loaded.
    placeDetails.style.visibility = 'visible';
    placeDetails.addEventListener('gmp-load', (event) => {
        console.log("placeDetails initialized!");
        updateMapAndMarker();
    });
    // Add an event listener to handle clicks.
    gMap.addListener("click", async (event) => {
        event.stop();
        // Fire when the user clicks on a POI.
        if (event.placeId) {
            console.log("clicked on POI");
            console.log(event.placeId);
            placeDetailsRequest.place = event.placeId;
            updateMapAndMarker();
        }
        else {
            // Fire when the user clicks the map (not on a POI).
            console.log('No place was selected.');
        }
        ;
    });
    // Function to update map, marker, and infowindow based on place details
    const updateMapAndMarker = () => {
        console.log("function called");
        if (placeDetails.place && placeDetails.place.location) {
            marker.gMap = null;
            let adjustedCenter = offsetLatLngRight(placeDetails.place.location, 0.002);
            gMap.panTo(adjustedCenter);
            gMap.setZoom(16); // Set zoom after panning if needed
            marker.content = placeDetails;
            marker.position = placeDetails.place.location;
        }
        else {
            console.log("else");
        }
    };
}
// Helper function to offset marker placement for better visual appearance.
function offsetLatLngRight(latLng, latitudeOffset) {
    const newLat = latLng.lat() + latitudeOffset;
    return new google.maps.LatLng(newLat, latLng.lng());
}
initMap();index.js

CSS

html,
body {
  display: flex;
  width: 100%;
  height: 400px;
  margin: 0;
}

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

#map-container {
    box-sizing: border-box;
    width: 100%;
}
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;
  border: none;
  padding: 0;
  margin: 0;
  position: relative;
  transform: translate(0, calc(-20px));
}

/* This creates the pointer attached to the bottom of the element. */
gmp-place-details-compact::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 16px solid transparent;
  border-right: 16px solid transparent;
  border-top: 20px solid var(--gmp-mat-color-surface, light-dark(white, black));
}
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>
    <div id = "map-container"></div>
    <gmp-place-details-compact orientation="horizontal">
        <gmp-place-details-place-request place = ChIJn97JQNpC1moRIcJsVMEQLI8></gmp-place-details-place-request>
        <gmp-place-all-content></gmp-place-all-content>
    </gmp-place-details-compact>
    <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: "weekly"
        });
    </script>  
  </body>
</html>index.html

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

רכיב Place Details

הגדרת התוכן

הגדרת המראה

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

JavaScript

CSS

HTML

Place Details Compact Element

הגדרת התוכן

הגדרת המראה

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

JavaScript

CSS

HTML

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