Place Autocomplete

เลือกแพลตฟอร์ม: Android iOS JavaScript บริการบนเว็บ

เกริ่นนำ

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

เริ่มต้นใช้งาน

ก่อนที่จะใช้ไลบรารี Places ใน Maps JavaScript API ก่อนอื่นให้เปิดใช้ Places API ใน Google Cloud Console ในโปรเจ็กต์เดียวกันกับที่คุณตั้งค่าสำหรับ Maps JavaScript API

วิธีดูรายการ API ที่เปิดใช้

  1. ไปที่คอนโซล Google Cloud
  2. คลิกปุ่มเลือกโปรเจ็กต์ จากนั้นเลือกโปรเจ็กต์เดียวกับที่คุณตั้งค่าสำหรับ Maps JavaScript API แล้วคลิกเปิด
  3. จากรายการ API ในหน้าแดชบอร์ด ให้มองหา Places API
  4. หากเห็น API ในรายการ นั่นหมายความว่าทุกอย่างเรียบร้อยแล้ว หาก API ไม่อยู่ในรายการ ให้เปิดใช้งานโดยทำดังนี้
    1. เลือกเปิดใช้ API ที่ด้านบนของหน้าเพื่อแสดงแท็บไลบรารี หรือเลือกคลังจากเมนูด้านซ้าย
    2. ค้นหา Places API แล้วเลือกจากรายการผลลัพธ์
    3. เลือกเปิดใช้ เมื่อขั้นตอนเสร็จสิ้นแล้ว Places API จะปรากฏในรายการ API ในหน้าแดชบอร์ด

กำลังโหลดคลัง

บริการ Places เป็นไลบรารีที่มีในตัว และแยกจากโค้ด JavaScript API หลักของ Maps หากต้องการใช้ฟังก์ชันที่มีอยู่ภายในไลบรารีนี้ คุณต้องโหลดฟังก์ชันโดยใช้พารามิเตอร์ libraries ใน URL การเริ่มต้นระบบของ Maps API โดยทำดังนี้

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initMap">
</script>

ดูข้อมูลเพิ่มเติมที่ ภาพรวมของไลบรารี

สรุปชั้นเรียน

API มีวิดเจ็ตเติมข้อความอัตโนมัติ 2 ประเภท ซึ่งคุณจะเพิ่มผ่านคลาส Autocomplete และ SearchBox ตามลำดับได้ นอกจากนี้ คุณยังใช้คลาส AutocompleteService เพื่อเรียกผลลัพธ์ของการเติมข้อความอัตโนมัติแบบเป็นโปรแกรมได้ (ดูข้อมูลอ้างอิงของ Maps JavaScript API: คลาส AutocompleteService)

ด้านล่างนี้เป็นสรุปชั้นเรียนที่มีให้บริการ

  • Autocomplete จะเพิ่มช่องป้อนข้อความลงในหน้าเว็บของคุณ และตรวจสอบช่องดังกล่าวเพื่อหารายการอักขระ เมื่อผู้ใช้ป้อนข้อความ การเติมข้อความอัตโนมัติจะแสดงการคาดคะเนสถานที่ในรูปแบบของรายการตัวเลือกแบบเลื่อนลง เมื่อผู้ใช้เลือกสถานที่จากรายการ ข้อมูลเกี่ยวกับสถานที่นั้นจะถูกส่งคืนไปยังออบเจ็กต์เติมข้อความอัตโนมัติ ซึ่งแอปพลิเคชันของคุณจะเรียกข้อมูลได้ โปรดดูรายละเอียดด้านล่าง
    ช่องข้อความที่เติมข้อความอัตโนมัติและรายการคาดคะเนสถานที่ที่ให้ไว้เมื่อผู้ใช้ป้อนคำค้นหา
    ภาพที่ 1: ช่องข้อความเติมข้อความอัตโนมัติและเลือกรายการ
    แบบฟอร์มที่อยู่ที่กรอกสมบูรณ์แล้ว
    ภาพที่ 2: แบบฟอร์มที่อยู่ที่กรอกเสร็จแล้ว
  • SearchBox เพิ่มช่องป้อนข้อความลงในหน้าเว็บ ในลักษณะเดียวกับ Autocomplete โดยมีความแตกต่างดังต่อไปนี้
    • ความแตกต่างที่สำคัญคือผลการค้นหาที่ปรากฏในรายการตัวเลือก SearchBox จะระบุรายการการคาดคะเนเพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) และข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าใน ใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อของร้านพิซซ่าหลายๆ แห่ง
    • SearchBox มีตัวเลือกน้อยกว่า Autocomplete ในการจํากัดการค้นหา สำหรับวิธีแรก คุณอาจให้น้ำหนักพิเศษกับการค้นหา LatLngBounds ที่กำหนด ในกรณีหลัง คุณจะจำกัดการค้นหาไว้เฉพาะประเทศและประเภทสถานที่ที่เจาะจง รวมถึงการกำหนดขอบเขตได้ ดูข้อมูลเพิ่มเติมได้ที่ด้านล่าง
    แบบฟอร์มที่อยู่ที่กรอกสมบูรณ์แล้ว
    ภาพที่ 3: SearchBox แสดงข้อความค้นหาและการคาดคะเนสถานที่
    โปรดดูรายละเอียดด้านล่าง
  • คุณสร้างออบเจ็กต์ AutocompleteService เพื่อเรียกข้อมูลการคาดการณ์แบบเป็นโปรแกรมได้ เรียก getPlacePredictions() เพื่อเรียกข้อมูลสถานที่ที่ตรงกัน หรือเรียกใช้ getQueryPredictions() เพื่อเรียกข้อมูลสถานที่ที่ตรงกันและข้อความค้นหาที่แนะนำ หมายเหตุ: AutocompleteService ไม่ได้เพิ่มการควบคุม UI ใดๆ แต่เมธอดข้างต้นจะแสดงอาร์เรย์ของออบเจ็กต์การคาดการณ์แทน ออบเจ็กต์การคาดการณ์แต่ละรายการมีข้อความของการคาดการณ์ รวมถึงข้อมูลอ้างอิงและรายละเอียดว่าผลลัพธ์ตรงกับข้อมูลที่ผู้ใช้ป้อนอย่างไร โปรดดูรายละเอียดด้านล่าง

การเพิ่มวิดเจ็ตการเติมข้อความอัตโนมัติ

