Widget Place Autocomplete

Developer Wilayah Ekonomi Eropa (EEA)

Widget Place Autocomplete membuat kolom input teks, memberikan prediksi tempat dalam daftar pilihan UI, dan menampilkan detail tempat sebagai respons terhadap pilihan pengguna. Gunakan Widget Place Autocomplete untuk menyematkan antarmuka pengguna pelengkapan otomatis yang lengkap dan mandiri di halaman web Anda.

Prasyarat

Untuk menggunakan Place Autocomplete, Anda harus mengaktifkan "Places API (baru)" di project Google Cloud Anda. Lihat bagian Memulai untuk mengetahui detailnya

Yang baru

Place Autocomplete telah ditingkatkan dengan cara berikut:

  • UI widget Autocomplete mendukung pelokalan regional (termasuk bahasa RTL), untuk placeholder input teks, logo daftar prediksi, dan prediksi tempat.
  • Aksesibilitas yang dioptimalkan, termasuk dukungan untuk pembaca layar dan interaksi keyboard.
  • Widget Autocomplete menampilkan class Place baru untuk menyederhanakan penanganan objek yang ditampilkan.
  • Dukungan yang lebih baik untuk perangkat seluler dan layar kecil.
  • Performa dan tampilan grafis yang lebih baik.

Menambahkan widget Autocomplete

Widget Autocomplete membuat kolom input teks, memberikan prediksi tempat dalam daftar pilihan UI, dan menampilkan detail tempat sebagai respons terhadap klik pengguna menggunakan pemroses gmp-select. Bagian ini menunjukkan cara menambahkan widget Autocomplete ke peta Google atau halaman web.

Menambahkan widget Autocomplete ke halaman web

Untuk menambahkan widget Autocomplete ke halaman web, buat google.maps.places.PlaceAutocompleteElement baru, lalu tambahkan kode ini ke halaman seperti yang ditampilkan dalam contoh berikut:

TypeScript

// Request needed libraries.
(await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
    {}
);
document.body.appendChild(placeAutocomplete);
index.ts

JavaScript

// Request needed libraries.
(await google.maps.importLibrary('places'));
// Create the input HTML element, and append it.
const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
document.body.appendChild(placeAutocomplete);
index.js

Lihat contoh kode lengkap

Menambahkan widget Autocomplete ke peta

Jika alamat penagihan Anda berada di luar Wilayah Ekonomi Eropa (EEA), Anda juga dapat menggunakan widget Pelengkapan Otomatis dengan Google Maps.

Untuk menambahkan widget Autocomplete ke peta, buat instance google.maps.places.PlaceAutocompleteElement baru, tambahkan PlaceAutocompleteElement ke div, lalu dorong kode ini ke peta sebagai kontrol kustom, seperti yang ditampilkan dalam contoh berikut:

TypeScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});

// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.ts

JavaScript

// Get the inner map.
innerMap = mapElement.innerMap;
innerMap.setOptions({
    mapTypeControl: false,
});
// Use the bounds_changed event to restrict results to the current map bounds.
google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
    placeAutocomplete.locationRestriction = innerMap.getBounds();
});
index.js

Lihat contoh kode lengkap

Membatasi prediksi Autocomplete

Secara default, Place Autocomplete menampilkan semua jenis tempat, dengan bias prediksi di dekat lokasi pengguna, lalu mengambil semua kolom data yang tersedia untuk tempat yang dipilih pengguna. Tetapkan PlaceAutocompleteElementOptions untuk memberikan prediksi yang lebih relevan, dengan membatasi atau membiaskan hasil.

Membatasi hasil akan menyebabkan widget Autocomplete mengabaikan hasil apa pun yang berada di luar area pembatasan. Praktik yang umum adalah membatasi hasil ke batas peta. Membiaskan hasil akan membuat widget Autocomplete menampilkan hasil dalam area yang ditentukan, tetapi beberapa hasil yang cocok mungkin berada di luar area tersebut.

