คู่มือการใช้งานฉบับย่อสําหรับการสมัครที่ได้รับการยืนยัน

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

ภาพรวม

เว็บ iOS API

Google Maps Platform พร้อมให้บริการสําหรับเว็บ (JS, TS), Android และ iOS และให้บริการ API ของบริการเว็บเพื่อรับข้อมูลเกี่ยวกับสถานที่ เส้นทาง และระยะทาง ตัวอย่างในคู่มือนี้เขียนขึ้นสําหรับแพลตฟอร์มหนึ่ง แต่ลิงก์เอกสารมีไว้เพื่อใช้งานบนแพลตฟอร์มอื่นๆ

สร้างเลย

Quick Builder ใน Google Cloud Console ช่วยให้คุณสร้างการเติมข้อมูลแบบฟอร์มอัตโนมัติได้ด้วยการใช้ UI แบบอินเทอร์แอกทีฟที่สร้างโค้ด JavaScript ให้คุณ

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

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

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

หัวข้อนี้จะให้คําแนะนําเกี่ยวกับการสร้างประสบการณ์ในการสร้างใบสมัครแบบรวดเร็วและลงชื่อสมัครใช้ด้วย Google Maps Platform เนื่องจากผู้ใช้มักลงชื่อสมัครใช้บนอุปกรณ์เคลื่อนที่ ตัวอย่างการใช้งานส่วนใหญ่ในหัวข้อนี้มุ่งเน้นที่ Android (ดูแหล่งที่มาแบบเต็มได้ที่นี่) คุณสามารถใช้ iOS SDK เพื่อทํางานแบบเดียวกันนี้ได้เช่นกัน

แผนภาพต่อไปนี้แสดง API หลักที่เกี่ยวข้องกับการสร้างโซลูชัน (คลิกเพื่อขยาย)

กำลังเปิดใช้ API

หากต้องการเปิดใช้คําแนะนําเหล่านี้ คุณต้องเปิดใช้ API ต่อไปนี้ใน Google Cloud Console

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่การเริ่มต้นใช้งาน Google Maps Platform

ส่วนแนวทางปฏิบัติแนะนํา

ต่อไปนี้เป็นแนวทางปฏิบัติและการปรับแต่งที่เราจะพูดถึงในหัวข้อนี้

  • ไอคอนเครื่องหมายถูกเป็นแนวทางปฏิบัติแนะนําหลัก
  • ไอคอนดาวเป็นการปรับแต่งที่ไม่บังคับ แต่แนะนําให้ใช้ เพื่อปรับปรุงโซลูชัน
การเพิ่มการเติมข้อความอัตโนมัติลงในช่องป้อนข้อมูล ป้อนข้อมูลแบบฟอร์มที่อยู่โดยอัตโนมัติ เพิ่มฟังก์ชันการทํางานระหว่างพิมพ์ลงไป เพื่อปรับปรุงประสบการณ์ของผู้ใช้ในทุกแพลตฟอร์มและปรับปรุงความถูกต้องของที่อยู่ด้วยการกดแป้นพิมพ์ขั้นต่ํา
ให้การยืนยันที่อยู่อย่างชัดเจน ทําให้ผู้ใช้เห็นที่อยู่ของตนในแผนที่เป็นการยืนยันด้วยภาพว่าป้อนที่อยู่ที่ถูกต้อง
การเปรียบเทียบที่อยู่ที่ป้อนโดยผู้ใช้กับตําแหน่งของอุปกรณ์ เปรียบเทียบที่อยู่ที่ผู้ใช้ป้อนหรือกับตําแหน่งอุปกรณ์ปัจจุบันเพื่อช่วยในการระบุว่าอยู่ ณ ที่อยู่ที่ระบุ (เพื่อให้วิธีนี้ได้ผล ผู้ใช้ควรอยู่ที่บ้านเมื่อลงชื่อสมัครใช้)
เคล็ดลับเพิ่มเติมในการปรับปรุงการลงชื่อสมัครใช้แบบด่วนและยืนยันแล้ว คุณเพิ่มประสิทธิภาพรายการที่อยู่ได้ด้วยวิธีการเพิ่มเติม เช่น การปรับแต่งรูปลักษณ์ของวิดเจ็ตการเติมข้อความอัตโนมัติ หรือการอนุญาตให้ผู้ใช้เลือกชื่อธุรกิจหรือจุดสังเกตเป็นที่อยู่

การเพิ่มการเติมข้อความอัตโนมัติลงในช่องป้อนข้อมูล

ตัวอย่างนี้ใช้ Places SDK สําหรับ Android นอกจากนี้: iOS | JavaScript

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

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