วิดเจ็ต Autocomplete จะสร้างช่องป้อนข้อความบนหน้าเว็บ ใส่การคาดคะเนสถานที่ในรายการตัวเลือก UI และแสดงผลรายละเอียดสถานที่เพื่อตอบกลับคำขอ getPlace() แต่ละรายการในรายการเลือกจะตรงกับสถานที่แห่งเดียว (ตามที่กำหนดโดย Places API)

ตัวสร้าง Autocomplete รับอาร์กิวเมนต์ 2 รายการ ดังนี้

  • องค์ประกอบ HTML input ของประเภท text นี่คือช่องป้อนข้อมูลที่บริการเติมข้อความอัตโนมัติ จะตรวจสอบและแนบผลลัพธ์มา
  • อาร์กิวเมนต์ AutocompleteOptions ที่ไม่บังคับ ซึ่งมีพร็อพเพอร์ตี้ต่อไปนี้
    • อาร์เรย์ของข้อมูล fields ที่จะรวมอยู่ในการตอบกลับ Place Details สำหรับ PlaceResult ที่เลือกของผู้ใช้ หากไม่ได้ตั้งค่าพร็อพเพอร์ตี้หรือมีการส่ง ['ALL'] เข้ามา ระบบจะส่งคืนช่องที่มีอยู่ทั้งหมดและเรียกเก็บเงินสำหรับ (ไม่แนะนำสำหรับการติดตั้งใช้งานเวอร์ชันที่ใช้งานจริง) ดูรายการช่องได้ที่ PlaceResult
    • อาร์เรย์ของ types ที่ระบุประเภทอย่างชัดแจ้งหรือประเภทคอลเล็กชันตามที่ระบุไว้ในประเภทที่รองรับ ถ้าไม่มีการระบุประเภท ระบบจะแสดงผล ทุกประเภท
    • bounds เป็นออบเจ็กต์ google.maps.LatLngBounds ที่ระบุพื้นที่ที่จะค้นหาสถานที่ ผลที่ได้จะเอนเอียงไปทาง (แต่ยังไม่จำกัดอยู่เฉพาะกับสถานที่ที่อยู่ในขอบเขตเหล่านี้)
    • strictBounds เป็น boolean ที่กำหนดว่า API ต้องแสดงผลเฉพาะตำแหน่งที่อยู่ภายในภูมิภาคที่กำหนดโดย bounds เท่านั้นหรือไม่ API จะไม่แสดงผลลัพธ์นอกภูมิภาคนี้แม้ว่าผลลัพธ์จะตรงกับข้อมูลที่ผู้ใช้ป้อนก็ตาม
    • คุณใช้ componentRestrictions เพื่อจำกัดผลการค้นหาให้แสดงเฉพาะกลุ่มที่ต้องการได้ ขณะนี้ คุณสามารถใช้ componentRestrictions เพื่อกรองประเทศได้สูงสุด 5 ประเทศ ต้องส่งประเทศเป็นรหัสประเทศ 2 อักขระตามมาตรฐาน ISO 3166-1 Alpha-2 ต้องส่งหลายประเทศเป็นรายการรหัสประเทศ

      หมายเหตุ: หากคุณได้รับผลลัพธ์ที่ไม่คาดคิดพร้อมรหัสประเทศ ให้ตรวจสอบว่าคุณใช้รหัสที่ประกอบด้วยประเทศ เขตแดนที่ไม่พึ่งพิง และพื้นที่พิเศษที่สนใจทางภูมิศาสตร์ซึ่งคุณตั้งใจไว้ ดูข้อมูลโค้ดได้ที่ Wikipedia: รายการรหัสประเทศตามมาตรฐาน ISO 3166 หรือแพลตฟอร์มการท่องเว็บแบบออนไลน์ของ ISO

    • คุณใช้ placeIdOnly เพื่อสั่งให้วิดเจ็ต Autocomplete ดึงเฉพาะรหัสสถานที่ได้ ในการเรียกใช้ getPlace() ในออบเจ็กต์ Autocomplete ค่า PlaceResult ที่พร้อมให้ใช้งานจะมีเฉพาะพร็อพเพอร์ตี้ place id, types และ name เท่านั้น คุณสามารถใช้รหัสสถานที่ที่ส่งคืนพร้อมกับการเรียกใช้บริการสถานที่ การระบุพิกัดทางภูมิศาสตร์ เส้นทาง หรือเมตริกระยะทางได้

การจำกัดการคาดคะเนการเติมข้อความอัตโนมัติ

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

ตั้งค่าตัวเลือกในการก่อสร้าง

ตัวสร้าง Autocomplete จะยอมรับพารามิเตอร์ AutocompleteOptions เพื่อตั้งข้อจำกัดในการสร้างวิดเจ็ต ตัวอย่างต่อไปนี้ตั้งค่าตัวเลือก bounds, componentRestrictions และ types ให้ขอประเภทสถานที่ establishment โดยกำหนดให้เป็นสถานที่ภายในพื้นที่ทางภูมิศาสตร์ที่ระบุและจำกัดการคาดการณ์ไว้เฉพาะสถานที่ในสหรัฐอเมริกาเท่านั้น การตั้งค่าตัวเลือก fields จะระบุข้อมูลที่จะแสดงผลเกี่ยวกับสถานที่ที่เลือกของผู้ใช้

เรียก setOptions() เพื่อเปลี่ยนค่าของตัวเลือกสำหรับวิดเจ็ตที่มีอยู่

TypeScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input") as HTMLInputElement;
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};

const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