Jika Anda tidak memberikan batas atau area pandang peta, API akan berupaya mendeteksi lokasi pengguna dari alamat IP mereka, dan akan menampilkan hasil berdasarkan lokasi tersebut. Tetapkan batas jika memungkinkan. Jika tidak, pengguna lain mungkin akan menerima prediksi yang berbeda. Selain itu, guna meningkatkan ketepatan prediksi secara umum, penting untuk menyediakan area pandang yang logis seperti yang Anda tetapkan dengan menggeser atau melakukan zoom pada peta, atau area pandang yang ditetapkan developer berdasarkan lokasi dan radius perangkat. Jika radius tidak tersedia, 5 km akan dianggap sebagai nilai default yang wajar untuk Place Autocomplete. Jangan menetapkan area pandang dengan radius nol (satu titik), area pandang yang lebarnya hanya beberapa meter (kurang dari 100 m), atau area pandang yang membentang di globe.

Membatasi penelusuran tempat menurut negara

Untuk membatasi penelusuran tempat ke satu atau beberapa negara tertentu, gunakan properti includedRegionCodes untuk menentukan kode negara seperti yang ditampilkan dalam cuplikan berikut:

const pac = new google.maps.places.PlaceAutocompleteElement({
  includedRegionCodes: ['us', 'au'],
});

Membatasi penelusuran tempat ke batas peta

Untuk membatasi penelusuran tempat ke batas peta, gunakan properti locationRestrictions untuk menambahkan batas, seperti yang ditampilkan dalam cuplikan berikut:

const pac = new google.maps.places.PlaceAutocompleteElement({
  locationRestriction: map.getBounds(),
});

Saat membatasi ke batas peta, pastikan untuk menambahkan pemroses guna memperbarui batas saat batas tersebut berubah:

map.addListener('bounds_changed', () => {
  autocomplete.locationRestriction = map.getBounds();
});

Untuk menghapus locationRestriction, tetapkan parameter ini ke null.

Membiaskan hasil penelusuran tempat

Biaskan hasil penelusuran tempat ke area lingkaran dengan menggunakan properti locationBias, dan meneruskan radius, seperti yang ditampilkan di sini:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  locationBias: {radius: 100, center: {lat: 50.064192, lng: -130.605469}},
});

Untuk menghapus locationBias, tetapkan parameter ini ke null.

Membatasi hasil penelusuran tempat ke jenis tertentu

Batasi hasil penelusuran tempat ke jenis tempat tertentu dengan menggunakan properti includedPrimaryTypes, dan menentukan satu atau beberapa jenis, seperti yang ditampilkan di sini:

const autocomplete = new google.maps.places.PlaceAutocompleteElement({
  includedPrimaryTypes: ['establishment'],
});

Untuk mengetahui daftar lengkap jenis yang didukung, lihat Tabel jenis tempat A dan B.

Mendapatkan detail tempat

Guna mendapatkan detail tempat untuk tempat yang dipilih, tambahkan pemroses gmp-select ke PlaceAutocompleteElement, seperti yang ditampilkan dalam contoh berikut:

TypeScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(
        place.toJSON(), /* replacer */ null, /* space */ 2);
});
index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
    selectedPlaceTitle.textContent = 'Selected Place:';
    selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
});
index.js

Lihat contoh kode lengkap

Dalam contoh sebelumnya, pemroses peristiwa menampilkan objek class Place. Panggil place.fetchFields() guna mendapatkan kolom data Place Details yang diperlukan untuk aplikasi Anda.

Pemroses dalam contoh berikutnya meminta informasi tempat dan menampilkannya di peta.

TypeScript

// Add the gmp-placeselect listener, and display the results on the map.
  //prettier-ignore
  //@ts-ignore
  placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
      fields: ['displayName', 'formattedAddress', 'location'],
    });

    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
      innerMap.fitBounds(place.viewport);
    } else {
      innerMap.setCenter(place.location);
      innerMap.setZoom(17);
    }

    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);

    updateInfoWindow(content, place.location);
    marker.position = place.location;
  }
);
index.ts

