Places Widgets

BasicPlaceAutocompleteElement class

google.maps.places.BasicPlaceAutocompleteElement ชั้นเรียน

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

องค์ประกอบที่กำหนดเอง:
<gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-basic-place-autocomplete>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ BasicPlaceAutocompleteElementOptions

เข้าถึงได้โดยโทรไปที่ const {BasicPlaceAutocompleteElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
BasicPlaceAutocompleteElement
BasicPlaceAutocompleteElement(options)
พารามิเตอร์: 
includedPrimaryTypes
ประเภท:  Array<string> optional
ประเภทสถานที่หลักที่รวมไว้ (เช่น "restaurant" หรือ "gas_station")

ระบบจะแสดงสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-basic-place-autocomplete>
includedRegionCodes
ประเภท:  Array<string> optional
รวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ โดยระบุเป็นรหัสภูมิภาค 2 อักขระของ CLDR ได้สูงสุด 15 รายการ ชุดข้อมูลที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกัน
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-basic-place-autocomplete>
locationBias
ประเภท:  LocationBias optional
ขอบเขตแบบยืดหยุ่นหรือคำใบ้ที่จะใช้เมื่อค้นหาสถานที่
locationRestriction
ประเภท:  LocationRestriction optional
ขอบเขตเพื่อจำกัดผลการค้นหา
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:
  • <gmp-basic-place-autocomplete name="string"></gmp-basic-place-autocomplete>
origin
ต้นทางที่จะคำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณหากมีการระบุ
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete origin="lat,lng"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete origin="lat,lng,altitude"></gmp-basic-place-autocomplete>
requestedLanguage
ประเภท:  string optional
ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับสูงขึ้น แต่คำแนะนำไม่ได้จำกัดอยู่แค่ในภาษานี้ ดูรายการภาษาที่รองรับ
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete requested-language="string"></gmp-basic-place-autocomplete>
requestedRegion
ประเภท:  string optional
รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดการแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") ที่มีอักขระ 2 ตัว รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 แต่ก็มีข้อยกเว้นที่สำคัญบางประการ เช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ")
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete requested-region="string"></gmp-basic-place-autocomplete>
unitSystem
ประเภท:  UnitSystem optional
ระบบหน่วยที่ใช้เพื่อแสดงระยะทาง หากไม่ได้ระบุ ระบบจะกำหนดระบบหน่วยตาม requestedRegion
แอตทริบิวต์ HTML:
  • <gmp-basic-place-autocomplete unit-system="metric"></gmp-basic-place-autocomplete>
  • <gmp-basic-place-autocomplete unit-system="imperial"></gmp-basic-place-autocomplete>