const center = { lat: 50.064192, lng: -130.605469 };
// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};
const input = document.getElementById("pac-input");
const options = {
  bounds: defaultBounds,
  componentRestrictions: { country: "us" },
  fields: ["address_components", "geometry", "icon", "name"],
  strictBounds: false,
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

ระบุช่องข้อมูล

ระบุช่องข้อมูลเพื่อหลีกเลี่ยงการเรียกเก็บเงินสำหรับ SKU ข้อมูลสถานที่ที่คุณไม่ต้องการ ใส่พร็อพเพอร์ตี้ fields ใน AutocompleteOptions ที่ส่งไปยังเครื่องมือสร้างวิดเจ็ตตามที่แสดงในตัวอย่างก่อนหน้านี้ หรือเรียกใช้ setFields() ในออบเจ็กต์ Autocomplete ที่มีอยู่

autocomplete.setFields(["place_id", "geometry", "name"]);

ระบุการให้น้ำหนักพิเศษและขอบเขตพื้นที่การค้นหาของการเติมข้อความอัตโนมัติ

คุณอาจให้น้ำหนักพิเศษกับผลการเติมข้อความอัตโนมัติเพื่อเลือกตำแหน่งหรือพื้นที่โดยประมาณตามแนวทางต่อไปนี้

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

ตัวอย่างก่อนหน้านี้สาธิตการตั้งค่าขอบเขตเมื่อสร้าง ตัวอย่างต่อไปนี้แสดงถึงเทคนิคการให้น้ำหนักแบบอื่นๆ

เปลี่ยนขอบเขตของการเติมข้อความอัตโนมัติที่มีอยู่

เรียกใช้ setBounds() เพื่อเปลี่ยนพื้นที่ค้นหาบน Autocomplete ที่มีอยู่ให้เป็นขอบเขตสี่เหลี่ยมผืนผ้า

TypeScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);

JavaScript

const southwest = { lat: 5.6108, lng: 136.589326 };
const northeast = { lat: 61.179287, lng: 2.64325 };
const newBounds = new google.maps.LatLngBounds(southwest, northeast);

autocomplete.setBounds(newBounds);
ตั้งค่าขอบเขตเป็นวิวพอร์ตของแผนที่

ใช้ bindTo() เพื่อให้น้ำหนักผลลัพธ์กับวิวพอร์ตของแผนที่ แม้ว่าวิวพอร์ตจะเปลี่ยนไปก็ตาม

TypeScript

autocomplete.bindTo("bounds", map);

JavaScript

autocomplete.bindTo("bounds", map);

ใช้ unbind() เพื่อยกเลิกการเชื่อมโยงการคาดคะเนการเติมข้อความอัตโนมัติจากวิวพอร์ตของแผนที่

TypeScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

JavaScript

autocomplete.unbind("bounds");
autocomplete.setBounds({ east: 180, west: -180, north: 90, south: -90 });

ดูตัวอย่าง

จำกัดการค้นหาให้อยู่ในขอบเขตปัจจุบัน

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

autocomplete.setOptions({ strictBounds: true });
จำกัดการคาดการณ์ไว้เฉพาะประเทศที่เจาะจง

ใช้ตัวเลือก componentRestrictions หรือโทรไปที่ setComponentRestrictions() เพื่อจำกัดการค้นหาแบบเติมข้อความอัตโนมัติไว้ไม่เกิน 5 ประเทศ

TypeScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

JavaScript

autocomplete.setComponentRestrictions({
  country: ["us", "pr", "vi", "gu", "mp"],
});

ดูตัวอย่าง

ประเภทสถานที่จำกัด

ใช้ตัวเลือก types หรือเรียก setTypes() เพื่อจำกัดการคาดการณ์ไว้สำหรับสถานที่บางประเภท ข้อจำกัดนี้จะระบุประเภทหรือคอลเล็กชันประเภทตามที่ระบุไว้ในประเภทสถานที่ หากไม่ได้ระบุข้อจำกัดไว้ ระบบจะแสดงผลทุกประเภท

สำหรับค่าของตัวเลือก types หรือค่าที่ส่งไปยัง setTypes() คุณจะระบุได้ดังนี้

คำขอจะถูกปฏิเสธในกรณีต่อไปนี้

การสาธิตการเติมข้อความอัตโนมัติใน Places จะแสดงให้เห็นความแตกต่างของการคาดคะเนระหว่างสถานที่ประเภทต่างๆ

ไปที่การสาธิต

กำลังรับข้อมูลสถานที่

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

  1. สร้างตัวแฮนเดิลเหตุการณ์สำหรับเหตุการณ์ place_changed และเรียกใช้ addListener() บนออบเจ็กต์ Autocomplete เพื่อเพิ่มตัวแฮนเดิล
  2. เรียกใช้ Autocomplete.getPlace() บนออบเจ็กต์ Autocomplete เพื่อเรียกออบเจ็กต์ PlaceResult ซึ่งหลังจากนั้นคุณจะใช้เพื่อรับข้อมูลเพิ่มเติมเกี่ยวกับสถานที่ที่เลือกได้

โดยค่าเริ่มต้น เมื่อผู้ใช้เลือกสถานที่ การเติมข้อความอัตโนมัติจะแสดงช่องข้อมูลทั้งหมดที่มีสําหรับสถานที่ที่เลือก และคุณจะเรียกเก็บเงินตามนั้น ใช้ Autocomplete.setFields() เพื่อระบุช่องข้อมูลสถานที่ที่จะแสดง อ่านเพิ่มเติมเกี่ยวกับออบเจ็กต์ PlaceResult รวมถึงรายการช่องข้อมูลสถานที่ที่คุณขอได้ โปรดใช้ Autocomplete.setFields() เพื่อระบุเฉพาะข้อมูลสถานที่ที่คุณจะใช้เพื่อหลีกเลี่ยงการชำระเงินสำหรับข้อมูลที่ไม่ต้องการ

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

สำหรับแบบฟอร์มที่อยู่ การรับที่อยู่ในรูปแบบที่มีโครงสร้างจะมีประโยชน์ หากต้องการแสดงที่อยู่แบบมีโครงสร้างของสถานที่ที่เลือก ให้โทรหา Autocomplete.setFields() แล้วระบุช่อง address_components

ตัวอย่างต่อไปนี้ใช้การเติมข้อความอัตโนมัติเพื่อกรอกข้อมูลในช่องต่างๆ ในแบบฟอร์มที่อยู่

TypeScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components as google.maps.GeocoderAddressComponent[]) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }

      case "locality":
        (document.querySelector("#locality") as HTMLInputElement).value =
          component.long_name;
        break;

      case "administrative_area_level_1": {
        (document.querySelector("#state") as HTMLInputElement).value =
          component.short_name;
        break;
      }

      case "country":
        (document.querySelector("#country") as HTMLInputElement).value =
          component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;

  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

JavaScript