JavaScript

// Add the gmp-placeselect listener, and display the results on the map.
//prettier-ignore
//@ts-ignore
placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
    const place = placePrediction.toPlace();
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });
    // If the place has a geometry, then present it on a map.
    if (place.viewport) {
        innerMap.fitBounds(place.viewport);
    }
    else {
        innerMap.setCenter(place.location);
        innerMap.setZoom(17);
    }
    let content = document.createElement('div');
    let nameText = document.createElement('span');
    nameText.textContent = place.displayName;
    content.appendChild(nameText);
    content.appendChild(document.createElement('br'));
    let addressText = document.createElement('span');
    addressText.textContent = place.formattedAddress;
    content.appendChild(addressText);
    updateInfoWindow(content, place.location);
    marker.position = place.location;
});
index.js

Lihat contoh kode lengkap

Contoh peta

Bagian ini berisi kode lengkap untuk contoh peta yang ditampilkan pada halaman ini.

Elemen Autocomplete

Contoh ini menambahkan widget Autocomplete ke halaman web, dan menampilkan hasil untuk setiap tempat yang dipilih.

TypeScript

async function initMap(): Promise<void> {
    // Request needed libraries.
    (await google.maps.importLibrary('places')) as google.maps.PlacesLibrary;
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement(
        {}
    );
    document.body.appendChild(placeAutocomplete);

    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);

    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);

    // Add the gmp-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(
            place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}

initMap();
index.ts

JavaScript

async function initMap() {
    // Request needed libraries.
    (await google.maps.importLibrary('places'));
    // Create the input HTML element, and append it.
    const placeAutocomplete = new google.maps.places.PlaceAutocompleteElement({});
    document.body.appendChild(placeAutocomplete);
    // Inject HTML UI.
    const selectedPlaceTitle = document.createElement('p');
    selectedPlaceTitle.textContent = '';
    document.body.appendChild(selectedPlaceTitle);
    const selectedPlaceInfo = document.createElement('pre');
    selectedPlaceInfo.textContent = '';
    document.body.appendChild(selectedPlaceInfo);
    // Add the gmp-placeselect listener, and display the results.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({ fields: ['displayName', 'formattedAddress', 'location'] });
        selectedPlaceTitle.textContent = 'Selected Place:';
        selectedPlaceInfo.textContent = JSON.stringify(place.toJSON(), /* replacer */ null, /* space */ 2);
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
#map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

p {
    font-family: Roboto, sans-serif;
    font-weight: bold;
}

style.css

HTML

<html>
    <head>
        <title>Place Autocomplete element</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
    </head>
    <body>
        <p style="font-family: roboto, sans-serif">Search for a place here:</p>

        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </body>
</html>
index.html

Mencoba Contoh

Menambahkan Autocomplete ke peta

Contoh ini menampilkan cara menambahkan widget Autocomplete ke peta Google.

TypeScript

const mapElement = document.querySelector('gmp-map') as google.maps.MapElement;
const placeAutocomplete = document.querySelector(
    'gmp-place-autocomplete'
) as google.maps.places.PlaceAutocompleteElement;
let innerMap;
let marker: google.maps.marker.AdvancedMarkerElement;
let infoWindow: google.maps.InfoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap(): Promise<void> {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);

    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });

    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });

    infoWindow = new google.maps.InfoWindow({});

    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
      const place = placePrediction.toPlace();
      await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
      });

      // If the place has a geometry, then present it on a map.
      if (place.viewport) {
        innerMap.fitBounds(place.viewport);
      } else {
        innerMap.setCenter(place.location);
        innerMap.setZoom(17);
      }

      let content = document.createElement('div');
      let nameText = document.createElement('span');
      nameText.textContent = place.displayName;
      content.appendChild(nameText);
      content.appendChild(document.createElement('br'));
      let addressText = document.createElement('span');
      addressText.textContent = place.formattedAddress;
      content.appendChild(addressText);

      updateInfoWindow(content, place.location);
      marker.position = place.location;
    }
  );
}

// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}

initMap();
index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
const placeAutocomplete = document.querySelector('gmp-place-autocomplete');
let innerMap;
let marker;
let infoWindow;
let center = { lat: 40.749933, lng: -73.98633 }; // New York City
async function initMap() {
    // Request needed libraries.
    const [] = await Promise.all([
        google.maps.importLibrary('marker'),
        google.maps.importLibrary('places'),
    ]);
    // Get the inner map.
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });
    // Use the bounds_changed event to restrict results to the current map bounds.
    google.maps.event.addListener(innerMap, 'bounds_changed', async () => {
        placeAutocomplete.locationRestriction = innerMap.getBounds();
    });
    // Create the marker and infowindow.
    marker = new google.maps.marker.AdvancedMarkerElement({
        map: innerMap,
    });
    infoWindow = new google.maps.InfoWindow({});
    // Add the gmp-placeselect listener, and display the results on the map.
    //prettier-ignore
    //@ts-ignore
    placeAutocomplete.addEventListener('gmp-select', async ({ placePrediction }) => {
        const place = placePrediction.toPlace();
        await place.fetchFields({
            fields: ['displayName', 'formattedAddress', 'location'],
        });
        // If the place has a geometry, then present it on a map.
        if (place.viewport) {
            innerMap.fitBounds(place.viewport);
        }
        else {
            innerMap.setCenter(place.location);
            innerMap.setZoom(17);
        }
        let content = document.createElement('div');
        let nameText = document.createElement('span');
        nameText.textContent = place.displayName;
        content.appendChild(nameText);
        content.appendChild(document.createElement('br'));
        let addressText = document.createElement('span');
        addressText.textContent = place.formattedAddress;
        content.appendChild(addressText);
        updateInfoWindow(content, place.location);
        marker.position = place.location;
    });
}
// Helper function to create an info window.
function updateInfoWindow(content, center) {
    infoWindow.setContent(content);
    infoWindow.setPosition(center);
    infoWindow.open({
        map: innerMap,
        anchor: marker,
        shouldFocus: false,
    });
}
initMap();
index.js

CSS

/* 
 * Always set the map height explicitly to define the size of the div element
 * that contains the map. 
 */
gmp-map {
    height: 100%;
}

/* 
 * Optional: Makes the sample page fill the window. 
 */
html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
}

.place-autocomplete-card {
    background-color: #fff;
    border-radius: 5px;
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    margin: 10px;
    padding: 5px;
    font-family: Roboto, sans-serif;
    font-size: large;
    font-weight: bold;
}

gmp-place-autocomplete {
    width: 300px;
}

#infowindow-content .title {
    font-weight: bold;
}

#map #infowindow-content {
    display: inline;
}

style.css

HTML

<html>
    <head>
        <title>Place Autocomplete map</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <!-- prettier-ignore -->
        <script>(g=>{var h,a,k,p="The Google Maps JavaScript API",c="google",l="importLibrary",q="__ib__",m=document,b=window;b=b[c]||(b[c]={});var d=b.maps||(b.maps={}),r=new Set,e=new URLSearchParams,u=()=>h||(h=new Promise(async(f,n)=>{await (a=m.createElement("script"));e.set("libraries",[...r]+"");for(k in g)e.set(k.replace(/[A-Z]/g,t=>"_"+t[0].toLowerCase()),g[k]);e.set("callback",c+".maps."+q);a.src=`https://maps.${c}apis.com/maps/api/js?`+e;d[q]=f;a.onerror=()=>h=n(Error(p+" could not load."));a.nonce=m.querySelector("script[nonce]")?.nonce||"";m.head.append(a)}));d[l]?console.warn(p+" only loads once. Ignoring:",g):d[l]=(f,...n)=>r.add(f)&&u().then(()=>d[l](f,...n))})
        ({key: "AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8", v: "weekly"});</script>
    </head>
    <body>
        <gmp-map center="40.749933,-73.98633" zoom="13" map-id="DEMO_MAP_ID">
            <div
                class="place-autocomplete-card"
                slot="control-inline-start-block-start">
                <p>Search for a place here:</p>
                <gmp-place-autocomplete></gmp-place-autocomplete>
            </div>
        </gmp-map>
    </body>
