เพิ่มการเติมข้อมูลสถานที่อัตโนมัติในแบบฟอร์มที่อยู่

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

วิดีโอ: ปรับปรุงแบบฟอร์มที่อยู่ด้วยฟีเจอร์ป้อนข้อความอัตโนมัติสำหรับสถานที่

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

Android

iOS

เว็บ

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

รับโค้ด

โคลนหรือดาวน์โหลดที่เก็บตัวอย่าง Google Places SDK สําหรับ Android จาก GitHub

ดูกิจกรรมเวอร์ชัน Java

แสดง / ซ่อนโค้ด

    /*
 * Copyright 2022 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package com.example.placesdemo;

import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Intent;
import android.content.pm.PackageManager;
import android.content.res.Resources;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.ViewStub;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.Toast;

import androidx.activity.result.ActivityResultLauncher;
import androidx.activity.result.contract.ActivityResultContracts;
import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;

import com.example.placesdemo.databinding.AutocompleteAddressActivityBinding;
import com.google.android.gms.location.FusedLocationProviderClient;
import com.google.android.gms.location.LocationServices;
import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMapOptions;
import com.google.android.gms.maps.OnMapReadyCallback;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MapStyleOptions;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.libraries.places.api.Places;
import com.google.android.libraries.places.api.model.AddressComponent;
import com.google.android.libraries.places.api.model.AddressComponents;
import com.google.android.libraries.places.api.model.Place;
import com.google.android.libraries.places.api.model.TypeFilter;
import com.google.android.libraries.places.api.net.PlacesClient;
import com.google.android.libraries.places.widget.Autocomplete;
import com.google.android.libraries.places.widget.model.AutocompleteActivityMode;

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;

import static android.Manifest.permission.ACCESS_FINE_LOCATION;
import static com.google.maps.android.SphericalUtil.computeDistanceBetween;

/**
 * Activity for using Place Autocomplete to assist filling out an address form.
 */
@SuppressWarnings("FieldCanBeLocal")
public class AutocompleteAddressActivity extends AppCompatActivity implements OnMapReadyCallback {

    private static final String TAG = "ADDRESS_AUTOCOMPLETE";
    private static final String MAP_FRAGMENT_TAG = "MAP";
    private LatLng coordinates;
    private boolean checkProximity = false;
    private SupportMapFragment mapFragment;
    private GoogleMap map;
    private Marker marker;
    private PlacesClient placesClient;
    private View mapPanel;
    private LatLng deviceLocation;
    private static final double acceptedProximity = 150;

    private AutocompleteAddressActivityBinding binding;