function fillInAddress() {
  // Get the place details from the autocomplete object.
  const place = autocomplete.getPlace();
  let address1 = "";
  let postcode = "";

  // Get each component of the address from the place details,
  // and then fill-in the corresponding field on the form.
  // place.address_components are google.maps.GeocoderAddressComponent objects
  // which are documented at http://goo.gle/3l5i5Mr
  for (const component of place.address_components) {
    // @ts-ignore remove once typings fixed
    const componentType = component.types[0];

    switch (componentType) {
      case "street_number": {
        address1 = `${component.long_name} ${address1}`;
        break;
      }

      case "route": {
        address1 += component.short_name;
        break;
      }

      case "postal_code": {
        postcode = `${component.long_name}${postcode}`;
        break;
      }

      case "postal_code_suffix": {
        postcode = `${postcode}-${component.long_name}`;
        break;
      }
      case "locality":
        document.querySelector("#locality").value = component.long_name;
        break;
      case "administrative_area_level_1": {
        document.querySelector("#state").value = component.short_name;
        break;
      }
      case "country":
        document.querySelector("#country").value = component.long_name;
        break;
    }
  }

  address1Field.value = address1;
  postalField.value = postcode;
  // After filling the form with address components from the Autocomplete
  // prediction, set cursor focus on the second address line to encourage
  // entry of subpremise information such as apartment, unit, or floor number.
  address2Field.focus();
}

window.initAutocomplete = initAutocomplete;

ดูตัวอย่าง

การปรับแต่งข้อความตัวยึดตำแหน่ง

โดยค่าเริ่มต้น ช่องข้อความที่สร้างโดยบริการเติมข้อความอัตโนมัติจะมีข้อความตัวยึดตำแหน่งมาตรฐาน หากต้องการแก้ไขข้อความ ให้ตั้งค่าแอตทริบิวต์ placeholder ในองค์ประกอบ input ดังนี้

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

หมายเหตุ: ข้อความตัวยึดตำแหน่งเริ่มต้นจะได้รับการแปลโดยอัตโนมัติ หากระบุค่าตัวยึดตำแหน่งของตนเอง คุณต้องจัดการการแปลค่าดังกล่าวในแอปพลิเคชัน สำหรับข้อมูลเกี่ยวกับวิธีที่ Google Maps JavaScript API เลือกภาษาที่จะใช้ โปรดอ่านเอกสารเกี่ยวกับ การแปล

ดูการจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox เพื่อปรับแต่งลักษณะของวิดเจ็ต

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

SearchBox จะให้รายการการคาดการณ์เพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) และข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าใน ใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อร้านพิซซ่าหลายๆ สาขา เมื่อผู้ใช้เลือกสถานที่จากรายการ ข้อมูลเกี่ยวกับสถานที่นั้นจะถูกส่งกลับไปยังออบเจ็กต์ SearchBox ซึ่งแอปพลิเคชันของคุณจะดึงข้อมูลได้

ตัวสร้าง SearchBox รับอาร์กิวเมนต์ 2 รายการ ดังนี้

  • องค์ประกอบ HTML input ของประเภท text นี่คือช่องป้อนข้อมูลที่บริการ SearchBox จะตรวจสอบและแนบผลลัพธ์
  • อาร์กิวเมนต์ options ซึ่งมีพร็อพเพอร์ตี้ bounds: bounds เป็นออบเจ็กต์ google.maps.LatLngBounds ที่ระบุพื้นที่ที่จะค้นหาสถานที่ ผลลัพธ์จะเอนเอียงไปทางสถานที่ที่อยู่ภายในขอบเขตเหล่านี้ (แต่ไม่จำกัดเพียง)

โค้ดต่อไปนี้ใช้พารามิเตอร์ bounds ในการให้น้ำหนักผลลัพธ์กับสถานที่ต่างๆ ภายในพื้นที่ทางภูมิศาสตร์ที่เจาะจง ซึ่งระบุผ่านพิกัดละติจูด/ลองจิจูด

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

การเปลี่ยนพื้นที่ค้นหาสำหรับช่องค้นหา

หากต้องการเปลี่ยนพื้นที่ค้นหาสำหรับ SearchBox ที่มีอยู่ ให้เรียกใช้ setBounds() ในออบเจ็กต์ SearchBox แล้วส่งออบเจ็กต์ LatLngBounds ที่เกี่ยวข้อง

ดูตัวอย่าง

กำลังรับข้อมูลสถานที่

เมื่อผู้ใช้เลือกรายการจากการคาดการณ์ที่แนบมากับช่องค้นหา บริการจะเริ่มการทำงานของเหตุการณ์ places_changed คุณเรียกใช้ getPlaces() ในออบเจ็กต์ SearchBox เพื่อเรียกข้อมูลอาร์เรย์ที่มีการคาดการณ์หลายรายการได้ ซึ่งแต่ละรายการเป็นออบเจ็กต์ PlaceResult

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

TypeScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon as string,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      })
    );

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