</html>
index.html

Mencoba Contoh

Menggunakan komponen Place Picker

Komponen pemilih tempat adalah input teks yang memungkinkan pengguna akhir menelusuri alamat atau tempat tertentu menggunakan pelengkapan otomatis. Bagian ini adalah bagian dari Extended Component Library, sekumpulan komponen web yang membantu developer membuat peta dan fitur lokasi yang lebih baik dengan lebih cepat.

Gunakan konfigurasi Place Picker untuk membuat kode yang dapat disematkan untuk komponen Place Picker kustom, lalu ekspor untuk digunakan dengan framework populer seperti React dan Angular atau tanpa framework sama sekali.

Pengoptimalan Pelengkapan Otomatis (Baru)

Bagian ini menjelaskan praktik terbaik untuk membantu Anda memaksimalkan layanan Autocomplete (Baru).

Berikut ini beberapa pedoman umum:

  • Cara tercepat untuk mengembangkan antarmuka pengguna yang berfungsi baik adalah dengan menggunakan widget Autocomplete (Baru) Maps JavaScript API, widget Autocomplete (Baru) Places SDK for Android, atau widget Autocomplete (Baru) Places SDK for iOS.
  • Pahami kolom data Pelengkapan Otomatis (Baru) yang penting sejak awal.
  • Kolom pembiasan lokasi dan pembatasan lokasi bersifat opsional, tetapi dapat memberikan dampak signifikan terhadap performa pelengkapan otomatis.
  • Gunakan penanganan error untuk memastikan aplikasi Anda terdegrasi secara halus jika API menampilkan error.
  • Pastikan aplikasi Anda menanganinya jika tidak ada pilihan dan menawarkan cara kepada pengguna untuk melanjutkan.

Praktik terbaik pengoptimalan biaya

Pengoptimalan biaya dasar

Untuk mengoptimalkan biaya penggunaan layanan Autocomplete (Baru), gunakan mask kolom dalam widget Place Details (Baru) dan Autocomplete (Baru) agar hanya menampilkan kolom data Autocomplete (Baru) yang Anda butuhkan.

Pengoptimalan biaya lanjutan

Pertimbangkan implementasi Autocomplete (Baru) yang terprogram untuk mengakses SKU: Harga Permintaan Autocomplete dan meminta hasil Geocoding API tentang tempat yang dipilih, bukan Place Details (Baru). Harga per permintaan yang dipasangkan dengan Geocoding API lebih hemat biaya daripada harga per sesi (berbasis sesi) jika kedua kondisi berikut terpenuhi:

  • Jika Anda hanya memerlukan lintang/bujur atau alamat tempat yang dipilih pengguna, Geocoding API akan mengirimkan informasi ini dengan biaya yang lebih murah daripada panggilan Place Details (Baru).
  • Jika pengguna memilih prediksi pelengkapan otomatis dalam rata-rata empat permintaan prediksi Autocomplete (Baru) atau kurang, harga per permintaan mungkin lebih hemat biaya daripada harga per sesi.
Untuk mendapatkan bantuan dalam memilih penerapan Pelengkapan Otomatis (Baru) yang sesuai dengan kebutuhan Anda, pilih tab yang sesuai dengan jawaban Anda untuk pertanyaan berikut.

Apakah aplikasi Anda memerlukan informasi selain alamat dan lintang/bujur dari prediksi yang dipilih?

Ya, memerlukan informasi lebih detail

