องค์ประกอบรายละเอียดสถานที่ขั้นสูง (ตัวอย่าง)

องค์ประกอบรายละเอียดสถานที่ขั้นสูงและองค์ประกอบรายละเอียดสถานที่ขั้นสูงแบบย่อ เป็นองค์ประกอบ HTML ที่แสดงรายละเอียดของสถานที่

  • The AdvancedPlaceDetailsElement รองรับข้อมูลสถานที่ทั้งหมด ที่แสดงเป็นภาพได้ และอาจมีรูปภาพหลายรูป
  • AdvancedPlaceDetailsCompactElement ออกแบบมาให้ใช้พื้นที่น้อยที่สุดและแสดงข้อมูลที่กระชับเกี่ยวกับสถานที่ ซึ่งรวมถึงชื่อ ที่อยู่ คะแนน ฯลฯ และอาจมีรูปภาพรูปเดียวด้วย

ทั้งองค์ประกอบรายละเอียดสถานที่ขั้นสูงและองค์ประกอบรายละเอียดสถานที่ขั้นสูงแบบย่อมี ฟีเจอร์ขั้นสูงเหมือนกัน ซึ่งรวมถึงการปรับแต่งปุ่มการดำเนินการ การละเว้นชื่อสถานที่ และ การกรองรีวิวและสื่อ

ใช้ เครื่องมือการปรับแต่ง เพื่อแสดงภาพว่าชุดพร็อพเพอร์ตี้ต่างๆ จะส่งผลต่อลักษณะที่ปรากฏ ขององค์ประกอบรายละเอียดสถานที่อย่างไร และเข้าถึงโค้ดใน HTML/CSS, Kotlin/XML, และ Swift

องค์ประกอบรายละเอียดสถานที่ขั้นสูง (ตัวอย่าง)

คลิกตัวทำเครื่องหมายบนแผนที่เพื่อดูรายละเอียดสถานที่ในองค์ประกอบรายละเอียดสถานที่ขั้นสูง

AdvancedPlaceDetailsElement รองรับองค์ประกอบเนื้อหาที่หลากหลาย ซึ่งรวมถึงเวลาทำการทั้งหมด เว็บไซต์ หมายเลขโทรศัพท์ สรุปที่ขับเคลื่อนด้วย AI พร้อมการสำรองข้อมูลเป็นสรุปจากบรรณาธิการ ไฮไลต์เฉพาะประเภท รีวิว สรุปรีวิวที่ขับเคลื่อนด้วย AI, Plus Code และรายการฟีเจอร์

หากต้องการแสดงรายละเอียดสถานที่บนแผนที่ ให้เพิ่มองค์ประกอบ gmp-advanced-place-details ลงในองค์ประกอบ gmp-map ในหน้า HTML และเพิ่มองค์ประกอบย่อย gmp-place-details-place-request เพื่อเลือกสถานที่ ซึ่งอาจเป็น ออบเจ็กต์สถานที่, รหัสสถานที่ หรือชื่อทรัพยากรของสถานที่ 

<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 ของสถานที่และรีวิวตามลำดับ ลำดับขององค์ประกอบย่อย ไม่มีผล เนื่องจากระบบจะแสดงรายละเอียดที่เลือกตามลำดับที่กำหนดไว้ล่วงหน้าเสมอ

คุณสามารถกำหนดค่าองค์ประกอบบางรายการเพิ่มเติมได้โดยใช้แอตทริบิวต์เฉพาะเนื้อหา

  • องค์ประกอบ gmp-place-media ใช้เพื่อแสดงรูปภาพรูปเดียว และมีแอตทริบิวต์ lightbox-preferred ที่จะเปิดรูปภาพในไลต์บ็อกซ์เมื่อคลิก ระบบจะปิดใช้ไลต์บ็อกซ์ไว้โดยค่าเริ่มต้น
  • The gmp-place-attribution element is used to display overarching Maps API data attribution configurations, such as the source of a photo or review. แอตทริบิวต์ light-scheme-color และ dark-scheme-color ใช้เพื่อกำหนดสีของ ข้อความแสดงแหล่งที่มาในโหมดสว่างและโหมดมืด

ดูข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบ เนื้อหาทั้งหมดที่รองรับได้ในเอกสารอ้างอิง การปรับแต่งเนื้อหาของวิดเจ็ตสถานที่

นอกจากนี้ คุณยังใช้ gmp-place-all-content เพื่อแสดงรายละเอียดทั้งหมดที่มีในองค์ประกอบรายละเอียดสถานที่ขั้นสูง หรือ ใช้ gmp-place-standard-content เพื่อแสดงการกำหนดค่ามาตรฐานก็ได้

กำหนดค่าลักษณะที่ปรากฏ

ช่วงความกว้างที่แนะนำสำหรับองค์ประกอบ gmp-advanced-place-details คือ 250-400 พิกเซล ความกว้างที่น้อยกว่า 250 พิกเซลอาจแสดงผลไม่ถูกต้อง ตั้งค่าความสูงให้เหมาะกับ แอปพลิเคชันของคุณ องค์ประกอบรายละเอียดสถานที่ขั้นสูงออกแบบมาให้เลื่อน ภายในพื้นที่ที่จัดสรรไว้ตามความจำเป็น