    View.OnClickListener startAutocompleteIntentListener = view -> {
        view.setOnClickListener(null);
        startAutocompleteIntent();
    };

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            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");
                }
            });

    @Override
    protected void onActivityResult(int requestCode, int resultCode, @Nullable Intent intent) {
        super.onActivityResult(requestCode, resultCode, intent);
        binding.autocompleteAddress1.setOnClickListener(startAutocompleteIntentListener);
    }

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        binding = AutocompleteAddressActivityBinding.inflate(getLayoutInflater());
        setContentView(binding.getRoot());

        // Retrieve a PlacesClient (previously initialized - see MainActivity)
        placesClient = Places.createClient(this);

        // Attach an Autocomplete intent to the Address 1 EditText field
        binding.autocompleteAddress1.setOnClickListener(startAutocompleteIntentListener);

        // Update checkProximity when user checks the checkbox
        CheckBox checkProximityBox = findViewById(R.id.checkbox_proximity);
        checkProximityBox.setOnCheckedChangeListener((view, isChecked) -> {
            // Set the boolean to match user preference for when the Submit button is clicked
            checkProximity = isChecked;
        });

        // Submit and optionally check proximity
        Button saveButton = findViewById(R.id.autocomplete_save_button);
        saveButton.setOnClickListener(v -> saveForm());

        // Reset the form
        Button resetButton = findViewById(R.id.autocomplete_reset_button);
        resetButton.setOnClickListener(v -> clearForm());
    }

    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)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

    @Override
    public void onMapReady(@NonNull 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));
    }

    private void fillInAddress(Place place) {
        AddressComponents components = place.getAddressComponents();
        StringBuilder address1 = new StringBuilder();
        StringBuilder postcode = new StringBuilder();

        // Get each component of the address from the place details,
        // and then fill-in the corresponding field on the form.
        // Possible AddressComponent types are documented at https://goo.gle/32SJPM1
        if (components != null) {
            for (AddressComponent component : components.asList()) {
                String type = component.getTypes().get(0);
                switch (type) {
                    case "street_number": {
                        address1.insert(0, component.getName());
                        break;
                    }

                    case "route": {
                        address1.append(" ");
                        address1.append(component.getShortName());
                        break;
                    }

                    case "postal_code": {
                        postcode.insert(0, component.getName());
                        break;
                    }

                    case "postal_code_suffix": {
                        postcode.append("-").append(component.getName());
                        break;
                    }

                    case "locality":
                        binding.autocompleteCity.setText(component.getName());
                        break;

                    case "administrative_area_level_1": {
                        binding.autocompleteState.setText(component.getShortName());
                        break;
                    }

                    case "country":
                        binding.autocompleteCountry.setText(component.getName());
                        break;
                }
            }
        }

        binding.autocompleteAddress1.setText(address1.toString());
        binding.autocompletePostal.setText(postcode.toString());

        // After filling the form with address components from the Autocomplete
        // prediction, set cursor focus on the second address line to encourage
        // entry of sub-premise information such as apartment, unit, or floor number.
        binding.autocompleteAddress2.requestFocus();

        // Add a map for visual confirmation of the address
        showMap(place);
    }

    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);
        }
    }

    private void updateMap(LatLng latLng) {
        marker.setPosition(latLng);
        map.moveCamera(CameraUpdateFactory.newLatLngZoom(latLng, 15f));
        if (mapPanel.getVisibility() == View.GONE) {
            mapPanel.setVisibility(View.VISIBLE);
        }
    }

    private void saveForm() {
        Log.d(TAG, "checkProximity = " + checkProximity);
        if (checkProximity) {
            checkLocationPermissions();
        } else {
            Toast.makeText(
                            this,
                            R.string.autocomplete_skipped_message,
                            Toast.LENGTH_SHORT)
                    .show();
        }
    }

    private void clearForm() {
        binding.autocompleteAddress1.setText("");
        binding.autocompleteAddress2.getText().clear();
        binding.autocompleteCity.getText().clear();
        binding.autocompleteState.getText().clear();
        binding.autocompletePostal.getText().clear();
        binding.autocompleteCountry.getText().clear();
        if (mapPanel != null) {
            mapPanel.setVisibility(View.GONE);
        }
        binding.autocompleteAddress1.requestFocus();
    }

    // Register the permissions callback, which handles the user's response to the
    // system permissions dialog. Save the return value, an instance of
    // ActivityResultLauncher, as an instance variable.
    private final ActivityResultLauncher<String> requestPermissionLauncher =
            registerForActivityResult(new ActivityResultContracts.RequestPermission(), isGranted -> {
                if (isGranted) {
                    // Since ACCESS_FINE_LOCATION is the only permission in this sample,
                    // run the location comparison task once permission is granted.
                    // Otherwise, check which permission is granted.
                    getAndCompareLocations();
                } else {
                    // Fallback behavior if user denies permission
                    Log.d(TAG, "User denied permission");
                }
            });

    private void checkLocationPermissions() {
        if (ContextCompat.checkSelfPermission(this, ACCESS_FINE_LOCATION)
                == PackageManager.PERMISSION_GRANTED) {
            getAndCompareLocations();
        } else {
            requestPermissionLauncher.launch(
                    ACCESS_FINE_LOCATION);
        }
    }

    @SuppressLint("MissingPermission")
    private void getAndCompareLocations() {
        // TODO: Detect and handle if user has entered or modified the address manually and update
        // the coordinates variable to the Lat/Lng of the manually entered address. May use
        // Geocoding API to convert the manually entered address to a Lat/Lng.
        LatLng enteredLocation = coordinates;
        map.setMyLocationEnabled(true);

        FusedLocationProviderClient fusedLocationClient =
                LocationServices.getFusedLocationProviderClient(this);

        fusedLocationClient.getLastLocation()
                .addOnSuccessListener(this, location -> {
                    // Got last known location. In some rare situations this can be null.
                    if (location == null) {
                        return;
                    }

                    deviceLocation = new LatLng(location.getLatitude(), location.getLongitude());
                    Log.d(TAG, "device location = " + deviceLocation);
                    Log.d(TAG, "entered location = " + enteredLocation.toString());

                    // Use the computeDistanceBetween function in the Maps SDK for Android Utility Library
                    // to use spherical geometry to compute the distance between two Lat/Lng points.
                    double distanceInMeters = computeDistanceBetween(deviceLocation, enteredLocation);
                    if (distanceInMeters <= acceptedProximity) {
                        Log.d(TAG, "location matched");
                        // TODO: Display UI based on the locations matching
                    } else {
                        Log.d(TAG, "location not matched");
                        // TODO: Display UI based on the locations not matching
                    }
                });
    }
}
    

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

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