Gunakan Autocomplete (Baru) berbasis sesi dengan Place Details (Baru).
Karena aplikasi Anda memerlukan Place Details (Baru), seperti nama tempat, status bisnis, atau jam buka, penerapan Autocomplete (Baru) Anda harus menggunakan token sesi (secara terprogram atau bawaan di widget JavaScript, Android, atau iOS) per session ditambah SKU Places yang berlaku, bergantung pada kolom data tempat yang Anda minta.1

Penerapan widget
Pengelolaan sesi secara otomatis terintegrasi ke dalam widget JavaScript, Android, atau iOS. Ini mencakup permintaan Autocomplete (Baru) dan permintaan Place Details (Baru) pada prediksi yang dipilih. Pastikan untuk menentukan parameter fields untuk memastikan Anda hanya meminta kolom data Autocomplete (Baru) yang Anda butuhkan.

Penerapan terprogram
Gunakan token sesi dengan permintaan Autocomplete (Baru) Anda. Saat meminta Place Details (Baru) tentang prediksi yang dipilih, sertakan parameter berikut:

  1. ID tempat dari respons Autocomplete (Baru)
  2. Token sesi yang digunakan dalam permintaan Autocomplete (Baru)
  3. Parameter fields yang menentukan kolom data Autocomplete (Baru) yang Anda butuhkan

Tidak, hanya memerlukan alamat dan lokasi

Geocoding API dapat menjadi opsi yang lebih hemat biaya daripada Place Details (Baru) untuk aplikasi Anda, bergantung pada performa penggunaan Autocomplete (Baru). Efisiensi Autocomplete (Baru) setiap aplikasi bervariasi bergantung pada apa yang dimasukkan oleh pengguna, tempat aplikasi digunakan, dan apakah praktik terbaik pengoptimalan performa telah diterapkan.

Untuk menjawab pertanyaan berikut, analisis rata-rata jumlah karakter yang diketik pengguna sebelum memilih prediksi Autocomplete (Baru) di aplikasi Anda.

Apakah pengguna Anda rata-rata memilih prediksi Autocomplete (Baru) dalam empat permintaan atau kurang?

Ya

Terapkan Autocomplete (Baru) secara terprogram tanpa token sesi dan panggil Geocoding API di prediksi tempat yang dipilih.
Geocoding API memberikan alamat dan koordinat lintang/bujur. Membuat empat permintaan Autocomplete ditambah panggilan Geocoding API tentang prediksi tempat yang dipilih lebih rendah daripada biaya per sesi Autocomplete (Baru) per sesi.1

Pertimbangkan untuk menerapkan praktik terbaik performa guna membantu pengguna mendapatkan prediksi yang mereka cari dengan lebih sedikit karakter.

Tidak

Gunakan Autocomplete (Baru) berbasis sesi dengan Place Details (Baru).
Karena rata-rata jumlah permintaan yang Anda harapkan sebelum pengguna memilih prediksi Autocomplete (Baru) melebihi biaya harga per sesi, penerapan Autocomplete (Baru) Anda harus menggunakan token sesi untuk permintaan Autocomplete (Baru) dan permintaan Place Details (Baru) terkait per sesi. 1

Penerapan widget
Pengelolaan sesi secara otomatis terintegrasi ke dalam widget JavaScript, Android, atau iOS. Ini mencakup permintaan Autocomplete (Baru) dan permintaan Place Details (Baru) pada prediksi yang dipilih. Pastikan untuk menentukan parameter fields untuk memastikan Anda hanya meminta kolom yang Anda butuhkan.

Penerapan terprogram
Gunakan token sesi dengan permintaan Autocomplete (Baru) Anda. Saat meminta Place Details (Baru) tentang prediksi yang dipilih, sertakan parameter berikut:

  1. ID tempat dari respons Autocomplete (Baru)
  2. Token sesi yang digunakan dalam permintaan Autocomplete (Baru)
  3. Parameter fields yang menentukan kolom seperti alamat dan geometri

