Places Widgets

คลาส PlaceAutocompleteElement

class google.maps.places.PlaceAutocompleteElement extends HTMLElement implements PlaceAutocompleteElementOptions
library "places"

PlaceAutocompleteElement เป็นคลาสย่อย HTMLElement ซึ่งมีคอมโพเนนต์ UI สำหรับ Places Autocomplete API

PlaceAutocompleteElement จะใช้ AutocompleteSessionToken ภายในโดยอัตโนมัติเพื่อจัดกลุ่มระยะการค้นหาและการเลือกของการค้นหาด้วยการเติมข้อความอัตโนมัติของผู้ใช้

การเรียกใช้ Place.fetchFields ครั้งแรกใน Place ที่ PlacePrediction.toPlace แสดงผลจะรวมโทเค็นของเซสชันที่ใช้ดึงข้อมูล PlacePrediction โดยอัตโนมัติ

ดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีการทำงานของเซสชันได้ที่ https://developers.google.com/maps/documentation/places/web-service/place-session-tokens

<gmp-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-place-autocomplete>

const {PlaceAutocompleteElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceAutocompleteElement	PlaceAutocompleteElement([options]) พารามิเตอร์ options: PlaceAutocompleteElementOptions optional

พร็อพเพอร์ตี้
description attr: description	ประเภท: string optional คำอธิบายที่จะใช้สำหรับองค์ประกอบอินพุต โปรแกรมอ่านหน้าจอจะตรวจพบข้อมูลนี้เมื่อโฟกัสองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby แอตทริบิวต์ HTML: description="string"
disabled attr: disabled	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean องค์ประกอบอินพุตปิดใช้อยู่หรือไม่ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled แอตทริบิวต์ HTML: disabled
futureOpeningBusinessesIncluded attr: future-opening-businesses-included	ประเภท: boolean optional ระบุว่าจะรวมสถานที่ที่ยังไม่เปิดแต่คาดว่าจะเปิดในอนาคตหรือไม่ แอตทริบิวต์ HTML: future-opening-businesses-included
includedPrimaryTypes attr: included-primary-types	ประเภท: Array<string> optional ประเภทสถานที่หลักที่รวมอยู่ (เช่น "ร้านอาหาร" หรือ "ปั๊มน้ำมัน") ระบบจะแสดงผลสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML: included-primary-types="type1 type2 type3..."
includedRegionCodes attr: included-region-codes	ประเภท: Array<string> optional รวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ ซึ่งระบุเป็นรหัสภูมิภาค CLDR แบบ 2 อักขระได้สูงสุด 15 รหัส ชุดที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกัน แอตทริบิวต์ HTML: included-region-codes="c1 c2 c3..."
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
locationBias	ประเภท: LocationBias optional ขอบเขตหรือคำแนะนำแบบคร่าวๆ ที่จะใช้เมื่อค้นหาสถานที่
locationRestriction	ประเภท: LocationRestriction optional ขอบเขตเพื่อจำกัดผลการค้นหา
maxlength attr: maxlength	ประเภท: number optional จำนวนอักขระสูงสุดที่ผู้ใช้ป้อนได้ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength แอตทริบิวต์ HTML: maxlength="number"
name attr: name	ประเภท: string optional ชื่อที่จะใช้สำหรับองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name เป็นไปตามลักษณะการทำงานเดียวกันกับแอตทริบิวต์ชื่อสำหรับอินพุต โปรดทราบว่าชื่อนี้จะใช้เมื่อส่งแบบฟอร์ม ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form แอตทริบิวต์ HTML: name="string"
noClearButton attr: no-clear-button	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ซ่อนปุ่มล้างหรือไม่ แอตทริบิวต์ HTML: no-clear-button
noInputIcon attr: no-input-icon	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ซ่อนไอคอนอินพุตหรือไม่ แอตทริบิวต์ HTML: no-input-icon
origin attr: origin	ประเภทอินพุต: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ประเภทเอาต์พุต: LatLngAltitude optional ต้นทางที่จะใช้คำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณ หากระบุไว้ แอตทริบิวต์ HTML: origin="lat,lng" origin="lat,lng,altitude"
placeholder attr: placeholder	ประเภท: string optional ข้อความตัวยึดตำแหน่งที่จะใช้สำหรับองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder แอตทริบิวต์ HTML: placeholder="string"
pureServiceAreaBusinessesIncluded attr: pure-service-area-businesses-included	ประเภท: boolean optional ระบุว่าจะรวมสถานที่ที่เป็นธุรกิจที่ให้บริการตามสถานที่เท่านั้นหรือไม่ แอตทริบิวต์ HTML: pure-service-area-businesses-included
readonly attr: readonly	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean องค์ประกอบอินพุตเป็นแบบอ่านอย่างเดียวหรือไม่ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly แอตทริบิวต์ HTML: readonly
requestedLanguage attr: requested-language	ประเภท: string optional ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับที่สูงขึ้น แต่คำแนะนำไม่ได้จำกัดเฉพาะภาษานี้ ดูรายการภาษาที่รองรับ แอตทริบิวต์ HTML: requested-language="string"
requestedRegion attr: requested-region	ประเภท: string optional รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดคำแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") แบบ 2 อักขระ รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 โดยมีข้อยกเว้นที่สำคัญบางประการ ตัวอย่างเช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับหน่วยงาน "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ") แอตทริบิวต์ HTML: requested-region="string"
unitSystem attr: unit-system	ประเภทอินพุต: UnitSystem optional ประเภทเอาต์พุต: UnitSystem optional ระบบหน่วยที่ใช้แสดงระยะทาง หากไม่ได้ระบุ ระบบหน่วยจะกำหนดโดย requestedRegion แอตทริบิวต์ HTML: unit-system="value-name"
value	ประเภทอินพุต: string optional ประเภทเอาต์พุต: string ค่าขององค์ประกอบอินพุต

สล็อต
clear-icon	วางองค์ประกอบที่มีช่องในตำแหน่งไอคอนล้าง ปุ่มล้างจะแสดงที่ท้ายช่องป้อนข้อมูลเมื่อมีข้อความในช่องป้อนข้อมูล
input-icon	วางองค์ประกอบที่มีช่องในตำแหน่งไอคอนอินพุต ไอคอนอินพุตจะแสดงที่จุดเริ่มต้นของช่องป้อนข้อมูลในโหมดอินไลน์
prediction-item-icon	ช่องนี้ยอมรับองค์ประกอบ <template> เพียงรายการเดียวเพื่อแสดงผลเป็นไอคอนที่แสดงข้างรายการการคาดคะเน

ชิ้นส่วน
focus-ring	องค์ประกอบที่ใช้แสดงวงแหวนโฟกัสรอบองค์ประกอบที่โฟกัส (อินพุตหรือรายการการคาดคะเน)
input	องค์ประกอบอินพุตสำหรับองค์ประกอบการเติมข้อความอัตโนมัติ
prediction-item	รายการในเมนูแบบเลื่อนลงของการคาดคะเนที่แสดงการคาดคะเนเดียว
prediction-item-icon	ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน
prediction-item-main-text	ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความหลักของการคาดคะเน สำหรับสถานที่ตั้งทางภูมิศาสตร์ ข้อมูลนี้จะประกอบด้วยชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อถนนและหมายเลข เช่น "10 King Street" โดยค่าเริ่มต้น prediction-item-main-text จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับการจัดรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-match	ส่วนของการคาดคะเนที่แสดงผลซึ่งตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นการทำข้อความเป็นตัวหนา โปรดทราบว่าระบบจะไฮไลต์ข้อความที่ตรงกันภายใน prediction-item-main-text เท่านั้น
prediction-item-nonmatch	ส่วนของข้อความหลักในการคาดคะเนที่ไม่ตรงกับข้อมูลที่ผู้ใช้ป้อน
prediction-item-secondary-text	ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความรองของการคาดคะเน โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-selected	รายการเมื่อผู้ใช้ไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งรูปแบบส่วนนี้และรูปแบบส่วนรายการการคาดคะเน
prediction-list	องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการ Place Autocomplete รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement

พร็อพเพอร์ตี้ CSS
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color	ลบล้างแบบอักษรขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font	ลบล้างแบบอักษรขององค์ประกอบ
font-family	ลบล้างแบบอักษรขององค์ประกอบ
font-size	ลบล้างแบบอักษรขององค์ประกอบ
font-style	ลบล้างแบบอักษรขององค์ประกอบ
font-weight	ลบล้างแบบอักษรขององค์ประกอบ
line-height	ลบล้างแบบอักษรขององค์ประกอบ

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(errorEvent) อาร์กิวเมนต์ errorEvent: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-select	function(placePredictionSelectEvent) อาร์กิวเมนต์ placePredictionSelectEvent: PlacePredictionSelectEvent optional เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ PlacePrediction ซึ่งแปลงเป็นออบเจ็กต์ Place ได้

อินเทอร์เฟซ PlaceAutocompleteElementOptions

อินเทอร์เฟซ google.maps.places.PlaceAutocompleteElementOptions
ติดตั้งใช้งานโดย PlaceAutocompleteElement

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

พร็อพเพอร์ตี้
description ไม่บังคับ	ประเภท: string optional คำอธิบายที่จะใช้สำหรับองค์ประกอบอินพุต โปรแกรมอ่านหน้าจอจะตรวจพบข้อมูลนี้เมื่อโฟกัสองค์ประกอบอินพุต
disabled ไม่บังคับ	ประเภท: boolean optional
futureOpeningBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional
includedPrimaryTypes ไม่บังคับ	ประเภท: Array<string> optional
includedRegionCodes ไม่บังคับ	ประเภท: Array<string> optional
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional
locationBias ไม่บังคับ	ประเภท: LocationBias optional
locationRestriction ไม่บังคับ	ประเภท: LocationRestriction optional
maxlength ไม่บังคับ	ประเภท: number optional
name ไม่บังคับ	ประเภท: string optional
noClearButton ไม่บังคับ	ประเภท: boolean optional
noInputIcon ไม่บังคับ	ประเภท: boolean optional
origin ไม่บังคับ	ประเภท: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
placeholder ไม่บังคับ	ประเภท: string optional
pureServiceAreaBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional
readonly ไม่บังคับ	ประเภท: boolean optional
requestedLanguage ไม่บังคับ	ประเภท: string optional
requestedRegion ไม่บังคับ	ประเภท: string optional
unitSystem ไม่บังคับ	ประเภท: UnitSystem optional
value ไม่บังคับ	ประเภท: string optional ค่าขององค์ประกอบอินพุต

คลาส PlacePredictionSelectEvent

class google.maps.places.PlacePredictionSelectEvent extends Event
library "places"

ระบบจะสร้างเหตุการณ์นี้หลังจากที่ผู้ใช้เลือกรายการการคาดคะเนด้วย PlaceAutocompleteElement เข้าถึงรายการที่เลือกด้วย event.placePrediction

แปลง placePrediction เป็น Place โดยเรียกใช้ PlacePrediction.toPlace

const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places");

พร็อพเพอร์ตี้
placePrediction readonly	ประเภท: PlacePrediction แปลงเป็น Place โดยเรียกใช้ PlacePrediction.toPlace

คลาส BasicPlaceAutocompleteElement

class google.maps.places.BasicPlaceAutocompleteElement extends HTMLElement implements BasicPlaceAutocompleteElementOptions
library "places"

BasicPlaceAutocompleteElement เป็นคลาสย่อย HTMLElement ซึ่งมีคอมโพเนนต์ UI สำหรับ Places Autocomplete API

<gmp-basic-place-autocomplete
  description="string"
  disabled
  future-opening-businesses-included
  included-primary-types="type1 type2 type3..."
  included-region-codes="c1 c2 c3..."
  internal-usage-attribution-ids="space separated strings"
  maxlength="number"
  name="string"
  no-clear-button
  no-input-icon
  origin="lat,lng"
  placeholder="string"
  pure-service-area-businesses-included
  readonly
  requested-language="string"
  requested-region="string"
  unit-system="value-name">
</gmp-basic-place-autocomplete>

const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places");

ผู้ผลิต
BasicPlaceAutocompleteElement	BasicPlaceAutocompleteElement([options]) พารามิเตอร์ options: BasicPlaceAutocompleteElementOptions optional

พร็อพเพอร์ตี้
description attr: description	ประเภท: string optional คำอธิบายที่จะใช้สำหรับองค์ประกอบอินพุต โปรแกรมอ่านหน้าจอจะตรวจพบข้อมูลนี้เมื่อโฟกัสองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby แอตทริบิวต์ HTML: description="string"
disabled attr: disabled	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean องค์ประกอบอินพุตปิดใช้อยู่หรือไม่ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#disabled แอตทริบิวต์ HTML: disabled
futureOpeningBusinessesIncluded attr: future-opening-businesses-included	ประเภท: boolean optional ระบุว่าจะรวมสถานที่ที่ยังไม่เปิดแต่คาดว่าจะเปิดในอนาคตหรือไม่ แอตทริบิวต์ HTML: future-opening-businesses-included
includedPrimaryTypes attr: included-primary-types	ประเภท: Array<string> optional ประเภทสถานที่หลักที่รวมอยู่ (เช่น "ร้านอาหาร" หรือ "ปั๊มน้ำมัน") ระบบจะแสดงผลสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท แอตทริบิวต์ HTML: included-primary-types="type1 type2 type3..."
includedRegionCodes attr: included-region-codes	ประเภท: Array<string> optional รวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ ซึ่งระบุเป็นรหัสภูมิภาค CLDR แบบ 2 อักขระได้สูงสุด 15 รหัส ชุดที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกัน แอตทริบิวต์ HTML: included-region-codes="c1 c2 c3..."
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
locationBias	ประเภท: LocationBias optional ขอบเขตหรือคำแนะนำแบบคร่าวๆ ที่จะใช้เมื่อค้นหาสถานที่
locationRestriction	ประเภท: LocationRestriction optional ขอบเขตเพื่อจำกัดผลการค้นหา
maxlength attr: maxlength	ประเภท: number optional จำนวนอักขระสูงสุดที่ผู้ใช้ป้อนได้ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength แอตทริบิวต์ HTML: maxlength="number"
name attr: name	ประเภท: string optional ชื่อที่จะใช้สำหรับองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name เป็นไปตามลักษณะการทำงานเดียวกันกับแอตทริบิวต์ชื่อสำหรับอินพุต โปรดทราบว่าชื่อนี้จะใช้เมื่อส่งแบบฟอร์ม ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form แอตทริบิวต์ HTML: name="string"
noClearButton attr: no-clear-button	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ซ่อนปุ่มล้างหรือไม่ แอตทริบิวต์ HTML: no-clear-button
noInputIcon attr: no-input-icon	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ซ่อนไอคอนอินพุตหรือไม่ แอตทริบิวต์ HTML: no-input-icon
origin attr: origin	ประเภทอินพุต: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ประเภทเอาต์พุต: LatLngAltitude optional ต้นทางที่จะใช้คำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณ หากระบุไว้ แอตทริบิวต์ HTML: origin="lat,lng" origin="lat,lng,altitude"
placeholder attr: placeholder	ประเภท: string optional ข้อความตัวยึดตำแหน่งที่จะใช้สำหรับองค์ประกอบอินพุต ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder แอตทริบิวต์ HTML: placeholder="string"
pureServiceAreaBusinessesIncluded attr: pure-service-area-businesses-included	ประเภท: boolean optional ระบุว่าจะรวมสถานที่ที่เป็นธุรกิจที่ให้บริการตามสถานที่เท่านั้นหรือไม่ แอตทริบิวต์ HTML: pure-service-area-businesses-included
readonly attr: readonly	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean องค์ประกอบอินพุตเป็นแบบอ่านอย่างเดียวหรือไม่ ดูรายละเอียดได้ที่ https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#readonly แอตทริบิวต์ HTML: readonly
requestedLanguage attr: requested-language	ประเภท: string optional ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับที่สูงขึ้น แต่คำแนะนำไม่ได้จำกัดเฉพาะภาษานี้ ดูรายการภาษาที่รองรับ แอตทริบิวต์ HTML: requested-language="string"
requestedRegion attr: requested-region	ประเภท: string optional รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดคำแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") แบบ 2 อักขระ รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 โดยมีข้อยกเว้นที่สำคัญบางประการ ตัวอย่างเช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับหน่วยงาน "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ") แอตทริบิวต์ HTML: requested-region="string"
unitSystem attr: unit-system	ประเภทอินพุต: UnitSystem optional ประเภทเอาต์พุต: UnitSystem optional ระบบหน่วยที่ใช้แสดงระยะทาง หากไม่ได้ระบุ ระบบหน่วยจะกำหนดโดย requestedRegion แอตทริบิวต์ HTML: unit-system="value-name"

สล็อต
clear-icon	วางองค์ประกอบที่มีช่องในตำแหน่งไอคอนล้าง ปุ่มล้างจะแสดงที่ท้ายช่องป้อนข้อมูลเมื่อมีข้อความในช่องป้อนข้อมูล
input-icon	วางองค์ประกอบที่มีช่องในตำแหน่งไอคอนอินพุต ไอคอนอินพุตจะแสดงที่จุดเริ่มต้นของช่องป้อนข้อมูลในโหมดอินไลน์
prediction-item-icon	ช่องนี้ยอมรับองค์ประกอบ <template> เพียงรายการเดียวเพื่อแสดงผลเป็นไอคอนที่แสดงข้างรายการการคาดคะเน

ชิ้นส่วน
focus-ring	องค์ประกอบที่ใช้แสดงวงแหวนโฟกัสรอบองค์ประกอบที่โฟกัส (อินพุตหรือรายการการคาดคะเน)
input	องค์ประกอบอินพุตสำหรับองค์ประกอบการเติมข้อความอัตโนมัติ
prediction-item	รายการในเมนูแบบเลื่อนลงของการคาดคะเนที่แสดงการคาดคะเนเดียว
prediction-item-icon	ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน
prediction-item-main-text	ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความหลักของการคาดคะเน สำหรับสถานที่ตั้งทางภูมิศาสตร์ ข้อมูลนี้จะประกอบด้วยชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อถนนและหมายเลข เช่น "10 King Street" โดยค่าเริ่มต้น prediction-item-main-text จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับการจัดรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-match	ส่วนของการคาดคะเนที่แสดงผลซึ่งตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นการทำข้อความเป็นตัวหนา โปรดทราบว่าระบบจะไฮไลต์ข้อความที่ตรงกันภายใน prediction-item-main-text เท่านั้น
prediction-item-nonmatch	ส่วนของข้อความหลักในการคาดคะเนที่ไม่ตรงกับข้อมูลที่ผู้ใช้ป้อน
prediction-item-secondary-text	ส่วนของรายการการคาดคะเนซึ่งเป็นข้อความรองของการคาดคะเน โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-selected	รายการเมื่อผู้ใช้ไปยังส่วนต่างๆ โดยใช้แป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งรูปแบบส่วนนี้และรูปแบบส่วนรายการการคาดคะเน
prediction-list	องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการ Place Autocomplete รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement

พร็อพเพอร์ตี้ CSS
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color	ลบล้างแบบอักษรขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font	ลบล้างแบบอักษรขององค์ประกอบ
font-family	ลบล้างแบบอักษรขององค์ประกอบ
font-size	ลบล้างแบบอักษรขององค์ประกอบ
font-style	ลบล้างแบบอักษรขององค์ประกอบ
font-weight	ลบล้างแบบอักษรขององค์ประกอบ
line-height	ลบล้างแบบอักษรขององค์ประกอบ

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(errorEvent) อาร์กิวเมนต์ errorEvent: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-select	function(placeSelectEvent) อาร์กิวเมนต์ placeSelectEvent: PlaceSelectEvent optional เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ Place

อินเทอร์เฟซ BasicPlaceAutocompleteElementOptions

อินเทอร์เฟซ google.maps.places.BasicPlaceAutocompleteElementOptions
ติดตั้งใช้งานโดย BasicPlaceAutocompleteElement

ตัวเลือกสำหรับการสร้าง BasicPlaceAutocompleteElement

พร็อพเพอร์ตี้
description ไม่บังคับ	ประเภท: string optional คำอธิบายที่จะใช้สำหรับองค์ประกอบอินพุต โปรแกรมอ่านหน้าจอจะตรวจพบข้อมูลนี้เมื่อโฟกัสองค์ประกอบอินพุต
disabled ไม่บังคับ	ประเภท: boolean optional
futureOpeningBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional
includedPrimaryTypes ไม่บังคับ	ประเภท: Array<string> optional
includedRegionCodes ไม่บังคับ	ประเภท: Array<string> optional
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional
locationBias ไม่บังคับ	ประเภท: LocationBias optional
locationRestriction ไม่บังคับ	ประเภท: LocationRestriction optional
maxlength ไม่บังคับ	ประเภท: number optional
name ไม่บังคับ	ประเภท: string optional
noClearButton ไม่บังคับ	ประเภท: boolean optional
noInputIcon ไม่บังคับ	ประเภท: boolean optional
origin ไม่บังคับ	ประเภท: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional
placeholder ไม่บังคับ	ประเภท: string optional
pureServiceAreaBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional
readonly ไม่บังคับ	ประเภท: boolean optional
requestedLanguage ไม่บังคับ	ประเภท: string optional
requestedRegion ไม่บังคับ	ประเภท: string optional
unitSystem ไม่บังคับ	ประเภท: UnitSystem optional

คลาส PlaceDetailsElement

class google.maps.places.PlaceDetailsElement extends HTMLElement implements PlaceDetailsElementOptions
extended by AdvancedPlaceDetailsElement
library "places"

แสดงรายละเอียดของสถานที่ในเลย์เอาต์แบบเต็ม เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details> 

หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-place-details>

const {PlaceDetailsElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceDetailsElement	PlaceDetailsElement([options]) พารามิเตอร์ options: PlaceDetailsElementOptions optional

พร็อพเพอร์ตี้
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
place readonly	ประเภท: Place optional อ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน

พร็อพเพอร์ตี้ CSS
--gmp-button-border-color	สีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-radius	รัศมีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-width	ความกว้างของขอบปุ่ม "เปิดใน Maps"
--gmp-collage-border-radius-outer	รัศมีเส้นขอบของมุมด้านนอกของภาพคอลลาจสื่อ
--gmp-dialog-border-radius	รัศมีเส้นขอบของกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-disabled-surface	สีพื้นผิวที่ต้องการสื่อถึงสถานะปิดใช้หรือไม่แสดงตน ใช้สำหรับดาวรีวิวที่ว่างเปล่า
--gmp-mat-color-info	สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนรถเข็น
--gmp-mat-color-negative	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับข้อความ "ปิด" ในสถานะเปิดอยู่ตอนนี้
--gmp-mat-color-neutral-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับตัวยึดตำแหน่งรูปภาพและป้ายวันที่เผยแพร่รีวิว
--gmp-mat-color-on-neutral-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์ที่เป็นกลาง ใช้สำหรับป้ายวันที่เผยแพร่รีวิวและป้ายความพร้อมให้บริการที่ชาร์จ EV เมื่อไม่พร้อมให้บริการ
--gmp-mat-color-on-positive-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์เชิงบวก ใช้สำหรับป้ายความพร้อมให้บริการของที่ชาร์จ EV (หากมี)
--gmp-mat-color-on-secondary-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนบนปุ่ม "เปิดใน Maps"
--gmp-mat-color-on-surface	สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับข้อความปกติ
--gmp-mat-color-on-surface-variant	สีที่เน้นน้อยลงสำหรับข้อความและไอคอนเมื่อเทียบกับสีพื้นผิว ใช้สำหรับข้อความที่เน้นน้อยกว่า
--gmp-mat-color-outline-decorative	สีขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบขององค์ประกอบ
--gmp-mat-color-positive	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงบวก ใช้สำหรับข้อความ "เปิด" ในสถานะเปิดอยู่
--gmp-mat-color-positive-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่สื่อถึงความรู้สึกเชิงบวก ใช้สำหรับป้ายความพร้อมให้บริการของที่ชาร์จ EV (หากมี)
--gmp-mat-color-primary	สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับจำนวนรีวิว ลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps, ลิงก์เว็บไซต์, ไอคอนในแท็บภาพรวม และ (สีข้อความ/โฟกัส/วางเมาส์เหนือ) ในชื่อแถบแท็บ
--gmp-mat-color-secondary-container	สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว สำหรับคอมโพเนนต์ที่ด้อยกว่า เช่น ปุ่มโทนสี ใช้สำหรับพื้นหลังของปุ่ม "เปิดใน Maps"
--gmp-mat-color-surface	สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังขององค์ประกอบและกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-body-medium	ใช้สำหรับที่อยู่สถานที่ คะแนน ประเภท ราคา สถานะเปิดอยู่ เวลาทำการ รีวิว หมายเลขโทรศัพท์ เว็บไซต์ Plus Code ฟีเจอร์ยอดนิยม และเนื้อหาในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-body-small	ใช้สำหรับข้อความเนื้อหาในรายการฟีเจอร์ในแท็บ "เกี่ยวกับ"
--gmp-mat-font-display-small	ใช้สำหรับชื่อสถานที่และข้อความสำหรับส่วนหัวของแต่ละฟีเจอร์ในแท็บ "เกี่ยวกับ"
--gmp-mat-font-family	ชุดแบบอักษรพื้นฐานที่ใช้สำหรับข้อความทั้งหมด
--gmp-mat-font-headline-medium	ใช้สำหรับข้อความส่วนหัวในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-label-large	ใช้สำหรับชื่อแท็บ, ปุ่ม "เปิดใน Maps", ข้อความแสดงแหล่งที่มาของผู้รีวิวในแกลเลอรีรูปภาพ, ข้อความแสดงแหล่งที่มาของผู้รีวิวในส่วนรีวิว และลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-label-medium	ใช้สำหรับป้ายจำนวนรูปภาพและป้ายวันที่เผยแพร่รีวิว
--gmp-mat-font-title-small	ใช้สำหรับชื่อของแต่ละส่วนในแท็บ "เกี่ยวกับ"
--gmp-mat-spacing-extra-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-extra-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-medium	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-two-extra-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-star-rating-color	สีของดาวที่เติมในคะแนน
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font-size	ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ซึ่งกำหนดไว้ภายในเป็น em ค่าเริ่มต้นคือ 16px

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์

อินเทอร์เฟซ PlaceDetailsElementOptions

อินเทอร์เฟซ google.maps.places.PlaceDetailsElementOptions
ขยายโดย AdvancedPlaceDetailsElementOptions
ใช้โดย AdvancedPlaceDetailsElement, PlaceDetailsElement

ตัวเลือกสำหรับ PlaceDetailsElement

พร็อพเพอร์ตี้
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง

คลาส PlaceDetailsCompactElement

class google.maps.places.PlaceDetailsCompactElement extends HTMLElement implements PlaceDetailsCompactElementOptions
extended by AdvancedPlaceDetailsCompactElement
library "places"

แสดงรายละเอียดของสถานที่ในเลย์เอาต์ขนาดกะทัดรัด เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-place-details-compact>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-details-compact> 

หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-place-details-compact
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  truncation-preferred>
</gmp-place-details-compact>

const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceDetailsCompactElement	PlaceDetailsCompactElement([options]) พารามิเตอร์ options: PlaceDetailsCompactElementOptions optional

พร็อพเพอร์ตี้
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
orientation attr: orientation	ประเภท: PlaceDetailsOrientation optional ค่าเริ่มต้น: PlaceDetailsOrientation.VERTICAL ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ แอตทริบิวต์ HTML: orientation="value-name"
place readonly	ประเภท: Place optional อ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน
truncationPreferred attr: truncation-preferred	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false หากเป็นจริง ระบบจะตัดชื่อและที่อยู่ของสถานที่ให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่ แอตทริบิวต์ HTML: truncation-preferred

พร็อพเพอร์ตี้ CSS
--gmp-button-border-color	สีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-radius	รัศมีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-width	ความกว้างของขอบปุ่ม "เปิดใน Maps"
--gmp-dialog-border-radius	รัศมีเส้นขอบของกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-info	สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนรถเข็น
--gmp-mat-color-negative	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับข้อความ "ปิด" ในสถานะเปิดอยู่ตอนนี้
--gmp-mat-color-neutral-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับตัวยึดตำแหน่งรูปภาพ
--gmp-mat-color-on-secondary-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนบนปุ่ม "เปิดใน Maps"
--gmp-mat-color-on-surface	สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับข้อความปกติ
--gmp-mat-color-on-surface-variant	สีที่เน้นน้อยลงสำหรับข้อความและไอคอนเมื่อเทียบกับสีพื้นผิว ใช้สำหรับข้อความที่เน้นน้อยกว่า
--gmp-mat-color-outline-decorative	สีขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบขององค์ประกอบ
--gmp-mat-color-positive	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงบวก ใช้สำหรับข้อความ "เปิด" ในสถานะเปิดอยู่
--gmp-mat-color-primary	สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับจำนวนรีวิว รวมถึงลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-secondary-container	สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว สำหรับคอมโพเนนต์ที่ด้อยกว่า เช่น ปุ่มโทนสี ใช้สำหรับพื้นหลังของปุ่ม "เปิดใน Maps"
--gmp-mat-color-surface	สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังขององค์ประกอบและกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-body-medium	ใช้สำหรับข้อความเนื้อหาในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-body-small	ใช้สำหรับที่อยู่ คะแนน ประเภท ราคา และสถานะเปิดอยู่ของสถานที่
--gmp-mat-font-family	ชุดแบบอักษรพื้นฐานที่ใช้สำหรับข้อความทั้งหมด
--gmp-mat-font-headline-medium	ใช้สำหรับข้อความส่วนหัวในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-font-label-large	ใช้สำหรับปุ่ม "เปิดใน Maps" รวมถึงลิงก์ในกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps และข้อความแสดงแหล่งที่มาของผู้ตรวจสอบในแกลเลอรีรูปภาพ
--gmp-mat-font-label-medium	ใช้สำหรับป้ายจำนวนรูปภาพ
--gmp-mat-font-title-small	ใช้สำหรับชื่อสถานที่
--gmp-mat-spacing-extra-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-medium	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-star-rating-color	สีของดาวที่เติมในคะแนน
--gmp-thumbnail-border-radius	รัศมีเส้นขอบของภาพขนาดย่อของสถานที่
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font-size	ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ซึ่งกำหนดไว้ภายในเป็น em ค่าเริ่มต้นคือ 16px

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์

อินเทอร์เฟซ PlaceDetailsCompactElementOptions

อินเทอร์เฟซ google.maps.places.PlaceDetailsCompactElementOptions
ขยายโดย AdvancedPlaceDetailsCompactElementOptions
ใช้โดย AdvancedPlaceDetailsCompactElement, PlaceDetailsCompactElement

ตัวเลือกสำหรับ PlaceDetailsCompactElement

พร็อพเพอร์ตี้
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง
orientation ไม่บังคับ	ประเภท: PlaceDetailsOrientation optional ดูPlaceDetailsCompactElement.orientation
truncationPreferred ไม่บังคับ	ประเภท: boolean optional ดูPlaceDetailsCompactElement.truncationPreferred

คลาส AdvancedPlaceDetailsElement

class google.maps.places.AdvancedPlaceDetailsElement extends PlaceDetailsElement, HTMLElement implements AdvancedPlaceDetailsElementOptions, PlaceDetailsElementOptions
library "places"

แสดงรายละเอียดของสถานที่ในเลย์เอาต์แบบเต็ม เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่มองค์ประกอบ PlaceStandardContentElement, PlaceAllContentElement หรือรายละเอียดสถานที่โดยตรงเพื่อกำหนดค่าเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-advanced-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
   <gmp-place-standard-content>
   </gmp-place-standard-content>
 </gmp-advanced-place-details> 

หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-advanced-place-details
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details>

const {AdvancedPlaceDetailsElement} = await google.maps.importLibrary("places");

ผู้ผลิต
AdvancedPlaceDetailsElement	AdvancedPlaceDetailsElement([options]) พารามิเตอร์ options: AdvancedPlaceDetailsElementOptions optional

พร็อพเพอร์ตี้
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
place readonly	ประเภท: Place optional อ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน

สล็อต
action-corner	ช่วงเวลาสำหรับ PlaceLinkElement และ PlaceButtonElement
action-main	ช่วงเวลาสำหรับ PlaceLinkElement และ PlaceButtonElement
basic-section-bottom	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงที่ด้านล่างของส่วนข้อมูลพื้นฐาน ใต้ปุ่มดำเนินการหลักโดยตรง
basic-section-top	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงผลในส่วนข้อมูลพื้นฐาน เหนือชื่อสถานที่โดยตรง

พร็อพเพอร์ตี้ CSS

สืบทอด: --gmp-button-border-color, --gmp-button-border-radius, --gmp-button-border-width, --gmp-collage-border-radius-outer, --gmp-dialog-border-radius, --gmp-mat-color-disabled-surface, --gmp-mat-color-info, --gmp-mat-color-negative, --gmp-mat-color-neutral-container, --gmp-mat-color-on-neutral-container, --gmp-mat-color-on-positive-container, --gmp-mat-color-on-secondary-container, --gmp-mat-color-on-surface, --gmp-mat-color-on-surface-variant, --gmp-mat-color-outline-decorative, --gmp-mat-color-positive, --gmp-mat-color-positive-container, --gmp-mat-color-primary, --gmp-mat-color-secondary-container, --gmp-mat-color-surface, --gmp-mat-font-body-medium, --gmp-mat-font-body-small, --gmp-mat-font-display-small, --gmp-mat-font-family, --gmp-mat-font-headline-medium, --gmp-mat-font-label-large, --gmp-mat-font-label-medium, --gmp-mat-font-title-small, --gmp-mat-spacing-extra-large, --gmp-mat-spacing-extra-small, --gmp-mat-spacing-large, --gmp-mat-spacing-medium, --gmp-mat-spacing-small, --gmp-mat-spacing-two-extra-large, --gmp-star-rating-color, background-color, border, border-radius, color-scheme, font-size

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
สืบทอด: gmp-error, gmp-load

อินเทอร์เฟซ AdvancedPlaceDetailsElementOptions

interface google.maps.places.AdvancedPlaceDetailsElementOptions extends PlaceDetailsElementOptions
implemented by AdvancedPlaceDetailsElement

ตัวเลือกสำหรับ AdvancedPlaceDetailsElement

พร็อพเพอร์ตี้
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง

คลาส AdvancedPlaceDetailsCompactElement

class google.maps.places.AdvancedPlaceDetailsCompactElement extends PlaceDetailsCompactElement, HTMLElement implements AdvancedPlaceDetailsCompactElementOptions, PlaceDetailsCompactElementOptions
library "places"

แสดงรายละเอียดของสถานที่ในเลย์เอาต์ขนาดกะทัดรัด เพิ่ม PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement เพื่อระบุตำแหน่งที่จะแสดงผล เพิ่ม PlaceStandardContentElement, PlaceAllContentElement หรือระบุเนื้อหาที่เฉพาะเจาะจงเพื่อกำหนดค่าเนื้อหาที่จะแสดงผล

หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-advanced-place-details-compact
  internal-usage-attribution-ids="space separated strings">
</gmp-advanced-place-details-compact>

const {AdvancedPlaceDetailsCompactElement} = await google.maps.importLibrary("places");

ผู้ผลิต
AdvancedPlaceDetailsCompactElement	AdvancedPlaceDetailsCompactElement([options]) พารามิเตอร์ options: AdvancedPlaceDetailsCompactElementOptions optional

พร็อพเพอร์ตี้
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
place readonly	ประเภท: Place optional อ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน
สืบทอด: orientation (attr: orientation), truncationPreferred (attr: truncation-preferred)

สล็อต
action-corner	ช่วงเวลาสำหรับ PlaceLinkElement และ PlaceButtonElement
action-main	ช่วงเวลาสำหรับ PlaceLinkElement และ PlaceButtonElement
basic-section-bottom	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงที่ด้านล่างของส่วนข้อมูลพื้นฐาน ใต้ปุ่มดำเนินการหลักโดยตรง
basic-section-top	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงผลในส่วนข้อมูลพื้นฐาน เหนือชื่อสถานที่โดยตรง

พร็อพเพอร์ตี้ CSS

สืบทอด: --gmp-button-border-color, --gmp-button-border-radius, --gmp-button-border-width, --gmp-dialog-border-radius, --gmp-mat-color-info, --gmp-mat-color-negative, --gmp-mat-color-neutral-container, --gmp-mat-color-on-secondary-container, --gmp-mat-color-on-surface, --gmp-mat-color-on-surface-variant, --gmp-mat-color-outline-decorative, --gmp-mat-color-positive, --gmp-mat-color-primary, --gmp-mat-color-secondary-container, --gmp-mat-color-surface, --gmp-mat-font-body-medium, --gmp-mat-font-body-small, --gmp-mat-font-family, --gmp-mat-font-headline-medium, --gmp-mat-font-label-large, --gmp-mat-font-label-medium, --gmp-mat-font-title-small, --gmp-mat-spacing-extra-small, --gmp-mat-spacing-large, --gmp-mat-spacing-medium, --gmp-mat-spacing-small, --gmp-star-rating-color, --gmp-thumbnail-border-radius, background-color, border, border-radius, color-scheme, font-size

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
สืบทอด: gmp-error, gmp-load

อินเทอร์เฟซ AdvancedPlaceDetailsCompactElementOptions

interface google.maps.places.AdvancedPlaceDetailsCompactElementOptions extends PlaceDetailsCompactElementOptions
implemented by AdvancedPlaceDetailsCompactElement

ตัวเลือกสำหรับ AdvancedPlaceDetailsCompactElement

พร็อพเพอร์ตี้
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง
สืบทอด: orientation, truncationPreferred

ค่าคงที่ PlaceDetailsOrientation

constants google.maps.places.PlaceDetailsOrientation
library "places"

ตัวแปรการวางแนวสำหรับ PlaceDetailsCompactElement

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท PlaceDetailsOrientationString

const {PlaceDetailsOrientation} = await google.maps.importLibrary("places");

ค่าคงที่
HORIZONTAL	การวางแนวนอน
VERTICAL	การวางแนวตั้ง

คลาส PlaceDetailsPlaceRequestElement

class google.maps.places.PlaceDetailsPlaceRequestElement extends HTMLElement implements PlaceDetailsPlaceRequestElementOptions
library "places"

กำหนดค่า PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลตามออบเจ็กต์สถานที่ รหัส หรือชื่อทรัพยากร เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลสำหรับสถานที่ที่ระบุ เช่น

 <gmp-place-details>
   <gmp-place-details-place-request
     place="PLACE_ID"
   ></gmp-place-details-place-request>
 </gmp-place-details> 

<gmp-place-details-place-request
  place="places/###">
</gmp-place-details-place-request>

const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceDetailsPlaceRequestElement	PlaceDetailsPlaceRequestElement([options]) พารามิเตอร์ options: PlaceDetailsPlaceRequestElementOptions optional

พร็อพเพอร์ตี้
place attr: place	ประเภทอินพุต: Place|string optional ประเภทเอาต์พุต: Place optional ค่าเริ่มต้น: null ออบเจ็กต์ รหัส หรือชื่อทรัพยากรของสถานที่ที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่แบบกะทัดรัด พร็อพเพอร์ตี้นี้จะแสดงแอตทริบิวต์เป็นชื่อทรัพยากร แอตทริบิวต์ HTML: place="places/###"

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceDetailsPlaceRequestElementOptions

อินเทอร์เฟซ google.maps.places.PlaceDetailsPlaceRequestElementOptions
ติดตั้งใช้งานโดย PlaceDetailsPlaceRequestElement

ตัวเลือกสำหรับ PlaceDetailsPlaceRequestElement

พร็อพเพอร์ตี้
place ไม่บังคับ	ประเภท: Place|string optional ดู PlaceDetailsPlaceRequestElement.place

คลาส PlaceDetailsLocationRequestElement

class google.maps.places.PlaceDetailsLocationRequestElement extends HTMLElement implements PlaceDetailsLocationRequestElementOptions
library "places"

กำหนดค่า PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลตามตำแหน่ง เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceDetailsCompactElement หรือ PlaceDetailsElement เพื่อโหลดข้อมูลสำหรับตำแหน่งที่ระบุ เช่น

 <gmp-place-details>
   <gmp-place-details-location-request
     location="37.6207665,-122.4284806"
   ></gmp-place-details-location-request>
 </gmp-place-details> 

<gmp-place-details-location-request
  location="lat,lng">
</gmp-place-details-location-request>

const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceDetailsLocationRequestElement	PlaceDetailsLocationRequestElement([options]) พารามิเตอร์ options: PlaceDetailsLocationRequestElementOptions optional

พร็อพเพอร์ตี้
location attr: location	ประเภทอินพุต: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional ประเภทเอาต์พุต: LatLngAltitude optional ค่าเริ่มต้น: null ตำแหน่งที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่ ปรับให้เป็น LatLngAltitude แอตทริบิวต์ HTML: location="lat,lng"

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceDetailsLocationRequestElementOptions

อินเทอร์เฟซ google.maps.places.PlaceDetailsLocationRequestElementOptions
ติดตั้งใช้งานโดย PlaceDetailsLocationRequestElement

ตัวเลือกสำหรับ PlaceDetailsLocationRequestElement

พร็อพเพอร์ตี้
location ไม่บังคับ	ประเภท: LatLng|LatLngLiteral|LatLngAltitude|LatLngAltitudeLiteral optional สถานที่ตั้งที่จะแสดงสถานที่

คลาส PlaceSearchElement

class google.maps.places.PlaceSearchElement extends HTMLElement implements PlaceSearchElementOptions
extended by AdvancedPlaceSearchElement
library "places"

แสดงผลการค้นหาสถานที่ในรายการ เพิ่ม PlaceTextSearchRequestElement หรือ PlaceNearbySearchRequestElement เพื่อระบุคำขอแสดงผลลัพธ์ เพิ่ม PlaceContentConfigElement, PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

หากต้องการใช้องค์ประกอบการค้นหาสถานที่ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-place-search>

const {PlaceSearchElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceSearchElement	PlaceSearchElement([options]) พารามิเตอร์ options: PlaceSearchElementOptions optional

พร็อพเพอร์ตี้
attributionPosition attr: attribution-position	ประเภทอินพุต: PlaceSearchAttributionPosition optional ประเภทเอาต์พุต: PlaceSearchAttributionPosition ค่าเริ่มต้น: PlaceSearchAttributionPosition.TOP ตำแหน่งของโลโก้การระบุแหล่งที่มาและปุ่มการเปิดเผยทางกฎหมาย แอตทริบิวต์ HTML: attribution-position="value-name"
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
orientation attr: orientation	ประเภทอินพุต: PlaceSearchOrientation optional ประเภทเอาต์พุต: PlaceSearchOrientation ค่าเริ่มต้น: PlaceSearchOrientation.VERTICAL ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ แอตทริบิวต์ HTML: orientation="value-name"
places readonly	ประเภท: Array<Place> อ่านอย่างเดียว อาร์เรย์ของออบเจ็กต์ Place ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน
selectable attr: selectable	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false รายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะเป็นปุ่มที่ส่งเหตุการณ์ gmp-select เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วย แอตทริบิวต์ HTML: selectable
truncationPreferred attr: truncation-preferred	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false หากเป็น "จริง" ระบบจะตัดเนื้อหาบางบรรทัดให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่ แอตทริบิวต์ HTML: truncation-preferred

พร็อพเพอร์ตี้ CSS
--gmp-button-border-color	สีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-radius	รัศมีของเส้นขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-button-border-width	ความกว้างของขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-card-border-radius	รัศมีของเส้นขอบสำหรับการ์ดสถานที่
--gmp-dialog-border-radius	รัศมีของเส้นขอบสำหรับกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-info	สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น
--gmp-mat-color-negative	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับป้ายกำกับ "ปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-neutral-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับป้ายวันที่ของรีวิวและรูปร่างตัวยึดตำแหน่งการโหลด
--gmp-mat-color-on-neutral-container	สีของข้อความและไอคอนในคอนเทนเนอร์สีกลาง ใช้สำหรับข้อความวันที่ตรวจสอบและข้อความแสดงข้อผิดพลาดในการโหลด
--gmp-mat-color-on-secondary-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนของปุ่ม
--gmp-mat-color-on-surface	สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับส่วนหัวและเนื้อหาของกล่องโต้ตอบ
--gmp-mat-color-on-surface-variant	สีที่เน้นน้อยลงสำหรับข้อความและไอคอนเมื่อเทียบกับสีพื้นผิว ใช้สำหรับข้อมูลสถานที่
--gmp-mat-color-outline-decorative	สีขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบคอนเทนเนอร์
--gmp-mat-color-positive	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงบวก ใช้สำหรับป้ายกำกับ "เปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-primary	สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับลิงก์ สัญญาณบอกสถานะการโหลด และไอคอนภาพรวม
--gmp-mat-color-secondary-container	สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว ใช้สำหรับพื้นหลังของปุ่ม
--gmp-mat-color-surface	สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังคอนเทนเนอร์และกล่องโต้ตอบ
--gmp-mat-font-body-small	ใช้สำหรับข้อมูลสถานที่
--gmp-mat-font-family	ชุดแบบอักษรพื้นฐานสำหรับข้อความทั้งหมด
--gmp-mat-font-headline-medium	ใช้สำหรับส่วนหัวของกล่องโต้ตอบ
--gmp-mat-font-label-large	ใช้สำหรับเนื้อหาของปุ่ม
--gmp-mat-font-title-medium	ใช้สำหรับชื่อสถานที่
--gmp-mat-spacing-extra-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-medium	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-star-rating-color	สีของดาวที่เติมในการให้ดาว
--gmp-thumbnail-border-radius	รัศมีเส้นขอบสำหรับภาพขนาดย่อของสถานที่
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font-size	ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ค่าเริ่มต้นคือ 16px

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-select	function(event) อาร์กิวเมนต์ event: PlaceSelectEvent optional เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการ มีออบเจ็กต์ Place ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก

อินเทอร์เฟซ PlaceSearchElementOptions

อินเทอร์เฟซ google.maps.places.PlaceSearchElementOptions
ขยายโดย AdvancedPlaceSearchElementOptions
ใช้โดย AdvancedPlaceSearchElement, PlaceSearchElement

ตัวเลือกสำหรับ PlaceSearchElement

พร็อพเพอร์ตี้
attributionPosition ไม่บังคับ	ประเภท: PlaceSearchAttributionPosition optional ดูPlaceSearchElement.attributionPosition
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง
orientation ไม่บังคับ	ประเภท: PlaceSearchOrientation optional ดูPlaceSearchElement.orientation
selectable ไม่บังคับ	ประเภท: boolean optional ดู PlaceSearchElement.selectable
truncationPreferred ไม่บังคับ	ประเภท: boolean optional ดูPlaceSearchElement.truncationPreferred

คลาส PlaceItemElement

class google.maps.places.PlaceItemElement extends HTMLElement implements PlaceItemElementOptions
extended by AdvancedPlaceItemElement
library "places"

Wrapper คอมโพเนนต์เว็บสาธารณะ (<gmp-place-item>) สำหรับรายการสถานที่ องค์ประกอบที่กำหนดเอง <gmp-place-item> จะแสดงผลการ์ดผลการค้นหาสถานที่แต่ละรายการภายใน <gmp-place-search> <gmp-place-item> แต่ละรายการจะแสดงข้อมูลสถานที่ซึ่งประกอบด้วยคอมโพเนนต์ภาพย่อยจาก Places UI Kit

<gmp-place-item></gmp-place-item>

const {PlaceItemElement} = await google.maps.importLibrary("places");

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceItemElementOptions

อินเทอร์เฟซ google.maps.places.PlaceItemElementOptions
ขยายโดย AdvancedPlaceItemElementOptions
ใช้โดย AdvancedPlaceItemElement, PlaceItemElement

ตัวเลือกสำหรับ PlaceItemElement

คลาส AdvancedPlaceSearchElement

class google.maps.places.AdvancedPlaceSearchElement extends PlaceSearchElement, HTMLElement implements AdvancedPlaceSearchElementOptions, PlaceSearchElementOptions
library "places"

แสดงผลการค้นหาสถานที่ขั้นสูงในรายการ เพิ่ม PlaceTextSearchRequestElement หรือ PlaceNearbySearchRequestElement เพื่อระบุคำขอแสดงผลลัพธ์ ต่อท้ายด้วย PlaceStandardContentElement, PlaceAllContentElement หรือ <template slot="details-item"> เพื่อระบุเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-advanced-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-search> 

หากต้องการใช้องค์ประกอบการค้นหาสถานที่ขั้นสูง ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-advanced-place-search
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  selectable
  truncation-preferred>
</gmp-advanced-place-search>

const {AdvancedPlaceSearchElement} = await google.maps.importLibrary("places");

ผู้ผลิต
AdvancedPlaceSearchElement	AdvancedPlaceSearchElement([options]) พารามิเตอร์ options: AdvancedPlaceSearchElementOptions optional

พร็อพเพอร์ตี้
attributionPosition attr: attribution-position	ประเภทอินพุต: PlaceSearchAttributionPosition optional ประเภทเอาต์พุต: PlaceSearchAttributionPosition ค่าเริ่มต้น: PlaceSearchAttributionPosition.TOP ตำแหน่งของโลโก้การระบุแหล่งที่มาและปุ่มการเปิดเผยทางกฎหมาย แอตทริบิวต์ HTML: attribution-position="value-name"
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
orientation attr: orientation	ประเภทอินพุต: PlaceSearchOrientation optional ประเภทเอาต์พุต: PlaceSearchOrientation ค่าเริ่มต้น: PlaceSearchOrientation.VERTICAL ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ แอตทริบิวต์ HTML: orientation="value-name"
selectable attr: selectable	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false รายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะเป็นปุ่มที่ส่งเหตุการณ์ gmp-select เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วย แอตทริบิวต์ HTML: selectable
truncationPreferred attr: truncation-preferred	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false หากเป็น "จริง" ระบบจะตัดเนื้อหาบางบรรทัดให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่ แอตทริบิวต์ HTML: truncation-preferred
รับค่ามา: places

สล็อต
details-item	เทมเพลต HTML ที่มีวิดเจ็ตสถานที่ gmp-place เพื่อแสดงผลสำหรับสถานที่แต่ละแห่งในผลการค้นหา

พร็อพเพอร์ตี้ CSS
--gmp-button-border-color	สีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-radius	รัศมีของเส้นขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-button-border-width	ความกว้างของขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-card-border-radius	รัศมีของเส้นขอบสำหรับการ์ดสถานที่
--gmp-dialog-border-radius	รัศมีของเส้นขอบสำหรับกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-info	สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น
--gmp-mat-color-negative	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับป้ายกำกับ "ปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-neutral-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับป้ายวันที่ของรีวิวและรูปร่างตัวยึดตำแหน่งการโหลด
--gmp-mat-color-on-neutral-container	สีของข้อความและไอคอนในคอนเทนเนอร์สีกลาง ใช้สำหรับข้อความวันที่ตรวจสอบและข้อความแสดงข้อผิดพลาดในการโหลด
--gmp-mat-color-on-secondary-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนของปุ่ม
--gmp-mat-color-on-surface	สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับส่วนหัวและเนื้อหาของกล่องโต้ตอบ
--gmp-mat-color-on-surface-variant	สีที่เน้นน้อยลงสำหรับข้อความและไอคอนเมื่อเทียบกับสีพื้นผิว ใช้สำหรับข้อมูลสถานที่
--gmp-mat-color-outline-decorative	สีขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบคอนเทนเนอร์
--gmp-mat-color-positive	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงบวก ใช้สำหรับป้ายกำกับ "เปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-primary	สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับลิงก์ สัญญาณบอกสถานะการโหลด และไอคอนภาพรวม
--gmp-mat-color-secondary-container	สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว ใช้สำหรับพื้นหลังของปุ่ม
--gmp-mat-color-surface	สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังคอนเทนเนอร์และกล่องโต้ตอบ
--gmp-mat-font-body-small	ใช้สำหรับข้อมูลสถานที่
--gmp-mat-font-family	ชุดแบบอักษรพื้นฐานสำหรับข้อความทั้งหมด
--gmp-mat-font-headline-medium	ใช้สำหรับส่วนหัวของกล่องโต้ตอบ
--gmp-mat-font-label-large	ใช้สำหรับเนื้อหาของปุ่ม
--gmp-mat-font-title-medium	ใช้สำหรับชื่อสถานที่
--gmp-mat-spacing-extra-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-medium	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-star-rating-color	สีของดาวที่เติมในการให้ดาว
--gmp-thumbnail-border-radius	รัศมีเส้นขอบสำหรับภาพขนาดย่อของสถานที่
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font-size	ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ค่าเริ่มต้นคือ 16px

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-select	function(event) อาร์กิวเมนต์ event: PlaceSelectEvent optional เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการ มีออบเจ็กต์ Place ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก

อินเทอร์เฟซ AdvancedPlaceSearchElementOptions

interface google.maps.places.AdvancedPlaceSearchElementOptions extends PlaceSearchElementOptions
implemented by AdvancedPlaceSearchElement

ตัวเลือกสำหรับ AdvancedPlaceSearchElement

พร็อพเพอร์ตี้
attributionPosition ไม่บังคับ	ประเภท: PlaceSearchAttributionPosition optional ดูPlaceSearchElement.attributionPosition
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง
orientation ไม่บังคับ	ประเภท: PlaceSearchOrientation optional ดูPlaceSearchElement.orientation
selectable ไม่บังคับ	ประเภท: boolean optional ดู PlaceSearchElement.selectable
truncationPreferred ไม่บังคับ	ประเภท: boolean optional ดูPlaceSearchElement.truncationPreferred

คลาส AdvancedPlaceListElement

class google.maps.places.AdvancedPlaceListElement extends HTMLElement implements AdvancedPlaceListElementOptions
library "places"

แสดงผลการค้นหาสถานที่ในรายการ เพิ่ม PlaceDetailsPlaceRequestElement อย่างน้อย 1 รายการหรือตั้งค่าพร็อพเพอร์ตี้ places เพื่อระบุสถานที่ที่จะแสดง เพิ่ม PlaceStandardContentElement หรือ PlaceAllContentElement เพื่อระบุเนื้อหาที่จะแสดงผล

ตัวอย่างเช่น

 <gmp-advanced-place-list>
   <gmp-place-details-place-request
     place="PLACE_ID"
   </gmp-place-details-place-request>
   <template slot="details-item">
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </template>
 </gmp-advanced-place-list> 

หากต้องการใช้องค์ประกอบรายการสถานที่ขั้นสูง ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-advanced-place-list
  attribution-position="value-name"
  internal-usage-attribution-ids="space separated strings"
  orientation="value-name"
  places="space separated strings"
  selectable
  truncation-preferred>
</gmp-advanced-place-list>

const {AdvancedPlaceListElement} = await google.maps.importLibrary("places");

ผู้ผลิต
AdvancedPlaceListElement	AdvancedPlaceListElement([options]) พารามิเตอร์ options: AdvancedPlaceListElementOptions optional

พร็อพเพอร์ตี้
attributionPosition attr: attribution-position	ประเภทอินพุต: PlaceSearchAttributionPosition optional ประเภทเอาต์พุต: PlaceSearchAttributionPosition ค่าเริ่มต้น: PlaceSearchAttributionPosition.TOP ตำแหน่งของโลโก้การระบุแหล่งที่มาและปุ่มการเปิดเผยทางกฎหมาย แอตทริบิวต์ HTML: attribution-position="value-name"
internalUsageAttributionIds attr: internal-usage-attribution-ids	ประเภทอินพุต: Iterable<string> optional ประเภทเอาต์พุต: Array<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง แอตทริบิวต์ HTML: internal-usage-attribution-ids="space separated strings"
orientation attr: orientation	ประเภทอินพุต: PlaceSearchOrientation optional ประเภทเอาต์พุต: PlaceSearchOrientation ค่าเริ่มต้น: PlaceSearchOrientation.VERTICAL ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ แอตทริบิวต์ HTML: orientation="value-name"
places attr: places	ประเภทอินพุต: Iterable<Place|string> optional ประเภทเอาต์พุต: Array<Place> รายการออบเจ็กต์ Place ที่มีรหัสซึ่งควรแสดงในองค์ประกอบนี้ โปรดทราบว่าสถานที่ทั้งหมดที่ตั้งค่าไว้ในพร็อพเพอร์ตี้สถานที่อาจไม่แสดงหากแสดงผลไม่ได้(เช่น รหัสไม่ถูกต้อง ข้อผิดพลาดเกี่ยวกับคำขอเครือข่าย ฯลฯ) คุณสามารถอ่านพร็อพเพอร์ตี้สถานที่เพื่อดึงข้อมูลสถานที่ที่แสดงอยู่ในปัจจุบันได้ แอตทริบิวต์ HTML: places="space separated strings"
selectable attr: selectable	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false รายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะเป็นปุ่มที่ส่งเหตุการณ์ gmp-select เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วย แอตทริบิวต์ HTML: selectable
truncationPreferred attr: truncation-preferred	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean ค่าเริ่มต้น: false หากเป็น "จริง" ระบบจะตัดเนื้อหาบางบรรทัดให้พอดีกับบรรทัดเดียวแทนที่จะตัดขึ้นบรรทัดใหม่ แอตทริบิวต์ HTML: truncation-preferred

สล็อต
details-item	เทมเพลต HTML ที่มีวิดเจ็ตสถานที่ gmp-place เพื่อแสดงผลสำหรับสถานที่แต่ละแห่งในรายการ

พร็อพเพอร์ตี้ CSS
--gmp-button-border-color	สีเส้นขอบของปุ่ม "เปิดใน Maps"
--gmp-button-border-radius	รัศมีของเส้นขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-button-border-width	ความกว้างของขอบสำหรับปุ่ม "เปิดใน Maps"
--gmp-card-border-radius	รัศมีของเส้นขอบสำหรับการ์ดสถานที่
--gmp-dialog-border-radius	รัศมีของเส้นขอบสำหรับกล่องโต้ตอบการเปิดเผยข้อมูลของ Google Maps
--gmp-mat-color-info	สีขององค์ประกอบ UI ที่มีอารมณ์ความรู้สึกเชิงข้อมูล ใช้สำหรับไอคอนทางเข้าที่รองรับเก้าอี้รถเข็น
--gmp-mat-color-negative	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงลบ ใช้สำหรับป้ายกำกับ "ปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-neutral-container	สีคอนเทนเนอร์สำหรับองค์ประกอบ UI ที่เติมสีแบบเรียบๆ ใช้สำหรับป้ายวันที่ของรีวิวและรูปร่างตัวยึดตำแหน่งการโหลด
--gmp-mat-color-on-neutral-container	สีของข้อความและไอคอนในคอนเทนเนอร์สีกลาง ใช้สำหรับข้อความวันที่ตรวจสอบและข้อความแสดงข้อผิดพลาดในการโหลด
--gmp-mat-color-on-secondary-container	สีของข้อความและไอคอนที่ตัดกับสีคอนเทนเนอร์รอง ใช้สำหรับข้อความและไอคอนของปุ่ม
--gmp-mat-color-on-surface	สีสำหรับข้อความและไอคอนที่ตัดกับสีพื้นผิว ใช้สำหรับส่วนหัวและเนื้อหาของกล่องโต้ตอบ
--gmp-mat-color-on-surface-variant	สีที่เน้นน้อยลงสำหรับข้อความและไอคอนเมื่อเทียบกับสีพื้นผิว ใช้สำหรับข้อมูลสถานที่
--gmp-mat-color-outline-decorative	สีขอบขององค์ประกอบที่ไม่ใช่แบบอินเทอร์แอกทีฟ ใช้สำหรับเส้นขอบคอนเทนเนอร์
--gmp-mat-color-positive	สีขององค์ประกอบ UI ที่มีความรู้สึกเชิงบวก ใช้สำหรับป้ายกำกับ "เปิด" สำหรับเวลาทำการของสถานที่
--gmp-mat-color-primary	สีของข้อความและไอคอนแบบอินเทอร์แอกทีฟตัดกับสีพื้นผิว ใช้สำหรับลิงก์ สัญญาณบอกสถานะการโหลด และไอคอนภาพรวม
--gmp-mat-color-secondary-container	สีเติมที่โดดเด่นน้อยกว่าเมื่อเทียบกับพื้นผิว ใช้สำหรับพื้นหลังของปุ่ม
--gmp-mat-color-surface	สีสำหรับพื้นหลัง ใช้สำหรับพื้นหลังคอนเทนเนอร์และกล่องโต้ตอบ
--gmp-mat-font-body-small	ใช้สำหรับข้อมูลสถานที่
--gmp-mat-font-family	ชุดแบบอักษรพื้นฐานสำหรับข้อความทั้งหมด
--gmp-mat-font-headline-medium	ใช้สำหรับส่วนหัวของกล่องโต้ตอบ
--gmp-mat-font-label-large	ใช้สำหรับเนื้อหาของปุ่ม
--gmp-mat-font-title-medium	ใช้สำหรับชื่อสถานที่
--gmp-mat-spacing-extra-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-large	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-medium	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-mat-spacing-small	ใช้สำหรับการเว้นวรรคภายในองค์ประกอบ เช่น ระยะขอบและระยะห่างจากขอบรอบข้อความ
--gmp-star-rating-color	สีของดาวที่เติมในการให้ดาว
--gmp-thumbnail-border-radius	รัศมีเส้นขอบสำหรับภาพขนาดย่อของสถานที่
background-color	ลบล้างสีพื้นหลังขององค์ประกอบ
border	ลบล้างเส้นขอบขององค์ประกอบ
border-radius	ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme	ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ที่เอกสารประกอบของ color-scheme ค่าเริ่มต้นคือ color-scheme: light dark
font-size	ปรับขนาดข้อความและไอคอนทั้งหมดในองค์ประกอบ ค่าเริ่มต้นคือ 16px

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อองค์ประกอบโหลดและแสดงผลเนื้อหา เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-select	function(event) อาร์กิวเมนต์ event: PlaceSelectEvent optional เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการ มีออบเจ็กต์ Place ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก

อินเทอร์เฟซ AdvancedPlaceListElementOptions

อินเทอร์เฟซ google.maps.places.AdvancedPlaceListElementOptions
ติดตั้งใช้งานโดย AdvancedPlaceListElement

ตัวเลือกสำหรับ AdvancedPlaceListElement

พร็อพเพอร์ตี้
attributionPosition ไม่บังคับ	ประเภท: PlaceSearchAttributionPosition optional ดูPlaceSearchElement.attributionPosition
internalUsageAttributionIds ไม่บังคับ	ประเภท: Iterable<string> optional ตัวระบุที่ใช้เพื่อระบุแหล่งที่มาของการเรียกไปยังแพ็กเกจหรือไลบรารี OSS ที่เฉพาะเจาะจง
orientation ไม่บังคับ	ประเภท: PlaceSearchOrientation optional ดูPlaceSearchElement.orientation
places ไม่บังคับ	ประเภท: Iterable<Place|string> optional ดูAdvancedPlaceListElement.places
selectable ไม่บังคับ	ประเภท: boolean optional ดู PlaceSearchElement.selectable
truncationPreferred ไม่บังคับ	ประเภท: boolean optional ดูPlaceSearchElement.truncationPreferred

คลาส AdvancedPlaceItemElement

class google.maps.places.AdvancedPlaceItemElement extends PlaceItemElement, HTMLElement implements AdvancedPlaceItemElementOptions, PlaceItemElementOptions
library "places"

Wrapper คอมโพเนนต์เว็บสาธารณะ (<gmp-advanced-place-item>) สำหรับรายการสถานที่ขั้นสูง องค์ประกอบที่กำหนดเอง <gmp-advanced-place-item> จะแสดงผลการ์ดผลการค้นหาข้อมูลสถานที่แบบสมบูรณ์แต่ละรายการภายในคอนเทนเนอร์การค้นหาขั้นสูงหรือคอลเล็กชัน เช่น <gmp-advanced-place-search> หรือ <gmp-advanced-place-list> <gmp-advanced-place-item> แต่ละรายการจะแสดงรายละเอียดสถานที่ที่สมบูรณ์ ภาพคอลลาจสื่อ ข้อมูลสรุปจากบรรณาธิการ และปุ่มดำเนินการแบบอินเทอร์แอกทีฟที่ประกอบด้วยคอมโพเนนต์ภาพย่อยจาก Places UI Kit

<gmp-advanced-place-item></gmp-advanced-place-item>

const {AdvancedPlaceItemElement} = await google.maps.importLibrary("places");

สล็อต
basic-section-bottom	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงที่ด้านล่างของส่วนข้อมูลพื้นฐาน ใต้ปุ่มดำเนินการหลักโดยตรง
basic-section-top	ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha ช่องสำหรับเนื้อหา HTML ที่กำหนดเองซึ่งแสดงผลในส่วนข้อมูลพื้นฐาน เหนือชื่อสถานที่โดยตรง

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ AdvancedPlaceItemElementOptions

interface google.maps.places.AdvancedPlaceItemElementOptions extends PlaceItemElementOptions
implemented by AdvancedPlaceItemElement

ตัวเลือกสำหรับ AdvancedPlaceItemElement

ค่าคงที่ PlaceSearchAttributionPosition

constants google.maps.places.PlaceSearchAttributionPosition
library "places"

ตำแหน่งการระบุแหล่งที่มาสำหรับ PlaceSearchElement

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท PlaceSearchAttributionPositionString

const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places");

ค่าคงที่
BOTTOM	การระบุแหล่งที่มาที่ด้านล่างของ PlaceSearchElement
TOP	การระบุแหล่งที่มาที่ด้านบนของ PlaceSearchElement

ค่าคงที่ PlaceSearchOrientation

constants google.maps.places.PlaceSearchOrientation
library "places"

ตัวแปรการวางแนวสำหรับ PlaceSearchElement

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท PlaceSearchOrientationString

const {PlaceSearchOrientation} = await google.maps.importLibrary("places");

ค่าคงที่
HORIZONTAL	การวางแนวนอน
VERTICAL	การวางแนวตั้ง

คลาส PlaceSelectEvent

class google.maps.places.PlaceSelectEvent extends Event
library "places"

เหตุการณ์นี้จะเริ่มทำงานเมื่อมีการเลือกสถานที่จากรายการสถานที่ เข้าถึงรายการที่เลือกด้วย event.place

const {PlaceSelectEvent} = await google.maps.importLibrary("places");

พร็อพเพอร์ตี้
place readonly	ประเภท: Place สถานที่ที่เลือก

คลาส PlaceNearbySearchRequestElement

class google.maps.places.PlaceNearbySearchRequestElement extends HTMLElement implements PlaceNearbySearchRequestElementOptions
library "places"

กำหนดค่า PlaceSearchElement เพื่อโหลดผลลัพธ์ตามคำขอการค้นหาในบริเวณใกล้เคียง ต้องระบุพร็อพเพอร์ตี้ locationRestriction เพื่อให้องค์ประกอบการค้นหาโหลด ระบบจะไม่สนใจพร็อพเพอร์ตี้อื่นๆ ที่กำหนดค่าไว้หากไม่ได้ตั้งค่า locationRestriction เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceSearchElement เพื่อโหลดผลลัพธ์ เช่น

 <gmp-place-search>
   <gmp-place-nearby-search-request
     location-restriction="RADIUS@LAT,LNG"
   ></gmp-place-nearby-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-nearby-search-request
  excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
  excluded-types="excluded-type1 excluded-type2..."
  included-primary-types="included-primary-type1 included-primary-type2..."
  included-types="included-type1 included-type2..."
  location-restriction="radius@lat,lng"
  max-result-count="number"
  rank-preference="value-name">
</gmp-place-nearby-search-request>

const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceNearbySearchRequestElement	PlaceNearbySearchRequestElement([options]) พารามิเตอร์ options: PlaceNearbySearchRequestElementOptions optional

พร็อพเพอร์ตี้
excludedPrimaryTypes attr: excluded-primary-types	ประเภทอินพุต: Array<string> optional ประเภทเอาต์พุต: Array<string> optional ค่าเริ่มต้น: null ประเภทสถานที่หลักที่ยกเว้น แอตทริบิวต์ HTML: excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."
excludedTypes attr: excluded-types	ประเภทอินพุต: Array<string> optional ประเภทเอาต์พุต: Array<string> optional ค่าเริ่มต้น: null ประเภทสถานที่ที่ยกเว้น แอตทริบิวต์ HTML: excluded-types="excluded-type1 excluded-type2..."
futureOpeningBusinessesIncluded	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean optional รวมการคาดคะเนสถานที่สำหรับธุรกิจที่ยังไม่เปิด แต่คาดว่าจะเปิดในอนาคต
includedPrimaryTypes attr: included-primary-types	ประเภทอินพุต: Array<string> optional ประเภทเอาต์พุต: Array<string> optional ค่าเริ่มต้น: null รวมประเภทสถานที่หลักแล้ว แอตทริบิวต์ HTML: included-primary-types="included-primary-type1 included-primary-type2..."
includedTypes attr: included-types	ประเภทอินพุต: Array<string> optional ประเภทเอาต์พุต: Array<string> optional ค่าเริ่มต้น: null ประเภทสถานที่ที่รวมไว้ แอตทริบิวต์ HTML: included-types="included-type1 included-type2..."
locationRestriction attr: location-restriction	ประเภทอินพุต: Circle|CircleLiteral optional ประเภทเอาต์พุต: Circle optional ค่าเริ่มต้น: null ภูมิภาคที่จะค้นหา ปรับให้เป็น Circle แอตทริบิวต์ HTML: location-restriction="radius@lat,lng"
maxResultCount attr: max-result-count	ประเภทอินพุต: number optional ประเภทเอาต์พุต: number optional ค่าเริ่มต้น: null จำนวนผลลัพธ์สูงสุดที่จะแสดง แอตทริบิวต์ HTML: max-result-count="number"
rankPreference attr: rank-preference	ประเภทอินพุต: SearchNearbyRankPreference optional ประเภทเอาต์พุต: SearchNearbyRankPreference optional ค่าเริ่มต้น: null วิธีจัดอันดับผลลัพธ์ในการตอบกลับ แอตทริบิวต์ HTML: rank-preference="value-name"

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceNearbySearchRequestElementOptions

อินเทอร์เฟซ google.maps.places.PlaceNearbySearchRequestElementOptions
ติดตั้งใช้งานโดย PlaceNearbySearchRequestElement

ตัวเลือกสำหรับ PlaceNearbySearchRequestElement

พร็อพเพอร์ตี้
excludedPrimaryTypes ไม่บังคับ	ประเภท: Array<string> optional ประเภทสถานที่หลักที่ยกเว้น ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.excludedPrimaryTypes และ SearchNearbyRequest.excludedPrimaryTypes
excludedTypes ไม่บังคับ	ประเภท: Array<string> optional ประเภทสถานที่ที่ยกเว้น ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.excludedTypes และ SearchNearbyRequest.excludedTypes
futureOpeningBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional รวมการคาดคะเนสถานที่สำหรับธุรกิจที่ยังไม่เปิด แต่คาดว่าจะเปิดในอนาคต
includedPrimaryTypes ไม่บังคับ	ประเภท: Array<string> optional ประเภทสถานที่หลักที่รวมอยู่ ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.includedPrimaryTypes และ SearchNearbyRequest.includedPrimaryTypes
includedTypes ไม่บังคับ	ประเภท: Array<string> optional ประเภทสถานที่ที่รวมอยู่ ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.includedTypes และ SearchNearbyRequest.includedTypes
locationRestriction ไม่บังคับ	ประเภท: Circle|CircleLiteral optional ภูมิภาคที่จะค้นหา ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.locationRestriction และ SearchNearbyRequest.locationRestriction
maxResultCount ไม่บังคับ	ประเภท: number optional จำนวนผลลัพธ์สูงสุดที่จะแสดง ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.maxResultCount และ SearchNearbyRequest.maxResultCount
rankPreference ไม่บังคับ	ประเภท: SearchNearbyRankPreference optional วิธีจัดอันดับผลลัพธ์ในการตอบกลับ ดูรายละเอียดเพิ่มเติมได้ที่ PlaceNearbySearchRequestElement.rankPreference และ SearchNearbyRankPreference

คลาส PlaceTextSearchRequestElement

class google.maps.places.PlaceTextSearchRequestElement extends HTMLElement implements PlaceTextSearchRequestElementOptions
library "places"

กำหนดค่า PlaceSearchElement เพื่อโหลดผลลัพธ์ตามคำขอการค้นหาข้อความ ต้องระบุพร็อพเพอร์ตี้ textQuery เพื่อให้องค์ประกอบการค้นหาโหลด ระบบจะไม่สนใจพร็อพเพอร์ตี้อื่นๆ ที่กำหนดค่าไว้หากไม่ได้ตั้งค่า textQuery เพิ่มองค์ประกอบนี้เป็นองค์ประกอบย่อยของ PlaceSearchElement เพื่อโหลดผลลัพธ์ เช่น

 <gmp-place-search>
   <gmp-place-text-search-request
     text-query="QUERY"
   ></gmp-place-text-search-request>
   <gmp-place-content-config>
     <gmp-place-media lightbox-preferred></gmp-place-media>
   </gmp-place-content-config>
 </gmp-place-search> 

<gmp-place-text-search-request
  ev-connector-types="ev-connector-type1 ev-connector-type2..."
  ev-minimum-charging-rate-kw="number"
  included-type="type"
  is-open-now
  location-bias="lat,lng"
  location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"
  max-result-count="number"
  min-rating="number"
  price-levels="price-level1 price-level2..."
  rank-preference="value-name"
  text-query="string"
  use-strict-type-filtering>
</gmp-place-text-search-request>

const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceTextSearchRequestElement	PlaceTextSearchRequestElement([options]) พารามิเตอร์ options: PlaceTextSearchRequestElementOptions optional

พร็อพเพอร์ตี้
evConnectorTypes attr: ev-connector-types	ประเภทอินพุต: Array<EVConnectorType> optional ประเภทเอาต์พุต: Array<EVConnectorType> optional ค่าเริ่มต้น: null รายการประเภทหัวชาร์จไฟฟ้า EV ที่ต้องการ แอตทริบิวต์ HTML: ev-connector-types="ev-connector-type1 ev-connector-type2..."
evMinimumChargingRateKw attr: ev-minimum-charging-rate-kw	ประเภทอินพุต: number optional ประเภทเอาต์พุต: number optional ค่าเริ่มต้น: null อัตราการชาร์จขั้นต่ำที่จำเป็นในหน่วยกิโลวัตต์ แอตทริบิวต์ HTML: ev-minimum-charging-rate-kw="number"
futureOpeningBusinessesIncluded	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean optional รวมการคาดคะเนสถานที่สำหรับธุรกิจที่ยังไม่เปิด แต่คาดว่าจะเปิดในอนาคต
includedType attr: included-type	ประเภทอินพุต: string optional ประเภทเอาต์พุต: string optional ค่าเริ่มต้น: null ประเภทสถานที่ที่ขอ แอตทริบิวต์ HTML: included-type="type"
isOpenNow attr: is-open-now	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean optional ค่าเริ่มต้น: null ใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่เปิดอยู่ในปัจจุบัน แอตทริบิวต์ HTML: is-open-now
locationBias attr: location-bias	ประเภทอินพุต: LocationBias optional ประเภทเอาต์พุต: LatLngAltitude|LatLngBounds|Circle|string optional ค่าเริ่มต้น: null การให้น้ำหนักพิเศษกับบางตำแหน่งสำหรับการค้นหา แอตทริบิวต์ HTML: location-bias="lat,lng" location-bias="lat,lng[,altitude]" location-bias="swlat,swlng|nelat,nelng" location-bias="radius@lat,lng" location-bias="IP_BIAS"
locationRestriction attr: location-restriction	ประเภทอินพุต: LatLngBounds|LatLngBoundsLiteral optional ประเภทเอาต์พุต: LatLngBounds optional ค่าเริ่มต้น: null การจำกัดสถานที่สำหรับการค้นหา ปรับให้เป็น LatLngBounds แอตทริบิวต์ HTML: location-restriction="southwest-lat,southwest-lng|northeast-lat,northeast-lng"
maxResultCount attr: max-result-count	ประเภทอินพุต: number optional ประเภทเอาต์พุต: number optional ค่าเริ่มต้น: null จำนวนผลลัพธ์สูงสุดที่จะแสดง แอตทริบิวต์ HTML: max-result-count="number"
minRating attr: min-rating	ประเภทอินพุต: number optional ประเภทเอาต์พุต: number optional ค่าเริ่มต้น: null กรองผลลัพธ์ที่การให้คะแนนของผู้ใช้เฉลี่ยน้อยกว่าขีดจำกัดนี้อย่างเคร่งครัด แอตทริบิวต์ HTML: min-rating="number"
priceLevels attr: price-levels	ประเภทอินพุต: Array<PriceLevel> optional ประเภทเอาต์พุต: Array<PriceLevel> optional ค่าเริ่มต้น: null ใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่มีการทำเครื่องหมายว่ามีระดับราคาที่แน่นอน แอตทริบิวต์ HTML: price-levels="price-level1 price-level2..."
rankPreference attr: rank-preference	ประเภทอินพุต: SearchByTextRankPreference optional ประเภทเอาต์พุต: SearchByTextRankPreference optional ค่าเริ่มต้น: null วิธีจัดอันดับผลลัพธ์ในการตอบกลับ แอตทริบิวต์ HTML: rank-preference="value-name"
textQuery attr: text-query	ประเภทอินพุต: string optional ประเภทเอาต์พุต: string optional ค่าเริ่มต้น: null คำค้นหาที่เป็นข้อความสำหรับการค้นหาข้อความ แอตทริบิวต์ HTML: text-query="string"
useStrictTypeFiltering attr: use-strict-type-filtering	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean optional ค่าเริ่มต้น: null ใช้เพื่อตั้งค่าการกรองประเภทที่เข้มงวดสำหรับ "includedType" แอตทริบิวต์ HTML: use-strict-type-filtering

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceTextSearchRequestElementOptions

อินเทอร์เฟซ google.maps.places.PlaceTextSearchRequestElementOptions
ติดตั้งใช้งานโดย PlaceTextSearchRequestElement

ตัวเลือกสำหรับ PlaceTextSearchRequestElement

พร็อพเพอร์ตี้
evConnectorTypes ไม่บังคับ	ประเภท: Array<EVConnectorType> optional รายการประเภทหัวชาร์จไฟฟ้า EV ที่ต้องการ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.evSearchOptions และ PlaceTextSearchRequestElement.evConnectorTypes
evMinimumChargingRateKw ไม่บังคับ	ประเภท: number optional อัตราการชาร์จขั้นต่ำที่จำเป็นในหน่วยกิโลวัตต์ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.evSearchOptions และ PlaceTextSearchRequestElement.evMinimumChargingRateKw
futureOpeningBusinessesIncluded ไม่บังคับ	ประเภท: boolean optional รวมการคาดคะเนสถานที่สำหรับธุรกิจที่ยังไม่เปิด แต่คาดว่าจะเปิดในอนาคต
includedType ไม่บังคับ	ประเภท: string optional ประเภทสถานที่ที่ขอ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.includedType และ PlaceTextSearchRequestElement.includedType
isOpenNow ไม่บังคับ	ประเภท: boolean optional ใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่เปิดอยู่ในปัจจุบัน ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.isOpenNow และ PlaceTextSearchRequestElement.isOpenNow
locationBias ไม่บังคับ	ประเภท: LocationBias optional การให้น้ำหนักพิเศษกับบางตำแหน่งสำหรับการค้นหา ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.locationBias และ PlaceTextSearchRequestElement.locationBias
locationRestriction ไม่บังคับ	ประเภท: LatLngBounds|LatLngBoundsLiteral optional การจำกัดสถานที่สำหรับการค้นหา ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.locationRestriction และ PlaceTextSearchRequestElement.locationRestriction
maxResultCount ไม่บังคับ	ประเภท: number optional จำนวนผลลัพธ์สูงสุดที่จะแสดง ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.maxResultCount และ PlaceTextSearchRequestElement.maxResultCount
minRating ไม่บังคับ	ประเภท: number optional กรองผลลัพธ์ที่การให้คะแนนของผู้ใช้เฉลี่ยน้อยกว่าขีดจำกัดนี้อย่างเคร่งครัด ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.minRating และ PlaceTextSearchRequestElement.minRating
priceLevels ไม่บังคับ	ประเภท: Array<PriceLevel> optional ใช้เพื่อจำกัดการค้นหาเฉพาะสถานที่ที่มีการทำเครื่องหมายว่ามีระดับราคาที่แน่นอน ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.priceLevels และ PlaceTextSearchRequestElement.priceLevels
rankPreference ไม่บังคับ	ประเภท: SearchByTextRankPreference optional วิธีจัดอันดับผลลัพธ์ในการตอบกลับ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.rankPreference และ PlaceTextSearchRequestElement.rankPreference
textQuery ไม่บังคับ	ประเภท: string optional คำค้นหาที่เป็นข้อความสำหรับการค้นหาข้อความ ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.textQuery และ PlaceTextSearchRequestElement.textQuery
useStrictTypeFiltering ไม่บังคับ	ประเภท: boolean optional ใช้เพื่อตั้งค่าการกรองประเภทที่เข้มงวดสำหรับ SearchByTextRequest.includedType ดูรายละเอียดเพิ่มเติมได้ที่ SearchByTextRequest.useStrictTypeFiltering และ PlaceTextSearchRequestElement.useStrictTypeFiltering

คลาส Autocomplete

class google.maps.places.Autocomplete extends MVCObject
library "places"

เลิกใช้งาน: ตั้งแต่วันที่ 1 มีนาคม 2025 เป็นต้นไป google.maps.places.Autocomplete จะไม่มีให้บริการแก่ลูกค้าใหม่ โปรดใช้ PlaceAutocompleteElement แทน ในตอนนี้ เรายังไม่มีกำหนดการปิดให้บริการ google.maps.places.Autocomplete แต่ขอแนะนำให้ใช้ PlaceAutocompleteElement แทน google.maps.places.Autocomplete แม้ว่า google.maps.places.Autocomplete จะยังคงได้รับการแก้ไขข้อบกพร่องสำหรับการถดถอยที่สำคัญ แต่ข้อบกพร่องที่มีอยู่ใน google.maps.places.Autocomplete จะไม่ได้รับการแก้ไข เราจะแจ้งให้ทราบล่วงหน้าอย่างน้อย 12 เดือนก่อนที่จะหยุดให้การสนับสนุน โปรดดูรายละเอียดเพิ่มเติมที่ https://developers.google.com/maps/legacy และคำแนะนำในการย้ายข้อมูลที่ https://developers.google.com/maps/documentation/javascript/places-migration-overview

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

const {Autocomplete} = await google.maps.importLibrary("places");

ผู้ผลิต
Autocomplete	Autocomplete(inputField[, opts]) พารามิเตอร์ inputField: HTMLInputElement ช่องข้อความ <input> ที่ควรแนบ Autocomplete ตัวเลือกopts: AutocompleteOptions optional สร้างอินสแตนซ์ใหม่ของ Autocomplete ที่แนบกับช่องป้อนข้อความที่ระบุพร้อมตัวเลือกที่กำหนด

เมธอด
getBounds	getBounds() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: LatLngBounds|undefined ขอบเขตการให้น้ำหนัก แสดงผลขอบเขตที่การคาดคะเนมีความลำเอียง
getFields	getFields() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: Array<string>|undefined แสดงผลฟิลด์ที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ดูรายการช่องได้ที่ PlaceResult
getPlace	getPlace() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: PlaceResult สถานที่ที่ผู้ใช้เลือก แสดงรายละเอียดของสถานที่ที่ผู้ใช้เลือกหากดึงข้อมูลรายละเอียดสำเร็จ ไม่เช่นนั้น ระบบจะแสดงผลออบเจ็กต์ Place สตับ โดยตั้งค่าพร็อพเพอร์ตี้ name เป็นค่าปัจจุบันของช่องป้อนข้อมูล
setBounds	setBounds(bounds) พารามิเตอร์ bounds: LatLngBounds|LatLngBoundsLiteral optional ขอบเขตการให้น้ำหนัก ผลลัพธ์: ไม่มี กำหนดพื้นที่ที่ต้องการเพื่อแสดงผลลัพธ์ของสถานที่ ผลการค้นหาจะเน้นไปที่พื้นที่นี้ แต่ไม่จำกัดเฉพาะพื้นที่นี้
setComponentRestrictions	setComponentRestrictions(restrictions) พารามิเตอร์ restrictions: ComponentRestrictions optional ข้อจำกัดในการใช้งาน ผลลัพธ์: ไม่มี ตั้งค่าข้อจำกัดของคอมโพเนนต์ การจำกัดคอมโพเนนต์ใช้เพื่อจำกัดการคาดคะเนให้แสดงเฉพาะภายในคอมโพเนนต์หลักเท่านั้น เช่น ประเทศ
setFields	setFields(fields) พารามิเตอร์ fields: Array<string> optional ผลลัพธ์: ไม่มี ตั้งค่าฟิลด์ที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ดูรายการช่องได้ที่ PlaceResult
setOptions	setOptions(options) พารามิเตอร์ options: AutocompleteOptions optional ผลลัพธ์: ไม่มี
setTypes	setTypes(types) พารามิเตอร์ types: Array<string> optional ประเภทของการคาดการณ์ที่จะรวม ผลลัพธ์: ไม่มี ตั้งค่าประเภทการคาดคะเนที่จะแสดงผล ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท
สืบทอด: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

กิจกรรม
place_changed	function() อาร์กิวเมนต์: ไม่มี ระบบจะเริ่มเหตุการณ์นี้เมื่อ PlaceResult พร้อมใช้งานสำหรับสถานที่ที่ผู้ใช้เลือก หากผู้ใช้ป้อนชื่อสถานที่ที่ไม่ได้แนะนำโดยตัวควบคุมและกดปุ่ม Enter หรือหากคำขอรายละเอียดสถานที่ล้มเหลว PlaceResult จะมีข้อมูลที่ผู้ใช้ป้อนในพร็อพเพอร์ตี้ name โดยไม่มีการกำหนดพร็อพเพอร์ตี้อื่นๆ

อินเทอร์เฟซ AutocompleteOptions

อินเทอร์เฟซ google.maps.places.AutocompleteOptions

ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ Autocomplete

พร็อพเพอร์ตี้
bounds ไม่บังคับ	ประเภท: LatLngBounds|LatLngBoundsLiteral optional พื้นที่ที่จะค้นหาสถานที่
componentRestrictions ไม่บังคับ	ประเภท: ComponentRestrictions optional ข้อจำกัดของคอมโพเนนต์ การจำกัดคอมโพเนนต์ใช้เพื่อจำกัดการคาดคะเนให้แสดงเฉพาะภายในคอมโพเนนต์หลักเท่านั้น เช่น ประเทศ
fields ไม่บังคับ	ประเภท: Array<string> optional ช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ซึ่งจะมีการเรียกเก็บเงิน หากส่ง ['ALL'] เข้ามา ระบบจะแสดงผลและเรียกเก็บเงินสำหรับช่องที่ใช้ได้ทั้งหมด (ไม่แนะนำสำหรับการติดตั้งใช้งานเวอร์ชันที่ใช้งานจริง) ดูรายการช่องได้ที่ PlaceResult คุณสามารถระบุฟิลด์ที่ฝังด้วยเส้นทางแบบจุด (เช่น "geometry.location") ค่าเริ่มต้นคือ ['ALL']
placeIdOnly ไม่บังคับ	เลิกใช้งาน: placeIdOnly เลิกใช้งานตั้งแต่วันที่ 15 มกราคม 2019 และจะปิดให้บริการในวันที่ 15 มกราคม 2020 โปรดใช้ AutocompleteOptions.fields แทน: fields: ['place_id', 'name', 'types'] ประเภท: boolean optional เลือกว่าจะดึงข้อมูลเฉพาะรหัสสถานที่หรือไม่ PlaceResult ที่พร้อมใช้งานเมื่อเริ่มเหตุการณ์ place_changed จะมีเฉพาะช่อง place_id, types และ name โดยมี place_id, types และ description ที่แสดงผลโดยบริการเติมข้อความอัตโนมัติ ปิดใช้โดยค่าเริ่มต้น
strictBounds ไม่บังคับ	ประเภท: boolean optional ค่าบูลีนที่ระบุว่าวิดเจ็ตการเติมข้อความอัตโนมัติควรแสดงเฉพาะสถานที่ที่อยู่ภายในขอบเขตของวิดเจ็ตการเติมข้อความอัตโนมัติ ณ เวลาที่ส่งคำค้นหา การตั้งค่า strictBounds เป็น false (ซึ่งเป็นค่าเริ่มต้น) จะทำให้ผลลัพธ์เอนเอียงไปยังสถานที่ที่อยู่ภายในขอบเขต แต่ไม่จำกัดเฉพาะสถานที่เหล่านั้น
types ไม่บังคับ	ประเภท: Array<string> optional ประเภทของการคาดการณ์ที่จะแสดงผล ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลทุกประเภท

คลาส SearchBox

class google.maps.places.SearchBox extends MVCObject
library "places"

เลิกใช้งาน: ตั้งแต่วันที่ 1 มีนาคม 2025 เป็นต้นไป google.maps.places.SearchBox จะไม่พร้อมให้บริการแก่ลูกค้าใหม่ ขณะนี้ google.maps.places.SearchBox ยังไม่มีกำหนดการปิดให้บริการ และจะยังคงได้รับการแก้ไขข้อบกพร่องสำหรับการถดถอยที่สำคัญต่อไป เราจะแจ้งให้ทราบล่วงหน้าอย่างน้อย 12 เดือนก่อนที่จะหยุดให้การสนับสนุน โปรดดูรายละเอียดเพิ่มเติมที่ https://developers.google.com/maps/legacy

วิดเจ็ตที่แสดงการคาดคะเนคำค้นหาตามข้อมูลที่ผู้ใช้ป้อน โดยจะแนบกับองค์ประกอบอินพุตประเภท text และคอยฟังการป้อนข้อความในช่องนั้น รายการการคาดคะเนจะแสดงเป็นรายการแบบเลื่อนลง และจะอัปเดตเมื่อมีการป้อนข้อความ

const {SearchBox} = await google.maps.importLibrary("places");

ผู้ผลิต
SearchBox	SearchBox(inputField[, opts]) พารามิเตอร์ inputField: HTMLInputElement opts: SearchBoxOptions optional สร้างอินสแตนซ์ใหม่ของ SearchBox ที่แนบกับช่องป้อนข้อความที่ระบุพร้อมตัวเลือกที่กำหนด

เมธอด
getBounds	getBounds() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: LatLngBounds|undefined แสดงผลขอบเขตที่การคาดคะเนการค้นหาให้น้ำหนัก
getPlaces	getPlaces() พารามิเตอร์: ไม่มี ค่าที่แสดงผล: Array<PlaceResult>|undefined แสดงผลคำค้นหาที่ผู้ใช้เลือกเพื่อใช้กับเหตุการณ์ places_changed
setBounds	setBounds(bounds) พารามิเตอร์ bounds: LatLngBounds|LatLngBoundsLiteral optional ผลลัพธ์: ไม่มี ตั้งค่าภูมิภาคที่จะใช้สำหรับการให้น้ำหนักการคาดคะเนการค้นหา ผลการค้นหาจะเน้นไปที่พื้นที่นี้เท่านั้น แต่จะไม่จำกัดเฉพาะพื้นที่นี้โดยสมบูรณ์
สืบทอด: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll

กิจกรรม
places_changed	function() อาร์กิวเมนต์: ไม่มี เหตุการณ์นี้จะเริ่มทำงานเมื่อผู้ใช้เลือกคำค้นหา โดยควรใช้ getPlaces เพื่อรับสถานที่ใหม่

อินเทอร์เฟซ SearchBoxOptions

อินเทอร์เฟซ google.maps.places.SearchBoxOptions

ตัวเลือกที่ตั้งค่าได้ในออบเจ็กต์ SearchBox

พร็อพเพอร์ตี้
bounds ไม่บังคับ	ประเภท: LatLngBounds|LatLngBoundsLiteral optional พื้นที่ที่ต้องการให้น้ำหนักการคาดคะเนการค้นหา การคาดคะเนจะเอนเอียงไปทางคำค้นหาที่กำหนดเป้าหมายขอบเขตเหล่านี้ แต่ไม่จำกัดเพียงคำค้นหาดังกล่าว

คลาส PlaceContextualElement

class google.maps.places.PlaceContextualElement extends HTMLElement implements PlaceContextualElementOptions
library "places"

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

วิดเจ็ตที่ใช้โทเค็นบริบทเพื่อแสดงมุมมองภาพรวมของคำตอบจากการเชื่อมต่อแหล่งข้อมูลกับ Google Maps

<gmp-place-contextual
  context-token="string">
</gmp-place-contextual>

const {PlaceContextualElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceContextualElement	PlaceContextualElement([options]) พารามิเตอร์ options: PlaceContextualElementOptions optional

พร็อพเพอร์ตี้
contextToken attr: context-token	ประเภทอินพุต: string optional ประเภทเอาต์พุต: string optional โทเค็นบริบท แอตทริบิวต์ HTML: context-token="string"

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceContextualElementOptions

อินเทอร์เฟซ google.maps.places.PlaceContextualElementOptions
ติดตั้งใช้งานโดย PlaceContextualElement

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

ตัวเลือกสำหรับ PlaceContextualElement

พร็อพเพอร์ตี้
contextToken ไม่บังคับ	ประเภท: string optional โทเค็นบริบทที่ได้จากการตอบกลับของการเชื่อมต่อแหล่งข้อมูลกับ Google Maps

คลาส PlaceContextualListConfigElement

class google.maps.places.PlaceContextualListConfigElement extends HTMLElement implements PlaceContextualListConfigElementOptions
library "places"

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

องค์ประกอบ HTML ที่กำหนดค่าตัวเลือกสำหรับมุมมองรายการขององค์ประกอบตามบริบทของสถานที่

<gmp-place-contextual-list-config
  layout="value-name"
  map-hidden>
</gmp-place-contextual-list-config>

const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlaceContextualListConfigElement	PlaceContextualListConfigElement([options]) พารามิเตอร์ options: PlaceContextualListConfigElementOptions optional

พร็อพเพอร์ตี้
layout attr: layout	ประเภทอินพุต: PlaceContextualListLayout optional ประเภทเอาต์พุต: PlaceContextualListLayout เลย์เอาต์ แอตทริบิวต์ HTML: layout="value-name"
mapHidden attr: map-hidden	ประเภทอินพุต: boolean optional ประเภทเอาต์พุต: boolean มีการซ่อนแผนที่หรือไม่ แอตทริบิวต์ HTML: map-hidden

เมธอด
สืบทอด: addEventListener, removeEventListener

อินเทอร์เฟซ PlaceContextualListConfigElementOptions

อินเทอร์เฟซ google.maps.places.PlaceContextualListConfigElementOptions
ติดตั้งใช้งานโดย PlaceContextualListConfigElement

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

ตัวเลือกสำหรับ PlaceContextualListConfigElement

พร็อพเพอร์ตี้
layout ไม่บังคับ	ประเภท: PlaceContextualListLayout optional ค่าเริ่มต้น: PlaceContextualListLayout.VERTICAL เลย์เอาต์
mapHidden ไม่บังคับ	ประเภท: boolean optional ค่าเริ่มต้น: false เป็นจริงหากควรซ่อนแผนที่

ค่าคงที่ PlaceContextualListLayout

constants google.maps.places.PlaceContextualListLayout
library "places"

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

รายการเลย์เอาต์ที่องค์ประกอบตามบริบทของสถานที่รองรับสำหรับมุมมองรายการ

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท PlaceContextualListLayoutString

const {PlaceContextualListLayout} = await google.maps.importLibrary("places");

ค่าคงที่
COMPACT	เลย์เอาต์แบบรายการขนาดกะทัดรัด: รายการจะแสดงเป็นลิงก์ในบรรทัดเดียว โดยมีรายการที่เกินมาอยู่ในรายการแบบเลื่อนลง
VERTICAL	เลย์เอาต์แบบรายการแนวตั้ง: รายการจะแสดงผลเป็นการ์ดในรายการแนวตั้ง

คลาส PlacePinElement

class google.maps.places.PlacePinElement extends HTMLElement implements PlacePinElementOptions
library "places"

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

แสดงหมุดแผนที่สำหรับสถานที่ โดยใช้ไอคอนหมวดหมู่หรือรูปภาพของสถานที่ ใส่ PlaceDetailsPlaceRequestElement หรือ PlaceDetailsLocationRequestElement ต่อท้ายเพื่อระบุสถานที่ ใช้หมุดเป็นเนื้อหาของ AdvancedMarkerElement ไม่รองรับในแผนที่ 3 มิติ

ตัวอย่างเช่น

 <gmp-advanced-marker>
   <gmp-place-pin>
     <gmp-place-details-place-request
       place="PLACE_ID"
     ></gmp-place-details-place-request>
     <gmp-place-rating></gmp-place-rating>
   </gmp-place-pin>
 </gmp-advanced-marker> 

หากต้องการใช้องค์ประกอบนี้ ให้เปิดใช้ Places UI Kit API สำหรับโปรเจ็กต์ในคอนโซล Google Cloud

<gmp-place-pin
  icon="value-name"
  scale="number">
</gmp-place-pin>

const {PlacePinElement} = await google.maps.importLibrary("places");

ผู้ผลิต
PlacePinElement	PlacePinElement([options]) พารามิเตอร์ options: PlacePinElementOptions optional

พร็อพเพอร์ตี้
icon attr: icon	ประเภทอินพุต: PlacePinIcon optional ประเภทเอาต์พุต: PlacePinIcon ค่าเริ่มต้น: PlacePinIcon.TYPE ไอคอนที่แสดงภายในหมุด ดูPlacePinIcon แอตทริบิวต์ HTML: icon="value-name"
photoRendered readonly	ประเภท: boolean อ่านอย่างเดียว เป็นจริงหากหมุดแสดงรูปภาพของสถานที่ เป็นเท็จเสมอหาก icon ไม่ใช่ PHOTO หาก icon เป็น PHOTO แต่สถานที่ไม่มีรูปภาพ หรือโหลดรูปภาพไม่สำเร็จ ค่านี้จะเป็นเท็จและหมุดจะแสดงไอคอนประเภทสถานที่แทน ตั้งค่าก่อนที่ gmp-load จะเริ่มทำงาน
place readonly	ประเภท: Place optional อ่านอย่างเดียว ออบเจ็กต์สถานที่ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลอยู่ในปัจจุบัน undefined หากสถานที่ยังไม่โหลดหรือโหลดไม่สำเร็จ
scale attr: scale	ประเภทอินพุต: number optional ประเภทเอาต์พุต: number ค่าเริ่มต้น: 1 ตัวคูณขนาดสำหรับหมุด แอตทริบิวต์ HTML: scale="number"

สล็อต
default	เนื้อหาที่ไม่บังคับซึ่งแสดงบนหมุด เช่น PlaceRatingElement, <span> ที่กำหนดเอง หรือข้อความ ระบบจะจัดช่องโหนดย่อยของ Light DOM ลงในหมุดโดยตรง ตำแหน่งที่เนื้อหาจะแสดงขึ้นอยู่กับicon โดยจะแสดงข้างไอคอนประเภทสถานที่สำหรับTYPE แสดงเป็นป้ายบนรูปภาพสำหรับPHOTO และแสดงเป็นเนื้อหาหลักของหมุดสำหรับNONE

พร็อพเพอร์ตี้ CSS
--gmp-background	สีพื้นหลังของหมุด: หมุดทรงแคปซูล กรอบรูป ป้ายรูปภาพ ปลายหมุด และเส้นขอบของหมุดประเภทสถานที่
--gmp-border-radius	รัศมีเส้นขอบของปุ่มทรงแคปซูล (ไอคอนประเภทสถานที่ที่มีเนื้อหาแบบสล็อต หรือเนื้อหาแบบสล็อตเพียงอย่างเดียว) และของกรอบรูปภาพในหมุด PHOTO ค่าเริ่มต้นคือ 30px สำหรับไอคอนประเภทสถานที่ที่มีเนื้อหาแบบสล็อต 12px สำหรับเนื้อหาแบบสล็อตเพียงอย่างเดียว และกรอบรูปภาพ 12px ไม่มีผลกับหมุดประเภทสถานที่ที่ไม่มีเนื้อหาแบบสล็อต
--gmp-glyph-background	สีพื้นหลังด้านหลังสัญลักษณ์ประเภทสถานที่ ค่าเริ่มต้นคือ iconBackgroundColor ของสถานที่
--gmp-glyph-color	สีของภาพสัญลักษณ์ประเภทสถานที่ มีผลเมื่อใดก็ตามที่สัญลักษณ์แสดง รวมถึงเมื่อหมุด PHOTO เปลี่ยนกลับไปเป็นไอคอนประเภทสถานที่

เมธอด
สืบทอด: addEventListener, removeEventListener

กิจกรรม
gmp-error	function(event) อาร์กิวเมนต์ event: Event optional เหตุการณ์นี้จะเริ่มทำงานเมื่อแสดงหมุดไม่ได้เลย เช่น เนื่องจากเครือข่ายขัดข้อง ข้อมูลเข้าสู่ระบบขัดข้อง (เช่น คีย์ API ไม่ถูกต้อง) รหัสสถานที่ที่แก้ไขไม่ได้ หรือสถานที่ที่ไม่มีตำแหน่ง หมุดจะซ่อนอยู่ เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์
gmp-load	function(event) อาร์กิวเมนต์ event: Event optional ระบบจะเริ่มเหตุการณ์นี้เมื่อโหลดรายละเอียดสถานที่และแสดงผลหมุดแล้ว เมื่อ icon เป็น PHOTO ระบบจะเริ่มทำงานหลังจากที่โหลดรูปภาพสำเร็จหรือล้มเหลวเท่านั้น การโหลดรูปภาพล้มเหลวเพียงอย่างเดียวจะไม่ทำให้ gmp-error เริ่มทำงาน อ่านสถานที่ที่โหลดจาก PlacePinElement.place และดูว่ารูปภาพแสดงจาก PlacePinElement.photoRendered หรือไม่ เหตุการณ์นี้ไม่เกิดการส่งต่อเหตุการณ์

อินเทอร์เฟซ PlacePinElementOptions

อินเทอร์เฟซ google.maps.places.PlacePinElementOptions
ติดตั้งใช้งานโดย PlacePinElement

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

ตัวเลือกสำหรับการสร้าง PlacePinElement

พร็อพเพอร์ตี้
icon ไม่บังคับ	ประเภท: PlacePinIcon optional ดูPlacePinElement.icon
scale ไม่บังคับ	ประเภท: number optional ดูPlacePinElement.scale

ค่าคงที่ PlacePinIcon

constants google.maps.places.PlacePinIcon
library "places"

ประกาศ: ใช้ได้เฉพาะในแชแนล v=alpha

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

ค่าคงที่เหล่านี้ยังใช้เป็นสตริงได้ด้วย ใน TypeScript สตริงลิเทอรัลจะกำหนดโดยประเภท PlacePinIconString

const {PlacePinIcon} = await google.maps.importLibrary("places");

ค่าคงที่
NONE	ไม่แสดงไอคอน แสดงเฉพาะเนื้อหาที่กำหนดช่องไว้
PHOTO	แสดงรูปภาพของสถานที่ในวงกลม ใช้ TYPE แทนหากสถานที่ไม่มีรูปภาพ
TYPE	แสดงไอคอนหมวดหมู่ของสถานที่