• Maps SDK สำหรับ Android (หรือ API สำหรับแพลตฟอร์มที่คุณต้องการ)
• Places API

ดูข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าได้ที่ตั้งค่าโปรเจ็กต์ Google Cloud

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

ส่วนนี้จะอธิบายวิธีเพิ่มการเติมข้อความอัตโนมัติของสถานที่ลงในแบบฟอร์มที่อยู่

การเพิ่มวิดเจ็ต Place Autocomplete

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

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

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            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 การเติมข้อความอัตโนมัติของสถานที่ และสร้าง 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)
                .setCountries(Arrays.asList("US"))
                .setTypesFilter(new ArrayList<String>() {{
                    add(TypeFilter.ADDRESS.toString().toLowerCase());
                }})
                .build(this);
        startAutocomplete.launch(intent);
    }

การจัดการที่อยู่ที่ได้รับจากฟีเจอร์ป้อนที่อยู่อัตโนมัติ

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

    private final ActivityResultLauncher<Intent> startAutocomplete = registerForActivityResult(
            new ActivityResultContracts.StartActivityForResult(),
            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() และจับคู่คอมโพเนนต์ที่อยู่แต่ละรายการกับช่องป้อนข้อมูลที่เกี่ยวข้องในแบบฟอร์มที่อยู่ โดยป้อนข้อมูลในช่องด้วยค่าจากสถานที่ที่ผู้ใช้เลือก

ตัวอย่างการใช้งานสำหรับป้อนข้อมูลในช่องแบบฟอร์มที่อยู่จะแสดงอยู่ในเมธอด fillInAddress ของโค้ดตัวอย่างที่ระบุไว้ในส่วนรับโค้ดของหน้านี้

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

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

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

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

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

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

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

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

แสดงภาพยืนยันที่อยู่

แสดงการยืนยันด้วยภาพสำหรับที่อยู่บนแผนที่ให้แก่ผู้ใช้ขณะป้อนที่อยู่ ซึ่งช่วยให้ผู้ใช้มั่นใจมากขึ้นว่าที่อยู่นั้นถูกต้อง

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

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

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

กำลังเพิ่ม SupportMapFragment

ก่อนอื่น ให้เพิ่ม SupportMapFragment ไปยังไฟล์ XML เลย์เอาต์

    <fragment
        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 เพื่อตั้งค่าการเรียกกลับในฟragment

เช่น หากคุณเพิ่มข้อมูลโค้ดแบบคงที่ ให้ทำดังนี้

Kotlin

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

      

Java

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

      

การจัดสไตล์และเพิ่มเครื่องหมายลงในแผนที่

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

    @Override
    public void onMapReady(@NonNull 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 เพื่อให้การโต้ตอบแบบจำกัด