ภาพรวม
Google Maps Platform มีให้ใช้งานสำหรับเว็บ (JS, TS), Android และ iOS และยังมี API ของบริการบนเว็บสำหรับรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสําหรับแพลตฟอร์มหนึ่ง แต่จะมีลิงก์เอกสารประกอบสําหรับการนำไปใช้ในแพลตฟอร์มอื่นๆ
เครื่องมือสร้างด่วนใน Google Cloud Console ช่วยให้คุณสร้างการเติมข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติโดยใช้ UI แบบอินเทอร์แอกทีฟที่สร้างโค้ด JavaScript ให้คุณ
การช็อปปิ้งและการสั่งซื้อออนไลน์กลายเป็นส่วนสำคัญในชีวิตของเรา ลูกค้าต่างคาดหวังว่าขั้นตอนการชำระเงินเป็นไปอย่างราบรื่น ตั้งแต่บริการนำส่งวันเดียวกัน ไปจนถึงการจองแท็กซี่หรือสั่งอาหารเย็น
อย่างไรก็ตาม ในแอปพลิเคชันเหล่านี้ทั้งหมด การป้อนที่อยู่สำหรับการเรียกเก็บเงินหรือการจัดส่งจะยังคงเป็นอุปสรรคอย่างหนึ่งในขั้นตอนการชำระเงินซึ่งอาจใช้เวลานานและยุ่งยาก ประสบการณ์การชำระเงินที่ราบรื่นจะยิ่งทวีความสำคัญมากขึ้นสำหรับโลกแห่งอุปกรณ์เคลื่อนที่ เนื่องจากการเขียนข้อความที่ซับซ้อนบนหน้าจอขนาดเล็กอาจชวนให้หงุดหงิดและเป็นอุปสรรคเพิ่มสำหรับ Conversion ของลูกค้า
หัวข้อนี้จะให้คำแนะนำในการใช้งานที่จะช่วยให้ลูกค้าดำเนินการชำระเงินได้รวดเร็วขึ้นด้วยการป้อนที่อยู่ที่คาดการณ์
แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องกับการใช้งาน Checkout (คลิกเพื่อขยาย)
![](https://developers.google.cn/static/maps/solutions/images/checkout/checkout_arch_diagram.png?authuser=6&hl=th)
กำลังเปิดใช้ API
หากต้องการใช้ Checkout คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console:
ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่การเริ่มต้นใช้งาน Google Maps Platform
ส่วนเวชปฏิบัติ
ต่อไปนี้เป็นเคล็ดลับและการปรับแต่งที่เราจะกล่าวถึงในหัวข้อนี้
- ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติหลัก
- ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับแต่แนะนำให้ทำเพื่อเพิ่มประสิทธิภาพโซลูชัน
การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล | ป้อนข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติ เพิ่มฟังก์ชันประเภทที่ใช้เมื่อเดินทาง เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและปรับปรุงความถูกต้องของที่อยู่ด้วยการกดแป้นพิมพ์ขั้นต่ำ | |
แสดงการยืนยันด้วยภาพด้วย Maps Static API | ค้นหาพิกัดละติจูด/ลองจิจูดของที่อยู่หนึ่งๆ (การระบุพิกัดทางภูมิศาสตร์) หรือแปลงพิกัดละติจูด/ลองจิจูดของสถานที่ตั้งทางภูมิศาสตร์เป็นที่อยู่ (การระบุพิกัดทางภูมิศาสตร์แบบย้อนกลับ) | |
เคล็ดลับเพื่อเพิ่มประสิทธิภาพให้กับ Checkout | ใช้ฟีเจอร์ขั้นสูงของ Place Autocomplete เพื่อทำให้การชำระเงินง่ายขึ้นไปอีก |
การเพิ่มการเติมข้อความอัตโนมัติในช่องป้อนข้อมูล
ตัวอย่างนี้ใช้ ไลบรารี Places, Maps JavaScript API | นอกจากนี้ยังมีบริการ: Android | iOS |
Place Autocomplete ช่วยลดความซับซ้อนในการป้อนที่อยู่ในแอปพลิเคชัน จึงเพิ่มอัตรา Conversion ที่สูงขึ้นและ มอบประสบการณ์ที่ราบรื่นให้กับลูกค้า การเติมข้อความอัตโนมัติมีช่องป้อนข้อมูลด่วนเพียงช่องเดียวที่มีการคาดคะเนที่อยู่แบบ "พิมพ์ล่วงหน้า" ซึ่งใช้เพื่อเติมข้อมูลในแบบฟอร์มที่อยู่สำหรับจัดส่งหรือการเรียกเก็บเงินโดยอัตโนมัติได้
การรวมการเติมข้อความอัตโนมัติในรถเข็นช็อปปิ้งออนไลน์ช่วยให้คุณทำสิ่งต่อไปนี้ได้:
- ลดข้อผิดพลาดในการป้อนที่อยู่
- ลดจำนวนขั้นตอนในกระบวนการชำระเงิน
- ลดความซับซ้อนของประสบการณ์การป้อนที่อยู่ในอุปกรณ์เคลื่อนที่หรืออุปกรณ์ที่สวมใส่ได้
- ลดการกดแป้นพิมพ์และเวลาทั้งหมดที่ลูกค้าต้องใช้ในการสั่งซื้อได้เป็นอย่างมาก
เมื่อผู้ใช้เลือกช่องรายการเติมข้อความอัตโนมัติและเริ่มพิมพ์ รายการของการคาดคะเนที่อยู่จะปรากฏขึ้น
![](https://developers.google.cn/static/maps/solutions/images/checkout/places_autocomplete_suggest.png?authuser=6&hl=th)
เมื่อผู้ใช้เลือกที่อยู่จากรายการการคาดการณ์ คุณจะใช้คำตอบเพื่อยืนยันที่อยู่และรับสถานที่ตั้งได้ จากนั้นแอปพลิเคชันจะกรอกข้อมูลในช่องที่ถูกต้องของแบบฟอร์มการป้อนที่อยู่ได้ ดังนี้
![](https://developers.google.cn/static/maps/solutions/images/checkout/autocomplete_form.png?authuser=6&hl=th)
วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วยการเติมข้อมูลสถานที่อัตโนมัติ:
แบบฟอร์มที่อยู่
เว็บ
Android
iOS
เริ่มต้นใช้งานการเติมข้อความอัตโนมัติในสถานที่
เพียงใช้โค้ด JavaScript เพียง 2 บรรทัดเท่านั้นในการรวม Place Autcomplete ไว้ในเว็บไซต์
วิธีที่ง่ายที่สุดคือการรวม Maps JavaScript API (แม้ว่าคุณจะไม่ได้แสดงแผนที่ก็ตาม) ในเว็บไซต์ และระบุไลบรารี Places ตามที่แสดงในตัวอย่างต่อไปนี้ ซึ่งจะเรียกใช้ฟังก์ชันการเริ่มต้นด้วย
<script async
src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&loading=async&libraries=places&callback=initAutocomplete&solution_channel=GMP_guides_checkout_v1_a">
</script>
ต่อไป ให้เพิ่มกล่องข้อความลงในหน้าเว็บของคุณเพื่อให้ผู้ใช้ป้อนข้อมูล:
<input id="autocomplete" placeholder="Enter your address"></input>
สุดท้าย เริ่มต้นบริการเติมข้อความอัตโนมัติ และเชื่อมโยงกับกล่องข้อความที่มีชื่อ:
function initAutocomplete() {
// Create the autocomplete object, restricting the search predictions to
// addresses in the US and Canada.
autocomplete = new google.maps.places.Autocomplete(address1Field, {
componentRestrictions: { country: ["us", "ca"] },
fields: ["address_components", "geometry"],
types: ["address"],
});
address1Field.focus();
// When the user selects an address from the drop-down, populate the
// address fields in the form.
autocomplete.addListener("place_changed", fillInAddress);
}
ในตัวอย่างก่อนหน้านี้ Listener เหตุการณ์ place_changed
จะทริกเกอร์เมื่อผู้ใช้เลือกการคาดการณ์ที่อยู่ และเรียกใช้ฟังก์ชัน fillInAddress
ฟังก์ชันดังที่แสดงในตัวอย่างต่อไปนี้จะรับการตอบกลับที่เลือกและแยกคอมโพเนนต์ที่อยู่เพื่อแสดงภายในแบบฟอร์ม
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;
เมื่อมีข้อมูลนี้แล้ว คุณจะใช้ข้อมูลนั้นเป็นที่อยู่ที่ตรงกันสำหรับผู้ใช้ได้ คุณตรวจสอบว่าลูกค้าป้อนที่อยู่ที่ถูกต้องในระยะเวลาสั้นๆ โดยใช้โค้ดไม่กี่บรรทัด
ดูการสาธิตที่ใช้งานได้และซอร์สโค้ดแบบเต็มสำหรับการเติมข้อมูลในแบบฟอร์มการป้อนที่อยู่ในตัวอย่างโค้ดนี้
ข้อควรพิจารณาเมื่อใช้การเติมข้อความอัตโนมัติในสถานที่
Place Autocomplete มีตัวเลือกมากมายที่ช่วยให้มีความยืดหยุ่นในการใช้งาน หากคุณต้องการใช้มากกว่าแค่วิดเจ็ต คุณใช้บริการต่างๆ ผสมกันได้เพื่อรับสิ่งที่ต้องการให้ตรงกับการจับคู่ตำแหน่งด้วยวิธีที่ถูกต้อง
-
สำหรับแบบฟอร์มที่อยู่ ให้ตั้งค่าพารามิเตอร์
types
เป็นaddress
เพื่อจำกัดการจับคู่ให้ตรงกับที่อยู่แบบเต็ม ดูข้อมูลเพิ่มเติมเกี่ยวกับประเภทที่คำขอการเติมข้อความอัตโนมัติรองรับ -
กำหนดข้อจำกัดและความลำเอียงที่เหมาะสม หากไม่จำเป็นต้องค้นหาทั่วโลก มีพารามิเตอร์จำนวนหนึ่งที่สามารถใช้ให้น้ำหนักพิเศษหรือจำกัดการจับคู่ที่ตรงกันกับภูมิภาคที่เฉพาะเจาะจงเท่านั้น
-
ใช้
bounds
เพื่อกําหนดขอบเขตสี่เหลี่ยมผืนผ้าเพื่อจํากัดพื้นที่ และใช้strictBounds
เพื่อให้แน่ใจว่าระบบจะส่งคืนเฉพาะที่อยู่ในพื้นที่ดังกล่าวเท่านั้น -
ใช้
componentRestrictions
เพื่อจำกัดคำตอบให้เฉพาะบางประเทศ
-
ใช้
- ปล่อยให้ช่องแก้ไขได้ในกรณีที่มีบางช่องหายไปจากการจับคู่ และอนุญาตให้ลูกค้าอัปเดตที่อยู่ได้หากจำเป็น เนื่องจากที่อยู่ส่วนใหญ่ที่แสดงผลโดยการเติมข้อความอัตโนมัติไม่มีหมายเลขสถานที่ย่อย เช่น อพาร์ตเมนต์ ห้องชุด หรือหมายเลขห้อง ตัวอย่างนี้จึงย้ายโฟกัสไปยังที่อยู่บรรทัดที่ 2 เพื่อกระตุ้นให้ผู้ใช้กรอกข้อมูลดังกล่าวหากจำเป็น
ส่งภาพยืนยันด้วย Maps Static API
หลังจากป้อนที่อยู่แล้ว ให้ภาพยืนยันสถานที่นำส่งหรือรับพัสดุแก่ผู้ใช้ด้วยแผนที่แบบคงที่ง่ายๆ วิธีนี้จะช่วยให้ลูกค้ามั่นใจเพิ่มเติมว่าที่อยู่ถูกต้อง และจะช่วยลดความผิดพลาดในการจัดส่ง/รับสินค้า แผนที่แบบคงที่อาจแสดงในหน้าเว็บที่ผู้ใช้ป้อนที่อยู่ หรือส่งภายในอีเมลยืนยันเมื่อทำธุรกรรมเสร็จสมบูรณ์
กรณีการใช้งานทั้ง 2 รายการนี้ทำได้โดยใช้ Maps Static API ซึ่งจะเพิ่มแผนที่เวอร์ชันรูปภาพลงในแท็กรูปภาพภายในหน้าเว็บหรืออีเมล
![](https://developers.google.cn/static/maps/solutions/images/checkout/track_package.png?authuser=6&hl=th)
เริ่มต้นใช้งาน Maps Static API
คุณใช้ Maps Static API ได้โดยใช้การเรียกบริการบนเว็บ ซึ่งจะสร้างแผนที่เวอร์ชันรูปภาพตามพารามิเตอร์ที่คุณระบุ คุณระบุประเภทแผนที่ ใช้รูปแบบในระบบคลาวด์เดียวกัน และเพิ่มเครื่องหมายเพื่อแยกแยะสถานที่ได้ เช่นเดียวกับแผนที่แบบไดนามิก
การโทรต่อไปนี้จะแสดงแผนกลยุทธ์ขนาด 600x300 พิกเซล โดยมีศูนย์กลางอยู่ที่ Googleplex ใน Mountain View แคลิฟอร์เนีย ที่ระดับการซูม 13 นอกจากนี้ยังระบุเครื่องหมายตำแหน่งจัดส่งสีฟ้าและรูปแบบแผนที่ออนไลน์ด้วย
https://maps.googleapis.com/maps/api/staticmap?center=37.422177,-122.084082
&zoom=13
&size=600x300
&maptype=roadmap
&markers=color:blue%7Clabel:S%7C37.422177,-122.084082
&map_id=8f348d1b5a61d4bb
&key=YOUR_API_KEY
&solution_channel=GMP_guides_checkout_v1_a
ซึ่งจะแบ่งออกเป็นส่วนต่างๆ ต่อไปนี้
URL ของ API | https://maps.googleapis.com/maps/api/staticmap? |
ศูนย์กลางแผนที่ | center=37.422177,-122.084082 |
ระดับการซูม | ซูม=13 |
ขนาดรูปภาพ | ขนาด=600x300 |
ประเภทของแผนที่ | maptype=roadmap |
เครื่องหมายตำแหน่งร้านค้า | markers=color:blue%7Clabel:C%7C37.422177,-122.084082 |
รูปแบบแผนที่ระบบคลาวด์ | map_id=8f348d1b5a61d4bb |
คีย์ API | key=YOUR_API_KEY |
พารามิเตอร์ช่องทางของโซลูชัน (ดูเอกสารประกอบของพารามิเตอร์) | solution_channel=GMP_guides_checkout_v1_a |
ภาพนี้จะกลายเป็นภาพดังที่แสดงด้านล่าง
![](https://developers.google.cn/static/maps/solutions/images/checkout/static_map.png?authuser=6&hl=th)
ดูข้อมูลเพิ่มเติมเกี่ยวกับตัวเลือก API แบบคงที่ของ Maps ได้ในเอกสารประกอบ
เคล็ดลับเพื่อเพิ่มประสิทธิภาพให้กับ Checkout
คุณสามารถปรับปรุงประสบการณ์ของลูกค้าให้ดีขึ้นได้โดยใช้ประโยชน์จาก ฟีเจอร์ขั้นสูงบางอย่างของฟีเจอร์การเติมข้อความอัตโนมัติใน Place เคล็ดลับในการปรับปรุงช่องป้อนที่อยู่อัตโนมัติมีดังนี้
-
รายละเอียดสถานที่
หากต้องการอนุญาตให้ป้อนทั้งที่อยู่และชื่อสถานประกอบการ ให้นำพร็อพเพอร์ตี้
types
ออกจากคําจํากัดความของการเติมข้อความอัตโนมัติ
อนุญาตให้ผู้ใช้ป้อนที่อยู่ตามชื่อธุรกิจหรือจุดสนใจ
บริการการคาดคะเนแบบ "พิมพ์ล่วงหน้า" ไม่เพียงใช้ได้กับที่อยู่เท่านั้น แต่คุณยังเลือกอนุญาตให้ป้อนชื่อธุรกิจหรือจุดสังเกตได้ด้วย หลังจากที่ผู้ใช้ป้อนชื่อธุรกิจแล้ว คุณจะเรียกข้อมูลที่อยู่ได้อย่างง่ายดายด้วยการโทรไปที่ - อ่านเอกสารประกอบเพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการจัดรูปแบบช่องการเติมข้อความอัตโนมัติ ปรับแต่งรูปลักษณ์ของช่องการเติมข้อความอัตโนมัติเพื่อให้สอดคล้องกับสไตล์ของเว็บไซต์ คุณยังสามารถจัดรูปแบบวิดเจ็ตเติมข้อความอัตโนมัติให้เข้ากับรูปลักษณ์ของรถเข็นช็อปปิ้งได้ด้วย ชุดคลาส CSS พร้อมให้คุณปรับแต่งได้
- JavaScript, Android และ iOS รวมถึงการเรียกใช้ API บริการเว็บโดยตรงผ่าน Places API หากต้องการสร้าง UI ที่กำหนดเอง การสร้าง UI ที่กำหนดเองแทนการใช้ UI ที่ออกแบบโดย Google ให้เรียกใช้บริการเติมข้อความอัตโนมัติด้วยการเขียนโปรแกรมเพื่อเรียกการคาดคะเนสำหรับอินพุตที่ระบุ คุณสามารถดึงข้อมูลการคาดคะเนการเติมข้อความอัตโนมัติจากสถานที่แบบเป็นโปรแกรมได้ใน