เมื่อผู้ใช้เลือกช่องเติมข้อมูลอัตโนมัติและเริ่มพิมพ์ รายการการคาดคะเนที่อยู่จะปรากฏขึ้น

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

วิดีโอ: เพิ่มประสิทธิภาพแบบฟอร์มที่อยู่ด้วยการเติมข้อความอัตโนมัติเกี่ยวกับสถานที่

แบบฟอร์มที่อยู่

Android

iOS

เว็บ

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

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

การเพิ่มวิดเจ็ตเติมข้อความอัตโนมัติเกี่ยวกับสถานที่

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

ขั้นแรก ให้เตรียม Launcher กิจกรรมโดยใช้ ActivityResultLauncher ซึ่งจะรอผลลัพธ์จากกิจกรรมที่เปิดตัวแล้ว โค้ดเรียกกลับของผลลัพธ์จะมีออบเจ็กต์ Place ที่สอดคล้องกับที่อยู่ที่ผู้ใช้เลือกจากการคาดคะเนการเติมข้อความอัตโนมัติ

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

ถัดไป ให้กําหนดช่อง ตําแหน่ง และพิมพ์คุณสมบัติของ Intent การเติมข้อความอัตโนมัติ แล้วสร้างด้วย Autocomplete.IntentBuilder สุดท้าย เปิด Intent โดยใช้ ActivityResultLauncher ที่กําหนดไว้ในตัวอย่างโค้ดก่อนหน้านี้

    private void startAutocompleteIntent() {

        // Set the fields to specify which types of place data to
        // return after the user has made a selection.
        List<Place.Field> fields = Arrays.asList(Place.Field.ADDRESS_COMPONENTS,
                Place.Field.LAT_LNG, Place.Field.VIEWPORT);

        // Build the autocomplete intent with field, country, and type filters applied
        Intent intent = new Autocomplete.IntentBuilder(AutocompleteActivityMode.OVERLAY, fields)
                .setCountry("US")
                .setTypeFilter(TypeFilter.ADDRESS)
                .build(this);
        startAutocomplete.launch(intent);
    }

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

การกําหนด ActivityResultLauncher ก่อนหน้านั้นยังกําหนดสิ่งที่ควรทําเมื่อผลลัพธ์กิจกรรมแสดงขึ้นในโค้ดเรียกกลับ หากผู้ใช้เลือกการคาดการณ์ ระบบจะแสดงการคาดการณ์ไว้ในออบเจ็กต์ออบเจ็กต์ผลลัพธ์ เนื่องจาก Intent สร้างขึ้นโดย Autocomplete.IntentBuilder เมธอด Autocomplete.getPlaceFromIntent() จึงสามารถดึงออบเจ็กต์ Place จากออบเจ็กต์ดังกล่าวได้

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            (ActivityResultCallback<ActivityResult>) result -> {
                if (result.getResultCode() == Activity.RESULT_OK) {
                    Intent intent = result.getData();
                    if (intent != null) {
                        Place place = Autocomplete.getPlaceFromIntent(intent);

                        // Write a method to read the address components from the Place
                        // and populate the form with the address components
                        Log.d(TAG, "Place: " + place.getAddressComponents());
                        fillInAddress(place);
                    }
                } else if (result.getResultCode() == Activity.RESULT_CANCELED) {
                    // The user canceled the operation.
                    Log.i(TAG, "User canceled autocomplete");
                }
            });

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

การบันทึกข้อมูลที่อยู่จากการคาดคะเนแทนที่อยู่ที่ป้อนไว้ด้วยตนเองช่วยรับประกันความถูกต้องของที่อยู่ ทําให้แน่ใจได้ว่าที่อยู่ดังกล่าวเป็นที่รู้จักและนําส่งได้ รวมถึงลดการกดปุ่มของผู้ใช้

ข้อควรพิจารณาเมื่อใช้การเติมข้อความอัตโนมัติเกี่ยวกับสถานที่

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

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

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

    • ใช้ RectangularBounds เพื่อตั้งค่าขอบเขตรูปสี่เหลี่ยมผืนผ้าเพื่อจํากัดพื้นที่ ใช้ setLocationRestriction() เพื่อให้มั่นใจว่าจะแสดงที่อยู่ ในพื้นที่เหล่านั้นเท่านั้น

    • ใช้ setCountries() เพื่อจํากัดการตอบกลับในบางประเทศ

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

ให้การยืนยันที่อยู่อย่างชัดเจน

ตัวอย่างนี้ใช้ Maps SDK สําหรับ Android นอกจากนี้: iOS | JavaScript