Pertimbangkan untuk menunda permintaan Pelengkapan Otomatis (Baru)
Anda dapat menggunakan strategi seperti menunda permintaan Pelengkapan Otomatis (Baru) hingga pengguna mengetik tiga atau empat karakter pertama, sehingga aplikasi Anda membuat lebih sedikit permintaan. Misalnya, membuat permintaan Autocomplete (Baru) untuk setiap karakter setelah pengguna mengetik karakter ketiga berarti jika pengguna mengetik tujuh karakter, lalu memilih prediksi yang Anda buat satu permintaan Geocoding API-nya, total biaya yang harus dibayar adalah 4 Autocomplete (Baru) Per Permintaan + Geocoding.1

Jika permintaan yang tertunda dapat menghasilkan permintaan terprogram rata-rata di bawah empat, Anda dapat mengikuti panduan ini untuk penerapan Autocomplete (Baru) yang berperforma dengan Geocoding API. Perhatikan bahwa permintaan yang tertunda dapat dianggap sebagai latensi oleh pengguna yang mungkin berharap melihat prediksi dengan setiap karakter baru yang mereka ketik.

Pertimbangkan untuk menerapkan praktik terbaik performa guna membantu pengguna Anda mendapatkan prediksi yang mereka cari dengan lebih sedikit karakter.

  1. Untuk mengetahui biaya, lihat daftar harga Google Maps Platform.

Praktik terbaik performa

Panduan berikut menjelaskan cara mengoptimalkan performa Autocomplete (Baru):

  • Tambahkan pembatasan negara, pembiasan lokasi, dan (untuk penerapan terprogram) preferensi bahasa ke penerapan Pelengkapan Otomatis (Baru) Anda. Preferensi bahasa tidak diperlukan dengan widget karena widget tersebut memilih preferensi bahasa dari browser atau perangkat seluler pengguna.
  • Jika Autocomplete (Baru) disertai sebuah peta, Anda dapat membiaskan lokasi berdasarkan area pandang peta.
  • Jika pengguna tidak memilih salah satu prediksi Autocomplete (Baru), umumnya karena tidak satu pun prediksi tersebut yang merupakan alamat hasil yang diinginkan, Anda dapat menggunakan kembali input pengguna yang asli untuk mendapatkan hasil yang lebih relevan:
    • Jika Anda mengharapkan pengguna hanya memasukkan informasi alamat, gunakan kembali input pengguna yang asli dalam panggilan ke Geocoding API.
    • Jika Anda memperkirakan pengguna akan memasukkan kueri untuk tempat tertentu berdasarkan nama atau alamat, gunakan permintaan Place Details (Baru). Jika hasil hanya diharapkan di wilayah tertentu, gunakan pembiasan lokasi.
    Skenario lain saat Anda sebaiknya beralih kembali ke Geocoding API mencakup:
    • Pengguna memasukkan alamat sub-tempat, seperti alamat untuk unit atau apartemen tertentu dalam sebuah gedung. Misalnya, alamat Ceko "Stroupežnického 3191/17, Praha" akan menghasilkan prediksi parsial di Autocomplete (Baru).
    • Pengguna memasukkan alamat dengan awalan segmen jalan seperti "23-30 29th St, Queens" di New York City atau "47-380 Kamehameha Hwy, Kaneohe" di pulau Kauai di Hawai'i.

Penyesuaian lokasi

Membiaskan hasil ke area tertentu dengan meneruskan parameter location dan parameter radius. Tindakan ini menginstruksikan Autocomplete (Baru) untuk memilih menampilkan hasil dalam area yang ditentukan. Hasil di luar area yang ditentukan mungkin tetap ditampilkan. Anda dapat menggunakan parameter components untuk memfilter hasil guna menampilkan hanya tempat-tempat di negara tertentu.

Membatasi lokasi

Batasi hasil ke area tertentu dengan meneruskan parameter locationRestriction.

Anda juga dapat membatasi hasil ke wilayah yang ditentukan oleh parameter location dan radius, dengan menambahkan parameter locationRestriction. Hal ini menginstruksikan Autocomplete (Baru) untuk menampilkan hanya hasil dalam wilayah tersebut.