prediction-item-icon
ช่องนี้ยอมรับองค์ประกอบ <template> เพียงรายการเดียวเพื่อแสดงเป็นไอคอนที่แสดงข้างรายการการคาดคะเน
prediction-item
รายการในการคาดคะเนแบบเลื่อนลงซึ่งแสดงการคาดคะเนรายการเดียว
prediction-item-icon
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน
prediction-item-main-text
ส่วนของรายการการคาดการณ์ที่เป็นข้อความหลักของการคาดการณ์ สำหรับสถานที่ทางภูมิศาสตร์ ฟิลด์นี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อและหมายเลขถนน เช่น "10 ถนนคิง" โดยค่าเริ่มต้น ระบบจะระบายสีดำให้กับข้อความหลักของรายการการคาดคะเน หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-match
ส่วนของการคาดการณ์ที่ส่งกลับซึ่งตรงกับอินพุตของผู้ใช้ โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน prediction-item ซึ่งไม่จำเป็นต้องเป็นส่วนหนึ่งของ prediction-item-main-text
prediction-item-selected
รายการเมื่อผู้ใช้ไปยังรายการนั้นผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งสไตล์ของส่วนนี้และสไตล์ของส่วนรายการที่คาดการณ์
prediction-list
องค์ประกอบภาพที่มีรายการการคาดคะเนที่บริการเติมข้อความอัตโนมัติของสถานที่ส่งคืน รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement
background-color
ลบล้างสีพื้นหลังขององค์ประกอบ
border
ลบล้างเส้นขอบขององค์ประกอบ
border-radius
ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ในcolor-scheme เอกสารประกอบ ค่าเริ่มต้นคือ color-scheme: light dark
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-error
function(errorEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง
gmp-select
function(placeSelectEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์สถานที่

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

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

ตัวเลือกสำหรับการสร้าง BasicPlaceAutocompleteElement
includedPrimaryTypes optional
ประเภท:  Array<string> optional
includedRegionCodes optional
ประเภท:  Array<string> optional
locationBias optional
ประเภท:  LocationBias optional
locationRestriction optional
ประเภท:  LocationRestriction optional
name optional
ประเภท:  string optional
origin optional
requestedLanguage optional
ประเภท:  string optional
requestedRegion optional
ประเภท:  string optional
unitSystem optional
ประเภท:  UnitSystem optional

PlaceAutocompleteElement class

google.maps.places.PlaceAutocompleteElement ชั้นเรียน

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 included-primary-types="type1 type2 type3..." included-region-codes="c1 c2 c3..." name="string" origin="lat,lng" requested-language="string" requested-region="string" unit-system="metric"></gmp-place-autocomplete>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceAutocompleteElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceAutocompleteElement
PlaceAutocompleteElement(options)
พารามิเตอร์: 
includedPrimaryTypes
ประเภท:  Array<string> optional
ประเภทสถานที่หลักที่รวมไว้ (เช่น "restaurant" หรือ "gas_station")

ระบบจะแสดงสถานที่ก็ต่อเมื่อประเภทหลักของสถานที่นั้นรวมอยู่ในรายการนี้ โดยระบุได้สูงสุด 5 ค่า หากไม่ได้ระบุประเภท ระบบจะแสดงผลสถานที่ทุกประเภท
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete included-primary-types="type1 type2 type3..."></gmp-place-autocomplete>
includedRegionCodes
ประเภท:  Array<string> optional
รวมเฉพาะผลการค้นหาในภูมิภาคที่ระบุ โดยระบุเป็นรหัสภูมิภาค 2 อักขระของ CLDR ได้สูงสุด 15 รายการ ชุดข้อมูลที่ว่างเปล่าจะไม่จำกัดผลลัพธ์ หากตั้งค่าทั้ง locationRestriction และ includedRegionCodes ผลลัพธ์จะอยู่ในพื้นที่ที่ทับซ้อนกัน
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete included-region-codes="c1 c2 c3..."></gmp-place-autocomplete>
locationBias
ประเภท:  LocationBias optional
ขอบเขตแบบยืดหยุ่นหรือคำใบ้ที่จะใช้เมื่อค้นหาสถานที่
locationRestriction
ประเภท:  LocationRestriction optional
ขอบเขตเพื่อจำกัดผลการค้นหา
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:
  • <gmp-place-autocomplete name="string"></gmp-place-autocomplete>
origin
ต้นทางที่จะคำนวณระยะทาง หากไม่ได้ระบุ ระบบจะไม่คำนวณระยะทาง ระบบจะไม่ใช้ระดับความสูงในการคำนวณหากมีการระบุ
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete origin="lat,lng"></gmp-place-autocomplete>
  • <gmp-place-autocomplete origin="lat,lng,altitude"></gmp-place-autocomplete>
requestedLanguage
ประเภท:  string optional
ตัวระบุภาษาสำหรับภาษาที่ควรแสดงผลลัพธ์ (หากเป็นไปได้) ผลการค้นหาในภาษาที่เลือกอาจได้รับการจัดอันดับสูงขึ้น แต่คำแนะนำไม่ได้จำกัดอยู่แค่ในภาษานี้ ดูรายการภาษาที่รองรับ
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete requested-language="string"></gmp-place-autocomplete>
requestedRegion
ประเภท:  string optional
รหัสภูมิภาคที่ใช้สำหรับการจัดรูปแบบผลลัพธ์และการกรองผลลัพธ์ แต่ไม่ได้จำกัดการแนะนำไว้เฉพาะในประเทศนี้ รหัสภูมิภาคยอมรับค่า ccTLD ("โดเมนระดับบนสุด") ที่มีอักขระ 2 ตัว รหัส ccTLD ส่วนใหญ่จะเหมือนกับรหัส ISO 3166-1 แต่ก็มีข้อยกเว้นที่สำคัญบางประการ เช่น ccTLD ของสหราชอาณาจักรคือ "uk" (.co.uk) ขณะที่รหัส ISO 3166-1 คือ "gb" (ในทางเทคนิคสำหรับนิติบุคคล "สหราชอาณาจักรบริเตนใหญ่และไอร์แลนด์เหนือ")
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete requested-region="string"></gmp-place-autocomplete>
unitSystem
ประเภท:  UnitSystem optional
ระบบหน่วยที่ใช้เพื่อแสดงระยะทาง หากไม่ได้ระบุ ระบบจะกำหนดระบบหน่วยตาม requestedRegion
แอตทริบิวต์ HTML:
  • <gmp-place-autocomplete unit-system="metric"></gmp-place-autocomplete>
  • <gmp-place-autocomplete unit-system="imperial"></gmp-place-autocomplete>
prediction-item
รายการในการคาดคะเนแบบเลื่อนลงซึ่งแสดงการคาดคะเนรายการเดียว
prediction-item-icon
ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในรายการการคาดคะเน
prediction-item-main-text
ส่วนของรายการการคาดการณ์ที่เป็นข้อความหลักของการคาดการณ์ สำหรับสถานที่ทางภูมิศาสตร์ ฟิลด์นี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อและหมายเลขถนน เช่น "10 ถนนคิง" โดยค่าเริ่มต้น ระบบจะระบายสีดำให้กับข้อความหลักของรายการการคาดคะเน หากมีข้อความเพิ่มเติมใน prediction-item ข้อความนั้นจะอยู่นอก prediction-item-main-text และรับรูปแบบจาก prediction-item โดยจะมีสีเทาเป็นค่าเริ่มต้น โดยปกติแล้ว ข้อความเพิ่มเติมจะเป็นที่อยู่
prediction-item-match
ส่วนของการคาดการณ์ที่ส่งกลับซึ่งตรงกับอินพุตของผู้ใช้ โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันนี้เป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน prediction-item ซึ่งไม่จำเป็นต้องเป็นส่วนหนึ่งของ prediction-item-main-text
prediction-item-selected
รายการเมื่อผู้ใช้ไปยังรายการนั้นผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะได้รับผลกระทบจากทั้งสไตล์ของส่วนนี้และสไตล์ของส่วนรายการที่คาดการณ์
prediction-list
องค์ประกอบภาพที่มีรายการการคาดคะเนที่บริการเติมข้อความอัตโนมัติของสถานที่ส่งคืน รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้ PlaceAutocompleteElement
background-color
ลบล้างสีพื้นหลังขององค์ประกอบ
border
ลบล้างเส้นขอบขององค์ประกอบ
border-radius
ลบล้างรัศมีเส้นขอบขององค์ประกอบ
color-scheme
ระบุรูปแบบสีที่แสดงผลองค์ประกอบนี้ได้ ดูรายละเอียดเพิ่มเติมได้ในcolor-scheme เอกสารประกอบ ค่าเริ่มต้นคือ color-scheme: light dark
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-error
function(errorEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง
gmp-select
function(placePredictionSelectEvent)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกการคาดคะเนสถานที่ มีออบเจ็กต์ PlacePrediction ซึ่งแปลงเป็นออบเจ็กต์ Place ได้

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

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

ตัวเลือกสำหรับการสร้าง PlaceAutocompleteElement ดูคำอธิบายของแต่ละพร็อพเพอร์ตี้ได้ในพร็อพเพอร์ตี้ที่มีชื่อเดียวกันในคลาส PlaceAutocompleteElement
includedPrimaryTypes optional
ประเภท:  Array<string> optional
includedRegionCodes optional
ประเภท:  Array<string> optional
locationBias optional
ประเภท:  LocationBias optional
locationRestriction optional
ประเภท:  LocationRestriction optional
name optional
ประเภท:  string optional
origin optional
requestedLanguage optional
ประเภท:  string optional
requestedRegion optional
ประเภท:  string optional
unitSystem optional
ประเภท:  UnitSystem optional

PlacePredictionSelectEvent class

google.maps.places.PlacePredictionSelectEvent ชั้นเรียน

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

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

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlacePredictionSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
placePrediction
ประเภท:  PlacePrediction
เปลี่ยนเป็น Place โดยโทรไปที่ PlacePrediction.toPlace

PlaceAutocompleteRequestErrorEvent class

google.maps.places.PlaceAutocompleteRequestErrorEvent ชั้นเรียน

เหตุการณ์นี้จะปล่อยโดย PlaceAutocompleteElement เมื่อมีปัญหาเกี่ยวกับคำขอเครือข่าย

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlaceAutocompleteRequestErrorEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API

PlaceContextualElement class

google.maps.places.PlaceContextualElement ชั้นเรียน

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

องค์ประกอบที่กำหนดเอง:
<gmp-place-contextual context-token="string"></gmp-place-contextual>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceContextualElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceContextualElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceContextualElement
PlaceContextualElement([options])
พารามิเตอร์: 
contextToken
ประเภท:  string optional
โทเค็นบริบท
แอตทริบิวต์ HTML:
  • <gmp-place-contextual context-token="string"></gmp-place-contextual>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

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

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

ตัวเลือกสำหรับ PlaceContextualElement
contextToken optional
ประเภท:  string optional
โทเค็นบริบทที่ได้จากคำตอบของ Grounding with Google Maps

PlaceContextualListConfigElement class

google.maps.places.PlaceContextualListConfigElement ชั้นเรียน

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

องค์ประกอบที่กำหนดเอง:
<gmp-place-contextual-list-config layout="compact" map-hidden map-mode="none"></gmp-place-contextual-list-config>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceContextualListConfigElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceContextualListConfigElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceContextualListConfigElement
PlaceContextualListConfigElement([options])
พารามิเตอร์: 
layout
ประเภท:  PlaceContextualListLayout optional
เลย์เอาต์
แอตทริบิวต์ HTML:
  • <gmp-place-contextual-list-config layout="compact"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config layout="vertical"></gmp-place-contextual-list-config>
mapHidden
ประเภท:  boolean optional
ซ่อนแผนที่หรือไม่
แอตทริบิวต์ HTML:
  • <gmp-place-contextual-list-config map-hidden></gmp-place-contextual-list-config>
mapMode
ประเภท:  PlaceContextualListMapMode optional
โหมดแผนที่ที่ใช้ในองค์ประกอบตามบริบทของสถานที่สำหรับรายการสถานที่
แอตทริบิวต์ HTML:
  • <gmp-place-contextual-list-config map-mode="none"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config map-mode="roadmap"></gmp-place-contextual-list-config>
  • <gmp-place-contextual-list-config map-mode="hybrid"></gmp-place-contextual-list-config>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

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

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

ตัวเลือกสำหรับ PlaceContextualListConfigElement
layout optional
ประเภท:  PlaceContextualListLayout optional
ค่าเริ่มต้น: PlaceContextualListLayout.VERTICAL
เลย์เอาต์
mapHidden optional
ประเภท:  boolean optional
ค่าเริ่มต้น: false
เป็นจริงหากควรซ่อนแผนที่
mapMode optional
ประเภท:  PlaceContextualListMapMode optional
ค่าเริ่มต้น: PlaceContextualListMapMode.ROADMAP
โหมดแผนที่ที่ใช้ในองค์ประกอบตามบริบทของสถานที่สำหรับรายการสถานที่

PlaceContextualListLayout ค่าคงที่

google.maps.places.PlaceContextualListLayout ค่าคงที่

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

เข้าถึงได้โดยโทรไปที่ const {PlaceContextualListLayout} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
COMPACT เลย์เอาต์รายการแบบกะทัดรัด: รายการจะแสดงเป็นลิงก์ในบรรทัดเดียว โดยมีรายการที่เกินมาในรายการแบบเลื่อนลง
VERTICAL เลย์เอาต์รายการแนวตั้ง: ระบบจะแสดงผลรายการเป็นบัตรในรายการแนวตั้ง

PlaceContextualListMapMode ค่าคงที่

google.maps.places.PlaceContextualListMapMode ค่าคงที่

โหมดแผนที่ที่ใช้ในองค์ประกอบตามบริบทของสถานที่สำหรับรายการสถานที่

เข้าถึงได้โดยโทรไปที่ const {PlaceContextualListMapMode} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
HYBRID เลเยอร์โปร่งใสของถนนสายหลักบนภาพถ่ายจากดาวเทียม หรือภาพที่สมจริงในรูปแบบ 3 มิติ
NONE ไม่มีแผนที่
ROADMAP แผนที่ถนน 2 มิติปกติ

PlaceDetailsElement class

google.maps.places.PlaceDetailsElement ชั้นเรียน

แสดงรายละเอียดของสถานที่ในเลย์เอาต์แบบเต็ม ต่อท้ายด้วย 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 Console

องค์ประกอบที่กำหนดเอง:
<gmp-place-details></gmp-place-details>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceDetailsElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceDetailsElement
PlaceDetailsElement([options])
พารามิเตอร์: 
place
ประเภท:  Place optional
อ่านอย่างเดียว ออบเจ็กต์สถานที่ซึ่งมีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงในปัจจุบัน
--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
ใช้สำหรับที่อยู่ของสถานที่ คะแนน ประเภท ราคา สถานะเปิดอยู่ เวลาทำการ รีวิว หมายเลขโทรศัพท์ เว็บไซต์ รหัสพลัส ฟีเจอร์ยอดนิยม และข้อความในเนื้อหาในกล่องโต้ตอบการเปิดเผยข้อมูลของ 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
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-error
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง
gmp-load
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง

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

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

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

PlaceDetailsCompactElement class

google.maps.places.PlaceDetailsCompactElement ชั้นเรียน

แสดงรายละเอียดของสถานที่ในเลย์เอาต์กะทัดรัด ต่อท้ายด้วย 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 Console

องค์ประกอบที่กำหนดเอง:
<gmp-place-details-compact orientation="vertical" truncation-preferred></gmp-place-details-compact>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceDetailsCompactElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsCompactElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceDetailsCompactElement
PlaceDetailsCompactElement([options])
พารามิเตอร์: 
orientation
ประเภท:  PlaceDetailsOrientation optional
ค่าเริ่มต้น: PlaceDetailsOrientation.VERTICAL
ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ
แอตทริบิวต์ HTML:
  • <gmp-place-details-compact orientation="vertical"></gmp-place-details-compact>
  • <gmp-place-details-compact orientation="horizontal"></gmp-place-details-compact>
place
ประเภท:  Place optional
อ่านอย่างเดียว ออบเจ็กต์สถานที่ซึ่งมีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงในปัจจุบัน
truncationPreferred
ประเภท:  boolean
ค่าเริ่มต้น: false
หากเป็นจริง ระบบจะตัดชื่อและที่อยู่ของสถานที่ให้พอดีกับ 1 บรรทัดแทนที่จะตัดคำ
แอตทริบิวต์ HTML:
  • <gmp-place-details-compact truncation-preferred></gmp-place-details-compact>
--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
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-error
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง
gmp-load
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง

PlaceDetailsCompactElementOptions interface

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

ตัวเลือกสำหรับ PlaceDetailsCompactElement
orientation optional
ประเภท:  PlaceDetailsOrientation optional
ดูPlaceDetailsCompactElement.orientation
truncationPreferred optional
ประเภท:  boolean optional
ดูPlaceDetailsCompactElement.truncationPreferred

PlaceDetailsOrientation ค่าคงที่

google.maps.places.PlaceDetailsOrientation ค่าคงที่

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

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsOrientation} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
HORIZONTAL การวางแนวนอน
VERTICAL การวางแนวตั้ง

PlaceDetailsPlaceRequestElement class

google.maps.places.PlaceDetailsPlaceRequestElement ชั้นเรียน

กำหนดค่า 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="some-place-id"></gmp-place-details-place-request>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceDetailsPlaceRequestElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsPlaceRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceDetailsPlaceRequestElement
PlaceDetailsPlaceRequestElement([options])
พารามิเตอร์: 
place
ประเภท:  Place optional
ค่าเริ่มต้น: null
ออบเจ็กต์ สถานที่ รหัส หรือชื่อทรัพยากรที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่แบบย่อ พร็อพเพอร์ตี้นี้จะแสดงในแอตทริบิวต์เป็นชื่อทรัพยากร
แอตทริบิวต์ HTML:
  • <gmp-place-details-place-request place="some-place-id"></gmp-place-details-place-request>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

PlaceDetailsPlaceRequestElementOptions interface

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

ตัวเลือกสำหรับ PlaceDetailsPlaceRequestElement
place optional
ประเภท:  Place|string optional
ดู PlaceDetailsPlaceRequestElement.place

PlaceDetailsLocationRequestElement class

google.maps.places.PlaceDetailsLocationRequestElement ชั้นเรียน

กำหนดค่า 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>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceDetailsLocationRequestElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceDetailsLocationRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceDetailsLocationRequestElement
PlaceDetailsLocationRequestElement([options])
พารามิเตอร์: 
location
ค่าเริ่มต้น: null
ตำแหน่งที่จะแสดงรายละเอียดในองค์ประกอบรายละเอียดสถานที่ ปรับเป็น LatLngAltitude
แอตทริบิวต์ HTML:
  • <gmp-place-details-location-request location="lat,lng"></gmp-place-details-location-request>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

PlaceDetailsLocationRequestElementOptions interface

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

ตัวเลือกสำหรับ PlaceDetailsLocationRequestElement
location optional
ตำแหน่งที่จะแสดงสถานที่

PlaceSearchElement class

google.maps.places.PlaceSearchElement ชั้นเรียน

แสดงผลการค้นหาสถานที่เป็นรายการ ต่อท้ายด้วย 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>

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

องค์ประกอบที่กำหนดเอง:
<gmp-place-search attribution-position="top" orientation="vertical" selectable truncation-preferred></gmp-place-search>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceSearchElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceSearchElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceSearchElement
PlaceSearchElement([options])
พารามิเตอร์: 
attributionPosition
ประเภท:  PlaceSearchAttributionPosition optional
ค่าเริ่มต้น: PlaceSearchAttributionPosition.TOP
ตำแหน่งของโลโก้การระบุแหล่งที่มาและปุ่มการเปิดเผยข้อมูลทางกฎหมาย
แอตทริบิวต์ HTML:
  • <gmp-place-search attribution-position="top"></gmp-place-search>
  • <gmp-place-search attribution-position="bottom"></gmp-place-search>
orientation
ประเภท:  PlaceSearchOrientation optional
ค่าเริ่มต้น: PlaceSearchOrientation.VERTICAL
ตัวแปรการวางแนว (แนวตั้งหรือแนวนอน) ขององค์ประกอบ
แอตทริบิวต์ HTML:
  • <gmp-place-search orientation="vertical"></gmp-place-search>
  • <gmp-place-search orientation="horizontal"></gmp-place-search>
places
ประเภท:  Array<Place>
อ่านอย่างเดียว อาร์เรย์ของออบเจ็กต์ Place ที่มีรหัส ตำแหน่ง และวิวพอร์ตของสถานที่ที่แสดงผลในปัจจุบัน
selectable
ประเภท:  boolean optional
ค่าเริ่มต้น: false
รายการในลิสต์เลือกได้หรือไม่ หากเป็นจริง รายการจะกลายเป็นปุ่มที่ส่งเหตุการณ์ gmp-select เมื่อคลิก นอกจากนี้ยังรองรับการไปยังส่วนต่างๆ และการเลือกด้วยแป้นพิมพ์ที่เข้าถึงได้ด้วย
แอตทริบิวต์ HTML:
  • <gmp-place-search selectable></gmp-place-search>
truncationPreferred
ประเภท:  boolean optional
ค่าเริ่มต้น: false
หากเป็น "จริง" ระบบจะตัดเนื้อหาบางบรรทัดให้อยู่ภายใน 1 บรรทัดแทนที่จะตัดคำ
แอตทริบิวต์ HTML:
  • <gmp-place-search truncation-preferred></gmp-place-search>
--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
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener
gmp-error
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อคำขอไปยังแบ็กเอนด์ถูกปฏิเสธ (เช่น คีย์ API ไม่ถูกต้อง) เหตุการณ์นี้จะไม่ฟอง
gmp-load
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะเริ่มทำงานเมื่อองค์ประกอบโหลดและแสดงเนื้อหา เหตุการณ์นี้จะไม่ฟอง
gmp-select
function(event)
อาร์กิวเมนต์: 
เหตุการณ์นี้จะทริกเกอร์เมื่อมีการเลือกสถานที่จากรายการ มีออบเจ็กต์ Place ที่มีรหัส สถานที่ตั้ง และวิวพอร์ตของสถานที่ที่เลือก

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

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

ตัวเลือกสำหรับ PlaceSearchElement
attributionPosition optional
ประเภท:  PlaceSearchAttributionPosition optional
ดูPlaceSearchElement.attributionPosition
orientation optional
ประเภท:  PlaceSearchOrientation optional
ดูPlaceSearchElement.orientation
selectable optional
ประเภท:  boolean optional
ดู PlaceSearchElement.selectable
truncationPreferred optional
ประเภท:  boolean optional
ดูPlaceSearchElement.truncationPreferred

PlaceSearchAttributionPosition ค่าคงที่

google.maps.places.PlaceSearchAttributionPosition ค่าคงที่

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

เข้าถึงได้โดยโทรไปที่ const {PlaceSearchAttributionPosition} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
BOTTOM การระบุแหล่งที่มาที่ด้านล่างของ PlaceSearchElement
TOP การระบุแหล่งที่มาที่ด้านบนของ PlaceSearchElement

PlaceSearchOrientation ค่าคงที่

google.maps.places.PlaceSearchOrientation ค่าคงที่

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

เข้าถึงได้โดยโทรไปที่ const {PlaceSearchOrientation} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
HORIZONTAL การวางแนวนอน
VERTICAL การวางแนวตั้ง

PlaceSelectEvent class

google.maps.places.PlaceSelectEvent ชั้นเรียน

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

ชั้นเรียนนี้ขยายเวลา Event

เข้าถึงได้โดยโทรไปที่ const {PlaceSelectEvent} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
place
ประเภท:  Place
สถานที่ที่เลือก

PlaceNearbySearchRequestElement class

google.maps.places.PlaceNearbySearchRequestElement ชั้นเรียน

กำหนดค่า 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="preference"></gmp-place-nearby-search-request>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceNearbySearchRequestElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceNearbySearchRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceNearbySearchRequestElement
PlaceNearbySearchRequestElement([options])
พารามิเตอร์: 
excludedPrimaryTypes
ประเภท:  Array<string> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request excluded-primary-types="excluded-primary-type1 excluded-primary-type2..."></gmp-place-nearby-search-request>
excludedTypes
ประเภท:  Array<string> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request excluded-types="excluded-type1 excluded-type2..."></gmp-place-nearby-search-request>
includedPrimaryTypes
ประเภท:  Array<string> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request included-primary-types="included-primary-type1 included-primary-type2..."></gmp-place-nearby-search-request>
includedTypes
ประเภท:  Array<string> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request included-types="included-type1 included-type2..."></gmp-place-nearby-search-request>
locationRestriction
ประเภท:  Circle|CircleLiteral optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request location-restriction="radius@lat,lng"></gmp-place-nearby-search-request>
maxResultCount
ประเภท:  number optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request max-result-count="number"></gmp-place-nearby-search-request>
rankPreference
ประเภท:  SearchNearbyRankPreference optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-nearby-search-request rank-preference="preference"></gmp-place-nearby-search-request>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

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

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

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

PlaceTextSearchRequestElement class

google.maps.places.PlaceTextSearchRequestElement ชั้นเรียน

กำหนดค่า 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="rate" included-type="type" is-open-now="true" location-bias="lat,lng" location-restriction="swlat,swlng|nelat,nelng" max-result-count="number" min-rating="number" price-levels="price-level1 price-level2..." rank-preference="preference" text-query="string" use-strict-type-filtering></gmp-place-text-search-request>

ชั้นเรียนนี้ขยายเวลา HTMLElement

คลาสนี้ใช้ PlaceTextSearchRequestElementOptions

เข้าถึงได้โดยโทรไปที่ const {PlaceTextSearchRequestElement} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
PlaceTextSearchRequestElement
PlaceTextSearchRequestElement([options])
พารามิเตอร์: 
evConnectorTypes
ประเภท:  Array<EVConnectorType> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request ev-connector-types="ev-connector-type1 ev-connector-type2..."></gmp-place-text-search-request>
evMinimumChargingRateKw
ประเภท:  number optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request ev-minimum-charging-rate-kw="rate"></gmp-place-text-search-request>
includedType
ประเภท:  string optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request included-type="type"></gmp-place-text-search-request>
isOpenNow
ประเภท:  boolean optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request is-open-now="true"></gmp-place-text-search-request>
locationBias
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request location-bias="lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="lat,lng[,altitude]"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="radius@lat,lng"></gmp-place-text-search-request>
  • <gmp-place-text-search-request location-bias="IP_BIAS"></gmp-place-text-search-request>
locationRestriction
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request location-restriction="swlat,swlng|nelat,nelng"></gmp-place-text-search-request>
maxResultCount
ประเภท:  number optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request max-result-count="number"></gmp-place-text-search-request>
minRating
ประเภท:  number optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request min-rating="number"></gmp-place-text-search-request>
priceLevels
ประเภท:  Array<PriceLevel> optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request price-levels="price-level1 price-level2..."></gmp-place-text-search-request>
rankPreference
ประเภท:  SearchByTextRankPreference optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request rank-preference="preference"></gmp-place-text-search-request>
textQuery
ประเภท:  string optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request text-query="string"></gmp-place-text-search-request>
useStrictTypeFiltering
ประเภท:  boolean optional
ค่าเริ่มต้น: null
แอตทริบิวต์ HTML:
  • <gmp-place-text-search-request use-strict-type-filtering></gmp-place-text-search-request>
addEventListener
addEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่คำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ซึ่งแสดงถึงประเภทเหตุการณ์ที่จะรับฟัง
  • listener:  EventListener|EventListenerObject ออบเจ็กต์ที่ได้รับการแจ้งเตือน ซึ่งต้องเป็นฟังก์ชันหรือออบเจ็กต์ที่มีเมธอด handleEvent
  • options:  boolean|AddEventListenerOptions optional ดูตัวเลือก เหตุการณ์ที่กำหนดเองรองรับเฉพาะ capture และ passive
ค่าที่ส่งคืน:  void
ตั้งค่าฟังก์ชันที่จะเรียกใช้เมื่อใดก็ตามที่มีการส่งเหตุการณ์ที่ระบุไปยังเป้าหมาย ดู addEventListener
removeEventListener
removeEventListener(type, listener[, options])
พารามิเตอร์: 
  • type:  string สตริงที่ระบุประเภทของเหตุการณ์ที่จะนำเครื่องมือฟังเหตุการณ์ออก
  • listener:  EventListener|EventListenerObject Listener เหตุการณ์ของตัวแฮนเดิลเหตุการณ์ที่จะนำออกจากเป้าหมายเหตุการณ์
  • options:  boolean|EventListenerOptions optional ดูตัวเลือก
ค่าที่ส่งคืน:  void
นำ Listener เหตุการณ์ที่ลงทะเบียนไว้ก่อนหน้านี้ด้วย addEventListener ออกจากเป้าหมาย ดู removeEventListener

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

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

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

เติมข้อความอัตโนมัติ คลาส

google.maps.places.Autocomplete ชั้นเรียน

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

ชั้นเรียนนี้ขยายเวลา MVCObject

เข้าถึงได้โดยโทรไปที่ const {Autocomplete} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
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 ที่เป็น Stub โดยมีพร็อพเพอร์ตี้ name ตั้งค่าเป็นค่าปัจจุบันของช่องป้อนข้อมูล
setBounds
setBounds(bounds)
พารามิเตอร์: 
ค่าที่ส่งคืน: ไม่มี
กำหนดพื้นที่ที่ต้องการซึ่งจะแสดงผลลัพธ์ของสถานที่ ผลลัพธ์จะเอนเอียงไปทางด้านนี้ แต่ไม่ได้จำกัดอยู่เพียงด้านนี้
setComponentRestrictions
setComponentRestrictions(restrictions)
พารามิเตอร์: 
  • restrictions:  ComponentRestrictions optional ข้อจำกัดในการใช้งาน
ค่าที่ส่งคืน: ไม่มี
ตั้งค่าข้อจำกัดของคอมโพเนนต์ ข้อจำกัดของคอมโพเนนต์ใช้เพื่อจำกัดการคาดการณ์ให้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
setFields
setFields(fields)
พารามิเตอร์: 
  • fields:  Array<string> optional
ค่าที่ส่งคืน: ไม่มี
กำหนดช่องที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ดูรายการช่องได้ที่ PlaceResult
setOptions
setOptions(options)
พารามิเตอร์: 
ค่าที่ส่งคืน: ไม่มี
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 optional
ประเภท:  LatLngBounds|LatLngBoundsLiteral optional
พื้นที่ที่จะค้นหาสถานที่
componentRestrictions optional
ประเภท:  ComponentRestrictions optional
ข้อจำกัดของคอมโพเนนต์ ข้อจำกัดของคอมโพเนนต์ใช้เพื่อจำกัดการคาดการณ์ให้เฉพาะภายในคอมโพเนนต์หลัก เช่น ประเทศ
fields optional
ประเภท:  Array<string> optional
ฟิลด์ที่จะรวมไว้สำหรับสถานที่ในการตอบกลับรายละเอียดเมื่อดึงข้อมูลรายละเอียดสำเร็จ ซึ่งจะมีการเรียกเก็บเงิน หากส่ง ['ALL'] ระบบจะแสดงผลและเรียกเก็บเงินสำหรับช่องที่มีอยู่ทั้งหมด (ไม่แนะนำสำหรับการติดตั้งใช้งานจริง) ดูรายการช่องได้ที่ PlaceResult ระบุฟิลด์ที่ซ้อนกันได้ด้วยเส้นทางแบบจุด (เช่น "geometry.location") ค่าเริ่มต้นคือ ['ALL']
placeIdOnly optional
ประเภท:  boolean optional
กำหนดว่าจะดึงข้อมูลเฉพาะรหัสสถานที่หรือไม่ PlaceResult ที่พร้อมใช้งานเมื่อทริกเกอร์เหตุการณ์ place_changed จะมีเฉพาะฟิลด์ place_id, types และ name โดยมี place_id, types และ description ที่บริการเติมข้อความอัตโนมัติแสดง ปิดใช้โดยค่าเริ่มต้น
strictBounds optional
ประเภท:  boolean optional
ค่าบูลีนที่ระบุว่าวิดเจ็ตการเติมข้อความอัตโนมัติควรแสดงเฉพาะสถานที่ที่อยู่ภายในขอบเขตของวิดเจ็ตการเติมข้อความอัตโนมัติ ณ เวลาที่ส่งคำค้นหา การตั้งค่า strictBounds เป็น false (ซึ่งเป็นค่าเริ่มต้น) จะทำให้ผลการค้นหามีแนวโน้มที่จะเป็นสถานที่ที่อยู่ในขอบเขต แต่จะไม่จำกัดเฉพาะสถานที่เหล่านั้น
types optional
ประเภท:  Array<string> optional
ประเภทของการคาดการณ์ที่จะแสดง ดูประเภทที่รองรับได้ใน คู่มือสำหรับนักพัฒนาซอฟต์แวร์ หากไม่ได้ระบุประเภท ระบบจะแสดงผลประเภททั้งหมด

google.maps.places.SearchBox ชั้นเรียน

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

ชั้นเรียนนี้ขยายเวลา MVCObject

เข้าถึงได้โดยโทรไปที่ const {SearchBox} = await google.maps.importLibrary("places")
ดูไลบรารีใน Maps JavaScript API
SearchBox
SearchBox(inputField[, opts])
พารามิเตอร์: 
สร้างอินสแตนซ์ใหม่ของ SearchBox ที่แนบกับช่องข้อความอินพุตที่ระบุพร้อมตัวเลือกที่กำหนด
getBounds
getBounds()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  LatLngBounds|undefined
แสดงขอบเขตที่การคาดคะเนการค้นหามีแนวโน้ม
getPlaces
getPlaces()
พารามิเตอร์: ไม่มี
ค่าที่ส่งคืน:  Array<PlaceResult>|undefined
แสดงคำค้นหาที่ผู้ใช้เลือกเพื่อใช้กับเหตุการณ์ places_changed
setBounds
setBounds(bounds)
พารามิเตอร์: 
ค่าที่ส่งคืน: ไม่มี
ตั้งค่าภูมิภาคที่จะใช้สำหรับการคาดการณ์การค้นหาแบบเอนเอียง ผลลัพธ์จะเอนเอียงไปทางด้านนี้เท่านั้น แต่จะไม่จำกัดอยู่แค่ด้านนี้
สืบทอด: addListener, bindTo, get, notify, set, setValues, unbind, unbindAll
places_changed
function()
อาร์กิวเมนต์: ไม่มี
เหตุการณ์นี้จะทริกเกอร์เมื่อผู้ใช้เลือกคำค้นหา getPlaces ควรใช้เพื่อรับสถานที่ใหม่

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

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

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