องค์ประกอบ gmp-advanced-place-details ยังรองรับพร็อพเพอร์ตี้ CSS ที่กำหนดเองที่หลากหลายเพื่อกำหนดค่าสีและ แบบอักษรขององค์ประกอบ ดูรายละเอียดเพิ่มเติมได้ที่ การจัดรูปแบบที่กำหนดเองของ Places UI Kit

องค์ประกอบรายละเอียดสถานที่ขั้นสูงแบบย่อ (ตัวอย่าง)

คลิกตัวทำเครื่องหมายบนแผนที่เพื่อดูรายละเอียดสถานที่ในองค์ประกอบรายละเอียดสถานที่ขั้นสูง แบบย่อ

The AdvancedPlaceDetailsCompactElement แสดงรายละเอียดของสถานที่ที่เลือกโดยใช้พื้นที่น้อยที่สุด ซึ่งอาจมีประโยชน์ในหน้าต่างข้อมูลที่ไฮไลต์สถานที่บนแผนที่ ในประสบการณ์การใช้งานโซเชียลมีเดีย เช่น การแชร์สถานที่ในการแชท เป็นคำแนะนำสำหรับการเลือกสถานที่ปัจจุบัน หรือภายในบทความสื่อเพื่ออ้างอิงสถานที่ใน Google Maps The AdvancedPlaceDetailsCompactElement สามารถแสดงชื่อ ที่อยู่ คะแนน ประเภท ราคา ไอคอนการช่วยเหลือพิเศษ สถานะเปิด และรูปภาพรูปเดียว โดยสามารถแสดงในแนวนอนหรือแนวตั้งตามที่เลือกโดยแอตทริบิวต์ orientation

ในข้อมูลโค้ดต่อไปนี้ ระบบจะกำหนดค่า gmp-advanced-place-details-compact โดยตั้งค่า orientation เป็น horizontal แอตทริบิวต์เพิ่มเติม truncation-preferred จะตัดเนื้อหาบางส่วนให้พอดีกับ 1 บรรทัดแทนที่จะขึ้นบรรทัดใหม่ องค์ประกอบ gmp-advanced-place-details-compact มีองค์ประกอบย่อย gmp-place-details-place-request เพื่อเลือกสถานที่ ซึ่งอาจเป็น ออบเจ็กต์สถานที่, รหัสสถานที่ หรือชื่อทรัพยากรของสถานที่ 

  <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 เพื่อแสดงรายละเอียดทั้งหมดที่มีในองค์ประกอบรายละเอียดสถานที่ขั้นสูงแบบย่อ หรือใช้ gmp-place-standard-content เพื่อแสดงการกำหนดค่ามาตรฐานก็ได้

กำหนดค่าลักษณะที่ปรากฏ

ช่วงความกว้างที่แนะนำสำหรับ gmp-advanced-place-details-compact องค์ประกอบในแนวตั้ง คือ 180-300 พิกเซล ความกว้างที่น้อยกว่า 160 พิกเซลอาจแสดงผลไม่ถูกต้อง อย่าตั้งค่าความสูงคงที่

ช่วงความกว้างที่แนะนำสำหรับองค์ประกอบ gmp-advanced-place-details-compact ในแนวนอน คือ 180-500 พิกเซล ความกว้างที่น้อยกว่า 160 พิกเซลอาจแสดงผลไม่ถูกต้อง ระบบจะไม่แสดงรูปภาพขนาดย่อหากความกว้างน้อยกว่า 350 พิกเซล อย่าตั้งค่าความสูงคงที่

องค์ประกอบ gmp-advanced-place-details-compact ยังรองรับพร็อพเพอร์ตี้ CSS ที่กำหนดเองที่หลากหลายเพื่อกำหนดค่าสีและแบบอักษรขององค์ประกอบ ดูรายละเอียดเพิ่มเติมได้ที่ การจัดรูปแบบที่กำหนดเองของ Places UI Kit

โปรดทราบว่าหากเพิ่มองค์ประกอบรายละเอียดสถานที่ขั้นสูงแบบย่อลงใน หน้าต่างข้อมูล คุณต้องใช้การจัดรูปแบบที่กำหนดเองกับ องค์ประกอบ 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;
}

ตัวอย่างนี้แสดงการเพิ่ม AdvancedPlaceDetailsCompactElement ลงในแผนที่แบบเป็นโปรแกรมโดยใช้ InfoWindow และ AdvancedMarkerElement

ฟีเจอร์ขั้นสูง

ปรับแต่งปุ่มการดำเนินการ

เพิ่มปุ่มการดำเนินการเป็นองค์ประกอบย่อยโดยตรงของคอมโพเนนต์รายละเอียดสถานที่ขั้นสูง ใช้ <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);
});