ให้รายการที่อยู่ IP แก่ผู้ใช้ใน รายการที่อยู่ ซึ่งทําให้ผู้ใช้เกิดความมั่นใจมากขึ้นว่าที่อยู่นั้นถูกต้อง

รูปภาพต่อไปนี้แสดงแผนที่ใต้ที่อยู่ที่มีหมุดตรงที่อยู่ที่ป้อนไว้

ตัวอย่างต่อไปนี้เป็นไปตามขั้นตอนพื้นฐานในการเพิ่มแผนที่ใน Android โปรดดูรายละเอียดเพิ่มเติมในเอกสารประกอบ

กําลังเพิ่ม SupportMapFragment

ขั้นแรก ให้เพิ่มส่วนย่อย SupportMapFragment ลงในไฟล์ XML เลย์เอาต์

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:name="com.google.android.gms.maps.SupportMapFragment"
        android:id="@+id/confirmation_map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

จากนั้นจึงเพิ่มส่วนย่อยแบบเป็นโปรแกรมหากยังไม่ได้สร้าง

    private void showMap(Place place) {
        coordinates = place.getLatLng();

        // It isn't possible to set a fragment's id programmatically so we set a tag instead and
        // search for it using that.
        mapFragment = (SupportMapFragment)
                getSupportFragmentManager().findFragmentByTag(MAP_FRAGMENT_TAG);

        // We only create a fragment if it doesn't already exist.
        if (mapFragment == null) {
            mapPanel = ((ViewStub) findViewById(R.id.stub_map)).inflate();
            GoogleMapOptions mapOptions = new GoogleMapOptions();
            mapOptions.mapToolbarEnabled(false);

            // To programmatically add the map, we first create a SupportMapFragment.
            mapFragment = SupportMapFragment.newInstance(mapOptions);

            // Then we add it using a FragmentTransaction.
            getSupportFragmentManager()
                    .beginTransaction()
                    .add(R.id.confirmation_map, mapFragment, MAP_FRAGMENT_TAG)
                    .commit();
            mapFragment.getMapAsync(this);
        } else {
            updateMap(coordinates);
        }
    }

การจัดการกับส่วนย่อยและการลงทะเบียนการเรียกกลับ

  1. หากต้องการแฮนเดิลไปยังส่วนย่อย ให้เรียกใช้เมธอด FragmentManager.findFragmentById และส่งรหัสทรัพยากรของส่วนย่อยนั้นในไฟล์เลย์เอาต์ หากเพิ่มส่วนย่อยแบบไดนามิก ให้ข้ามขั้นตอนนี้เนื่องจากคุณเรียกข้อมูลแฮนเดิลแล้ว

  2. เรียกเมธอด getMapAsync เพื่อตั้งค่าโค้ดเรียกกลับในส่วนย่อย

ตัวอย่างเช่น หากคุณเพิ่มส่วนย่อยอย่างคงที่

Java


SupportMapFragment mapFragment = (SupportMapFragment) getSupportFragmentManager()
    .findFragmentById(R.id.map);
mapFragment.getMapAsync(this);

      

Kotlin


val mapFragment = supportFragmentManager
    .findFragmentById(R.id.map) as SupportMapFragment
mapFragment.getMapAsync(this)

      

การจัดรูปแบบและเพิ่มเครื่องหมายบนแผนที่

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

    @Override
    public void onMapReady(GoogleMap googleMap) {
        map = googleMap;
        try {
            // Customise the styling of the base map using a JSON object defined
            // in a string resource.
            boolean success = map.setMapStyle(
                    MapStyleOptions.loadRawResourceStyle(this, R.raw.style_json));

            if (!success) {
                Log.e(TAG, "Style parsing failed.");
            }
        } catch (Resources.NotFoundException e) {
            Log.e(TAG, "Can't find style. Error: ", e);
        }
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(coordinates, 15f));
        marker = map.addMarker(new MarkerOptions().position(coordinates));
    }

(ดูตัวอย่างโค้ดแบบเต็ม)

การปิดใช้การควบคุมแผนที่

เพื่อให้แผนที่เรียบง่ายโดยแสดงตําแหน่งที่ไม่มีตัวควบคุมแผนที่เพิ่มเติม (เช่น เข็มทิศ แถบเครื่องมือ หรือฟีเจอร์อื่นๆ ที่มีในตัว) โปรดพิจารณาปิดใช้ตัวควบคุมที่คุณไม่ได้รู้สึกว่าจําเป็น ใน Android อีกตัวเลือกหนึ่งคือการเปิดใช้โหมด Lite เพื่อให้โต้ตอบได้แบบจํากัด

การเปรียบเทียบที่อยู่ที่ป้อนโดยผู้ใช้กับตําแหน่งของอุปกรณ์

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

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