JavaScript

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener("places_changed", () => {
  const places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach((marker) => {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  const bounds = new google.maps.LatLngBounds();

  places.forEach((place) => {
    if (!place.geometry || !place.geometry.location) {
      console.log("Returned place contains no geometry");
      return;
    }

    const icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25),
    };

    // Create a marker for each place.
    markers.push(
      new google.maps.Marker({
        map,
        icon,
        title: place.name,
        position: place.geometry.location,
      }),
    );
    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

ดูตัวอย่าง

ดูการจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox เพื่อปรับแต่งลักษณะของวิดเจ็ต

การดึงข้อมูลการคาดคะเนบริการเติมข้อความสถานที่อัตโนมัติด้วยการเขียนโปรแกรม

หากต้องการเรียกข้อมูลการคาดการณ์แบบเป็นโปรแกรม ให้ใช้คลาส AutocompleteService AutocompleteService ไม่เพิ่มตัวควบคุม UI ใดๆ แต่จะแสดงผลอาร์เรย์ของออบเจ็กต์การคาดการณ์ โดยแต่ละรายการจะมีข้อความของการคาดการณ์ ข้อมูลอ้างอิง และรายละเอียดเกี่ยวกับผลที่ตรงกับข้อมูลที่ผู้ใช้ป้อน วิธีนี้มีประโยชน์หากคุณต้องการควบคุมอินเทอร์เฟซผู้ใช้ได้มากกว่าที่ Autocomplete และ SearchBox มีให้ที่อธิบายไว้ข้างต้น

AutocompleteService จะแสดงเมธอดต่อไปนี้

  • getPlacePredictions() จะแสดงผลการคาดคะเนสถานที่ หมายเหตุ: "สถานที่" อาจเป็นสถานประกอบการ สถานที่ตั้งทางภูมิศาสตร์ หรือจุดสนใจหลักๆ ตามที่ Places API กำหนดไว้
  • getQueryPredictions() จะแสดงรายการการคาดการณ์เพิ่มเติม ซึ่งอาจรวมถึงสถานที่ (ตามที่กำหนดโดย Places API) รวมถึงข้อความค้นหาที่แนะนำ เช่น หากผู้ใช้ป้อน "พิซซ่าใน ใหม่" รายการตัวเลือกอาจมีวลี "พิซซ่าในนิวยอร์ก นิวยอร์ก" รวมถึงชื่อร้านพิซซ่าหลายๆ สาขา

ทั้ง 2 วิธีข้างต้นจะแสดงผลอาร์เรย์ของออบเจ็กต์การคาดการณ์ในรูปแบบต่อไปนี้

  • description คือการคาดการณ์ที่ตรงกัน
  • distance_meters คือระยะทางเป็นเมตรของสถานที่จาก AutocompletionRequest.origin ที่ระบุ
  • matched_substrings มีชุดสตริงย่อยในคำอธิบายที่ตรงกับองค์ประกอบในอินพุตของผู้ใช้ ซึ่งมีประโยชน์สำหรับการไฮไลต์สตริงย่อยเหล่านั้นในแอปพลิเคชัน ในหลายๆ กรณี การค้นหาจะปรากฏเป็นสตริงย่อยของช่องคำอธิบาย
    • length คือความยาวของสตริงย่อย
    • offset คือออฟเซ็ตอักขระซึ่งวัดจากจุดเริ่มต้นของสตริงคำอธิบาย ซึ่งเป็นที่ที่สตริงย่อยที่ตรงกันปรากฏขึ้น
  • place_id คือตัวระบุแบบข้อความที่ระบุสถานที่โดยไม่ซ้ำกัน หากต้องการดึงข้อมูลเกี่ยวกับสถานที่ ให้ส่งตัวระบุนี้ในช่อง placeId ของคำขอรายละเอียดสถานที่ ดูข้อมูลเพิ่มเติมเกี่ยวกับวิธีอ้างอิงสถานที่ด้วยรหัสสถานที่
  • terms คืออาร์เรย์ที่มีองค์ประกอบของข้อความค้นหา สำหรับสถานที่ โดยทั่วไปองค์ประกอบแต่ละรายการจะประกอบกันเป็นส่วนของที่อยู่
    • offset คือออฟเซ็ตอักขระซึ่งวัดจากจุดเริ่มต้นของสตริงคำอธิบาย ซึ่งเป็นที่ที่สตริงย่อยที่ตรงกันปรากฏขึ้น
    • value คือคำที่ตรงกัน

ตัวอย่างด้านล่างจะดำเนินคำขอการคาดการณ์คำค้นหาสำหรับวลี "พิซซ่าใกล้" และแสดงผลลัพธ์ในรายการ

TypeScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService(): void {
  const displaySuggestions = function (
    predictions: google.maps.places.QueryAutocompletePrediction[] | null,
    status: google.maps.places.PlacesServiceStatus
  ) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      (document.getElementById("results") as HTMLUListElement).appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

declare global {
  interface Window {
    initService: () => void;
  }
}
window.initService = initService;

JavaScript

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.
// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">
function initService() {
  const displaySuggestions = function (predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK || !predictions) {
      alert(status);
      return;
    }

    predictions.forEach((prediction) => {
      const li = document.createElement("li");

      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById("results").appendChild(li);
    });
  };

  const service = new google.maps.places.AutocompleteService();

  service.getQueryPredictions({ input: "pizza near Syd" }, displaySuggestions);
}

window.initService = initService;

CSS

HTML

<html>
  <head>
    <title>Retrieving Autocomplete Predictions</title>
    <script src="https://polyfill.io/v3/polyfill.min.js?features=default"></script>

    <link rel="stylesheet" type="text/css" href="./style.css" />
    <script type="module" src="./index.js"></script>
  </head>
  <body>
    <p>Query suggestions for 'pizza near Syd':</p>
    <ul id="results"></ul>
    <!-- Replace Powered By Google image src with self hosted image. https://developers.google.com/maps/documentation/places/web-service/policies#other_attribution_requirements -->
    <img
      class="powered-by-google"
      src="https://storage.googleapis.com/geo-devrel-public-buckets/powered_by_google_on_white.png"
      alt="Powered by Google"
    />

    <!-- 
      The `defer` attribute causes the callback to execute after the full HTML
      document has been parsed. For non-blocking uses, avoiding race conditions,
      and consistent behavior across browsers, consider loading using Promises.
      See https://developers.google.com/maps/documentation/javascript/load-maps-js-api
      for more information.
      -->
    <script
      src="https://maps.googleapis.com/maps/api/js?key=AIzaSyB41DRUbKWJHPxaFjMAwdrzWzbVKartNGg&callback=initService&libraries=places&v=weekly"
      defer
    ></script>
  </body>
</html>

ลองใช้ตัวอย่าง

ดูตัวอย่าง

โทเค็นของเซสชัน

AutocompleteService.getPlacePredictions() ใช้โทเค็นเซสชันเพื่อจัดกลุ่มคำขอการเติมข้อความอัตโนมัติเข้าด้วยกันเพื่อใช้ในการเรียกเก็บเงิน โทเค็นเซสชันจะจัดกลุ่มเฟสการค้นหาและการเลือกของการค้นหาแบบเติมข้อความอัตโนมัติของผู้ใช้เป็นเซสชันที่แยกออกจากกันเพื่อจุดประสงค์ในการเรียกเก็บเงิน เซสชันจะเริ่มต้นเมื่อผู้ใช้เริ่มพิมพ์ข้อความค้นหา และสรุปเมื่อผู้ใช้เลือกสถานที่ แต่ละเซสชันสามารถมีข้อความค้นหาได้หลายรายการ ตามด้วยการเลือกสถานที่เพียง 1 แห่ง เมื่อเซสชันสิ้นสุดลง โทเค็นจะใช้ไม่ได้อีกต่อไป แอปต้องสร้างโทเค็นใหม่สำหรับแต่ละเซสชัน เราขอแนะนำให้ใช้โทเค็นเซสชันสำหรับ ทุกเซสชันการเติมข้อความอัตโนมัติ หากละเว้นพารามิเตอร์ sessionToken หรือใช้โทเค็นเซสชันซ้ำ ระบบจะเรียกเก็บเงินเซสชันเสมือนว่าไม่ได้ระบุโทเค็นเซสชันไว้ (เรียกเก็บเงินคำขอแต่ละรายการแยกกัน)

คุณสามารถใช้โทเค็นเซสชันเดียวกันเพื่อส่งคำขอรายละเอียดสถานที่รายการเดียวในที่ที่เกิดจากการโทรหา AutocompleteService.getPlacePredictions() ในกรณีนี้ คำขอเติมข้อความอัตโนมัติจะรวมกับคำขอรายละเอียดสถานที่ และการโทรจะเรียกเก็บเป็นคำขอรายละเอียดสถานที่ตามปกติ ไม่มีค่าใช้จ่ายสำหรับ คำขอเติมข้อความอัตโนมัติ

คุณต้องส่งโทเค็นเซสชันที่ไม่ซ้ำกันสำหรับเซสชันใหม่แต่ละเซสชัน การใช้โทเค็นเดียวกันสำหรับเซสชันการเติมข้อความอัตโนมัติมากกว่า 1 เซสชันจะทำให้เซสชันการเติมข้อความอัตโนมัติเหล่านั้นไม่ถูกต้อง และระบบจะเรียกเก็บเงินจากคำขอการเติมข้อความอัตโนมัติทั้งหมดในเซสชันที่ไม่ถูกต้องโดยใช้การเติมข้อความอัตโนมัติต่อ SKU คำขอ อ่านเพิ่มเติมเกี่ยวกับโทเค็นของเซสชัน

ตัวอย่างต่อไปนี้แสดงการสร้างโทเค็นเซสชัน แล้วส่งต่อใน AutocompleteService (ละเว้นฟังก์ชัน displaySuggestions() เพื่อความสั้นกระชับ)

// Create a new session token.
var sessionToken = new google.maps.places.AutocompleteSessionToken();

// Pass the token to the autocomplete service.
var autocompleteService = new google.maps.places.AutocompleteService();
autocompleteService.getPlacePredictions({
  input: 'pizza near Syd',
  sessionToken: sessionToken
},
displaySuggestions);

คุณต้องส่งโทเค็นเซสชันที่ไม่ซ้ำกันสำหรับเซสชันใหม่แต่ละเซสชัน การใช้โทเค็นเดียวกันสำหรับเซสชันมากกว่า 1 เซสชันจะส่งผลให้มีการเรียกเก็บเงินกับแต่ละคำขอแยกกัน

อ่านเพิ่มเติมเกี่ยวกับโทเค็นของเซสชัน

การจัดรูปแบบวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox

โดยค่าเริ่มต้น องค์ประกอบ UI ที่ได้จาก Autocomplete และ SearchBox จะมีการจัดรูปแบบให้รวมอยู่ใน Google Maps คุณอาจต้องปรับการจัดรูปแบบให้เหมาะกับเว็บไซต์ของคุณเอง คลาส CSS ต่อไปนี้พร้อมใช้งาน ชั้นเรียนทั้งหมดที่แสดงด้านล่างใช้กับทั้งวิดเจ็ต Autocomplete และ SearchBox

ภาพกราฟิกของคลาส CSS สำหรับวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox
คลาส CSS สำหรับวิดเจ็ตการเติมข้อความอัตโนมัติและ SearchBox
คลาส CSS คำอธิบาย
pac-container องค์ประกอบภาพที่มีรายการการคาดคะเนที่แสดงผลโดยบริการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่ รายการนี้จะปรากฏเป็นรายการแบบเลื่อนลงใต้วิดเจ็ต Autocomplete หรือ SearchBox
pac-icon ไอคอนที่แสดงทางด้านซ้ายของแต่ละรายการในการคาดการณ์
pac-item รายการในรายการการคาดการณ์ที่ระบุโดยวิดเจ็ต Autocomplete หรือ SearchBox
pac-item:hover รายการเมื่อผู้ใช้วางเคอร์เซอร์เหนือรายการ
pac-item-selected รายการเมื่อผู้ใช้เลือกผ่านแป้นพิมพ์ หมายเหตุ: รายการที่เลือกจะเป็นสมาชิกของชั้นเรียนนี้และชั้นเรียน pac-item
pac-item-query ระยะเวลาภายใน pac-item ที่เป็นส่วนหลักของการคาดการณ์ สำหรับสถานที่ตั้งทางภูมิศาสตร์ ตำแหน่งนี้จะมีชื่อสถานที่ เช่น "ซิดนีย์" หรือชื่อถนนและหมายเลข เช่น "10 ถนนคิง เวิลด์" สําหรับการค้นหาแบบข้อความ เช่น "พิซซ่าในนิวยอร์ก" จะมีข้อความแบบเต็มของคําค้นหา โดยค่าเริ่มต้น pac-item-query จะเป็นสีดำ หากมีข้อความเพิ่มเติมใน pac-item แสดงว่าข้อความอยู่นอก pac-item-query และรับค่าสไตล์มาจาก pac-item ซึ่งจะมีสีเทาโดยค่าเริ่มต้น ซึ่งข้อความเพิ่มเติมมักจะเป็นที่อยู่
pac-matched ส่วนของการคาดการณ์ที่ส่งกลับที่ตรงกับข้อมูลที่ผู้ใช้ป้อน โดยค่าเริ่มต้น ระบบจะไฮไลต์ข้อความที่ตรงกันเป็นตัวหนา โปรดทราบว่าข้อความที่ตรงกันอาจอยู่ที่ใดก็ได้ภายใน pac-item ข้อความดังกล่าวไม่จำเป็นต้องเป็นส่วนหนึ่งของ pac-item-query และอาจเป็นส่วนหนึ่งของ pac-item-query รวมถึงข้อความที่เหลือใน pac-item ด้วย

เพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติ

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

หลักเกณฑ์ทั่วไปมีดังนี้

  • วิธีที่รวดเร็วที่สุดในการพัฒนาอินเทอร์เฟซผู้ใช้ที่ใช้งานได้คือการใช้วิดเจ็ตการเติมข้อความอัตโนมัติ Maps JavaScript API, Places SDK สำหรับวิดเจ็ตเติมข้อความอัตโนมัติของ Android หรือ Places SDK สำหรับการควบคุม UI อัตโนมัติของ iOS
  • พัฒนาความเข้าใจเกี่ยวกับช่องข้อมูลในการเติมข้อความอัตโนมัติที่จำเป็นตั้งแต่เริ่มต้น
  • ฟิลด์การให้น้ำหนักตำแหน่งและการจำกัดตำแหน่งเป็นตัวเลือกที่ไม่บังคับ แต่อาจมีผลกระทบที่สำคัญต่อประสิทธิภาพของการเติมข้อความอัตโนมัติ
  • ใช้การจัดการข้อผิดพลาดเพื่อให้แน่ใจว่าแอปมีประสิทธิภาพลดลงอย่างมีชั้นเชิง หาก API แสดงผลข้อผิดพลาด
  • ตรวจสอบว่าแอปตอบสนองเมื่อไม่ได้เลือกและเสนอวิธีให้ผู้ใช้ดำเนินการต่อ

แนวทางปฏิบัติแนะนำในการเพิ่มประสิทธิภาพต้นทุน

การเพิ่มประสิทธิภาพต้นทุนพื้นฐาน

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

การเพิ่มประสิทธิภาพต้นทุนขั้นสูง

ลองใช้ฟีเจอร์การเติมข้อความอัตโนมัติใน Place แบบเป็นโปรแกรมเพื่อเข้าถึงการกำหนดราคาต่อคำขอและขอผลลัพธ์ Geocoding API เกี่ยวกับสถานที่ที่เลือกแทนรายละเอียดสถานที่ การตั้งราคาต่อคำขอที่จับคู่กับ Geocoding API จะคุ้มค่ามากกว่าราคาต่อเซสชัน (ตามเซสชัน) หากตรงกับเงื่อนไขทั้งสองต่อไปนี้:

  • หากคุณต้องการเพียงละติจูด/ลองจิจูดหรือที่อยู่ของสถานที่ที่ผู้ใช้เลือกเท่านั้น Geocoding API จะส่งข้อมูลนี้น้อยกว่าการเรียกรายละเอียดสถานที่
  • หากผู้ใช้เลือกการคาดการณ์การเติมข้อความอัตโนมัติภายในคำขอการคาดการณ์การเติมข้อความอัตโนมัติโดยเฉลี่ยไม่เกิน 4 คำขอ การกำหนดราคาต่อคำขออาจคุ้มค่ากว่าการกำหนดราคาต่อเซสชัน
หากต้องการความช่วยเหลือในการเลือกการใช้งานฟีเจอร์ "สถานที่อัตโนมัติ" ที่ตรงกับความต้องการของคุณ ให้เลือกแท็บที่ตรงกับคําตอบสําหรับคําถามต่อไปนี้

แอปพลิเคชันของคุณต้องใช้ข้อมูลใดๆ นอกเหนือจากที่อยู่และละติจูด/ลองจิจูดของการคาดคะเนที่เลือกไหม

ใช่ ต้องการรายละเอียดเพิ่มเติม

ใช้การเติมข้อความอัตโนมัติตามสถานที่ตามเซสชันพร้อมด้วยรายละเอียดสถานที่
เนื่องจากแอปพลิเคชันของคุณต้องการรายละเอียดสถานที่ เช่น ชื่อสถานที่ สถานะธุรกิจ หรือเวลาทำการ การใช้งานการเติมข้อความอัตโนมัติใน Place ของคุณจึงควรใช้โทเค็นเซสชัน (แบบเป็นโปรแกรม หรือมีอยู่ในวิดเจ็ต JavaScript, Android หรือ iOS) โดยมีค่าใช้จ่ายรวม $0.017 ต่อเซสชันบวกกับSKU ข้อมูล Places ที่เกี่ยวข้อง โดยขึ้นอยู่กับฟิลด์ข้อมูลสถานที่ที่คุณร้องขอ

การใช้งานวิดเจ็ต
การจัดการเซสชันจะสร้างขึ้นในวิดเจ็ต
JavaScript, Android หรือ iOS โดยอัตโนมัติ ซึ่งรวมทั้งคำขอเติมสถานที่อัตโนมัติและคำขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก อย่าลืมระบุพารามิเตอร์ fields เพื่อให้แน่ใจว่าคุณขอเฉพาะช่องข้อมูลสถานที่ที่คุณต้องการเท่านั้น

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

  1. รหัสสถานที่จากคำตอบที่เติมข้อมูลสถานที่อัตโนมัติ
  2. โทเค็นเซสชันที่ใช้ในคำขอการเติมข้อความอัตโนมัติ
  3. พารามิเตอร์ fields ที่ระบุช่องข้อมูลสถานที่ที่ต้องการ

ไม่ ต้องการเฉพาะที่อยู่และตำแหน่ง

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

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

ผู้ใช้ของคุณเลือกการคาดคะเนการเติมข้อความอัตโนมัติจากสถานที่ในคำขอไม่เกิน 4 รายการโดยเฉลี่ยหรือไม่

มี

ใช้ Place Autocomplete แบบเป็นโปรแกรมโดยไม่มีโทเค็นเซสชัน และเรียกใช้ Geocoding API ในการคาดการณ์สถานที่ที่เลือก
Geocoding API จะส่งที่อยู่และพิกัดละติจูด/ลองจิจูดในราคา $0.005 ต่อคำขอ การทำคำขอการเติมข้อมูลสถานที่อัตโนมัติ - ต่อคำขอ 4 รายการมีค่าใช้จ่าย $0.01132 ดังนั้นค่าใช้จ่ายทั้งหมดของคำขอ 4 รายการบวกการเรียก Geocoding API เกี่ยวกับการคาดการณ์สถานที่ที่เลือกจะเป็น $0.01632 ซึ่งน้อยกว่าราคาสำหรับการเติมข้อความอัตโนมัติต่อเซสชันที่ $0.017 ต่อเซสชัน1

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

ไม่ได้

ใช้การเติมข้อความอัตโนมัติตามสถานที่ตามเซสชันพร้อมด้วยรายละเอียดสถานที่
เนื่องจากจำนวนคำขอเฉลี่ยที่คุณคาดว่าจะสร้างก่อนที่ผู้ใช้จะเลือกการคาดการณ์การเติมข้อความอัตโนมัติในสถานที่สูงกว่าราคาต่อเซสชัน การใช้การเติมข้อความอัตโนมัติในสถานที่ควรใช้โทเค็นเซสชันสำหรับทั้งคำขอการเติมข้อความอัตโนมัติในเกี่ยวกับสถานที่และคำขอรายละเอียดสถานที่ที่เกี่ยวข้อง โดยมีค่าใช้จ่ายรวม $0.017 ต่อเซสชัน1

การใช้งานวิดเจ็ต
การจัดการเซสชันจะสร้างขึ้นในวิดเจ็ต JavaScript, Android หรือ iOS โดยอัตโนมัติ ซึ่งรวมทั้งคำขอเติมสถานที่อัตโนมัติและคำขอรายละเอียดสถานที่ในการคาดคะเนที่เลือก โปรดระบุพารามิเตอร์ fields เพื่อให้แน่ใจว่าคุณขอเฉพาะช่องข้อมูลพื้นฐาน

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

  1. รหัสสถานที่จากคำตอบที่เติมข้อมูลสถานที่อัตโนมัติ
  2. โทเค็นเซสชันที่ใช้ในคำขอการเติมข้อความอัตโนมัติ
  3. พารามิเตอร์ fields ที่ระบุช่องข้อมูลพื้นฐาน เช่น ที่อยู่และเรขาคณิต

พิจารณาเลื่อนคำขอการเติมข้อความอัตโนมัติในสถานที่
คุณสามารถใช้กลยุทธ์ต่างๆ เช่น ถ่วงเวลาคำขอเติมข้อความสถานที่อัตโนมัติจนกว่าผู้ใช้จะพิมพ์ด้วยอักขระ 3 หรือ 4 ตัวแรก เพื่อให้แอปพลิเคชันของคุณส่งคำขอน้อยลง ตัวอย่างเช่น การสร้างคำขอการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่สำหรับแต่ละอักขระหลังผู้ใช้พิมพ์อักขระตัวที่ 3 หมายความว่าหากผู้ใช้พิมพ์อักขระ 7 ตัว แล้วเลือกการคาดคะเนที่คุณจะส่งคำขอ API การระบุพิกัดทางภูมิศาสตร์ 1 รายการ ค่าใช้จ่ายรวมจะเป็น $0.01632 (4 * $0.00283 ต่อคำขอ + $0.005 การระบุพิกัดทางภูมิศาสตร์)1

หากคำขอล่าช้าทำให้ได้รับคำขอแบบเป็นโปรแกรมที่มีค่าเฉลี่ยต่ำกว่า 4 รายการ คุณสามารถปฏิบัติตามคำแนะนำในการติดตั้งใช้งานฟีเจอร์เติมข้อความอัตโนมัติในสถานที่จริงด้วย Geocoding API โปรดทราบว่าผู้ใช้ที่ล่าช้าจะรับรู้ได้ว่าคำขอล่าช้าเป็นเวลาในการตอบสนองที่ผู้ใช้อาจคาดหวังว่าจะเห็นการคาดคะเนทุกครั้งที่กดแป้นพิมพ์

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


  1. ค่าใช้จ่ายที่แสดงที่นี่คือ USD โปรดดูข้อมูลราคาทั้งหมดในหน้าการเรียกเก็บเงินของ Google Maps Platform

แนวทางปฏิบัติแนะนำด้านประสิทธิภาพ

หลักเกณฑ์ต่อไปนี้อธิบายวิธีเพิ่มประสิทธิภาพการเติมข้อความอัตโนมัติในสถานที่

  • เพิ่มข้อจำกัดประเทศ การให้น้ำหนักตำแหน่ง และค่ากำหนดภาษา (สำหรับการติดตั้งใช้งานแบบเป็นโปรแกรม) ลงในการใช้งาน การเติมข้อความอัตโนมัติใน Place ของคุณ คุณไม่จำเป็นต้องตั้งค่าภาษาเมื่อใช้วิดเจ็ต เนื่องจากวิดเจ็ตจะเลือกค่ากำหนดภาษาจากเบราว์เซอร์หรืออุปกรณ์เคลื่อนที่ของผู้ใช้
  • หากการเติมข้อความอัตโนมัติมาพร้อมกับแผนที่ คุณอาจให้น้ำหนักพิเศษกับตำแหน่งตามวิวพอร์ตแผนที่ได้
  • ในสถานการณ์ที่ผู้ใช้ไม่ได้เลือกการคาดการณ์จากการเติมข้อความอัตโนมัติโดยทั่วไปเนื่องจากไม่มีการคาดคะเนใดที่เป็นที่อยู่สำหรับผลลัพธ์ที่ต้องการ คุณอาจนำข้อมูลเดิมของผู้ใช้มาใช้งานเพื่อให้ได้รับผลการค้นหาที่เกี่ยวข้องมากขึ้นได้ ดังนี้
    • หากคุณคาดหวังให้ผู้ใช้ป้อนเฉพาะข้อมูลที่อยู่ ให้ใช้ข้อมูลเดิมของผู้ใช้ในการเรียก Geocoding API
    • หากคุณคาดหวังให้ผู้ใช้ป้อนคำค้นหาสำหรับสถานที่เฉพาะตามชื่อหรือที่อยู่ ให้ใช้คำขอค้นหาสถานที่ หากต้องการผลลัพธ์เฉพาะในบางภูมิภาค ให้ใช้การให้น้ำหนักตำแหน่ง
    สถานการณ์อื่นๆ ที่ควรกลับไปใช้ Geocoding API ได้แก่
    • ผู้ใช้ที่ป้อนที่อยู่ของสถานที่ย่อยในประเทศที่การรองรับการเติมข้อความอัตโนมัติของสถานที่ที่อยู่ย่อยไม่สมบูรณ์ เช่น เช็กเกีย เอสโตเนีย และลิทัวเนีย เช่น ที่อยู่ในเช็ก "Stroupežnického 3191/17, Praha" ให้การคาดคะเนบางส่วนในการเติมข้อความอัตโนมัติใน Place
    • ผู้ใช้ป้อนที่อยู่โดยมีส่วนหน้าของถนน เช่น "23-30 ถนน 29th, Queens" ในนิวยอร์กซิตี้ หรือ "47-380 Kamehameha Hwy, Kaneohe" บนเกาะ Kauai ในฮาวาย

ขีดจำกัดและนโยบายการใช้งาน

โควต้า

หากต้องการทราบข้อมูลโควต้าและราคา โปรดดู เอกสารการใช้งานและการเรียกเก็บเงินสำหรับ Places API

นโยบาย

การใช้ Maps JavaScript API ของ Places Library ต้องเป็นไปตามนโยบายที่อธิบายสำหรับ Places API