Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Place Autocomplete Data API

Developer Wilayah Ekonomi Eropa (EEA)

Place Autocomplete Data API memungkinkan Anda mengambil prediksi tempat secara terprogram, untuk membuat pengalaman pelengkapan otomatis yang disesuaikan dengan tingkat kontrol yang lebih baik daripada yang dimungkinkan dengan widget pelengkapan otomatis. Dalam panduan ini, Anda akan mempelajari cara menggunakan Place Autocomplete Data API untuk membuat permintaan pelengkapan otomatis berdasarkan kueri pengguna.

Contoh berikut menunjukkan integrasi type-ahead yang disederhanakan. Masukkan kueri penelusuran, seperti "pizza" atau "poke", lalu klik untuk memilih hasil yang Anda inginkan.

Permintaan Pelengkapan Otomatis

Permintaan pelengkapan otomatis menggunakan string input kueri dan menampilkan daftar prediksi tempat. Untuk membuat permintaan pelengkapan otomatis, panggil fetchAutocompleteSuggestions() dan teruskan permintaan dengan properti yang diperlukan. Properti input berisi string yang akan ditelusuri; dalam aplikasi standar, nilai ini akan diperbarui saat pengguna mengetik kueri. Permintaan harus menyertakan sessionToken, yang digunakan untuk tujuan penagihan.

Cuplikan berikut menunjukkan pembuatan isi permintaan dan penambahan token sesi, lalu memanggil fetchAutocompleteSuggestions() untuk mendapatkan daftar PlacePrediction.

// Add an initial request body.
const request = {
    input: 'Tadi',
    locationRestriction: {
        west: -122.44,
        north: 37.8,
        east: -122.39,
        south: 37.78,
    },
    origin: { lat: 37.7893, lng: -122.4039 },
    includedPrimaryTypes: ['restaurant'],
    language: 'en-US',
    region: 'us',
};

// Create a session token.
const token = new AutocompleteSessionToken();
// Add the token to the request.
request.sessionToken = token;index.js

Membatasi prediksi pelengkapan otomatis

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 opsi Place Autocomplete 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.

Gunakan properti origin untuk menentukan titik awal untuk menghitung jarak geodesi ke tujuan. Jika nilai ini dihilangkan, jarak tidak akan ditampilkan.

Gunakan properti includedPrimaryTypes untuk menentukan hingga lima jenis tempat. Jika tidak ada jenis yang ditentukan, tempat dari semua jenis akan ditampilkan.

Lihat referensi API

Mendapatkan detail tempat

Untuk menampilkan objek Place dari hasil prediksi tempat, panggil toPlace() terlebih dahulu, lalu panggil fetchFields() pada objek Place yang dihasilkan (ID sesi dari prediksi tempat akan otomatis disertakan). Memanggil fetchFields() akan mengakhiri sesi pelengkapan otomatis.

const place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
await place.fetchFields({
    fields: ['displayName', 'formattedAddress'],
});

const placeInfo = document.getElementById('prediction');
placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;index.js

Token sesi

Token sesi mengelompokkan fase kueri dan pemilihan dari penelusuran pelengkapan otomatis pengguna ke dalam sesi terpisah untuk tujuan penagihan. Sesi dimulai saat pengguna mulai mengetik. Sesi diakhiri saat pengguna memilih tempat dan panggilan ke Place Details dilakukan.

Untuk membuat token sesi baru dan menambahkannya ke permintaan, buat instance AutocompleteSessionToken, lalu tetapkan properti sessionToken permintaan untuk menggunakan token seperti yang ditunjukkan dalam cuplikan berikut:

// Create a session token.
const token = new AutocompleteSessionToken();
// Add the token to the request.
request.sessionToken = token;index.js

Sesi diakhiri saat fetchFields() dipanggil. Setelah membuat instance Place, Anda tidak perlu meneruskan token sesi ke fetchFields() karena hal ini ditangani secara otomatis.

await place.fetchFields({
    fields: ['displayName', 'formattedAddress'],
});index.js

Buat token sesi untuk sesi berikutnya dengan membuat instance baru AutocompleteSessionToken.

Rekomendasi token sesi:

Gunakan token sesi untuk semua panggilan Place Autocomplete.
Buat token baru untuk setiap sesi.
Teruskan token sesi yang unik untuk setiap sesi baru. Jika menggunakan token yang sama untuk lebih dari satu sesi, setiap permintaan akan ditagih satu per satu.

Anda dapat memilih untuk menghapus token sesi pelengkapan otomatis dari permintaan. Jika token sesi dihilangkan, setiap permintaan akan ditagih secara terpisah, sehingga memicu SKU Autocomplete - Per Request. Jika token sesi digunakan ulang, sesi tersebut dianggap tidak valid dan permintaan akan dikenai biaya seolah-olah tidak ada token sesi yang diberikan.

Contoh

Saat pengguna mengetik kueri, permintaan pelengkapan otomatis dipanggil setiap beberapa penekanan tombol (bukan per karakter), dan daftar kemungkinan hasil akan ditampilkan. Saat pengguna membuat pilihan dari daftar hasil, pilihan tersebut dihitung sebagai permintaan, dan semua permintaan yang dibuat selama penelusuran digabungkan dan dihitung sebagai satu permintaan. Jika pengguna memilih tempat, kueri penelusuran akan tersedia tanpa biaya, dan hanya permintaan data Tempat yang dikenai biaya. Jika pengguna tidak memilih apa pun dalam beberapa menit setelah sesi dimulai, hanya kueri penelusuran yang akan dikenai biaya.

Dari perspektif aplikasi, alur peristiwa berjalan seperti ini:

Pengguna mulai mengetik kueri untuk menelusuri "Paris, Prancis".
Setelah mendeteksi input pengguna, aplikasi akan membuat token sesi baru, "Token A".
Saat pengguna mengetik, API membuat permintaan pelengkapan otomatis setiap beberapa karakter, menampilkan daftar baru hasil potensial untuk setiap karakter:
"P"
"Par"
"Paris,"
"Paris, Fr"
Saat pengguna membuat pilihan:
- Semua permintaan yang dihasilkan dari kueri dikelompokkan dan ditambahkan ke sesi yang diwakili oleh "Token A", sebagai satu permintaan.
- Pilihan pengguna dihitung sebagai permintaan Place Detail, dan ditambahkan ke sesi yang diwakili oleh "Token A".
Sesi diakhiri, dan aplikasi menghapus "Token A".

Pelajari cara penagihan sesi

Kode contoh lengkap

Bagian ini berisi contoh lengkap yang menunjukkan cara menggunakan Place Autocomplete Data API .

Prediksi Place Autocomplete

Contoh berikut menunjukkan pemanggilan fetchAutocompleteSuggestions() untuk input "Tadi", lalu memanggil toPlace() pada hasil prediksi pertama, diikuti dengan panggilan ke fetchFields() untuk mendapatkan detail tempat.

TypeScript

async function init() {
    const { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const request: google.maps.places.AutocompleteRequest = {
        input: 'Tadi',
        locationRestriction: {
            west: -122.44,
            north: 37.8,
            east: -122.39,
            south: 37.78,
        },
        origin: { lat: 37.7893, lng: -122.4039 },
        includedPrimaryTypes: ['restaurant'],
        language: 'en-US',
        region: 'us',
    };

    // Create a session token.
    const token = new AutocompleteSessionToken();
    // Add the token to the request.
    request.sessionToken = token;
    // Fetch autocomplete suggestions.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    const title = document.getElementById('title')!;
    title.appendChild(
        document.createTextNode(
            'Query predictions for "' + request.input + '":'
        )
    );

    const resultsElement = document.getElementById('results')!;

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        // Create a new list element.
        const listItem = document.createElement('li');

        listItem.appendChild(
            document.createTextNode(placePrediction!.text.toString())
        );
        resultsElement.appendChild(listItem);
    }

    const place = suggestions[0].placePrediction!.toPlace(); // Get first predicted place.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    const placeInfo = document.getElementById('prediction')!;
    placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}

void init();index.ts

JavaScript

async function init() {
    const { AutocompleteSessionToken, AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    // Add an initial request body.
    const request = {
        input: 'Tadi',
        locationRestriction: {
            west: -122.44,
            north: 37.8,
            east: -122.39,
            south: 37.78,
        },
        origin: { lat: 37.7893, lng: -122.4039 },
        includedPrimaryTypes: ['restaurant'],
        language: 'en-US',
        region: 'us',
    };

    // Create a session token.
    const token = new AutocompleteSessionToken();
    // Add the token to the request.
    request.sessionToken = token;
    // Fetch autocomplete suggestions.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    const title = document.getElementById('title');
    title.appendChild(
        document.createTextNode(
            'Query predictions for "' + request.input + '":'
        )
    );

    const resultsElement = document.getElementById('results');

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        // Create a new list element.
        const listItem = document.createElement('li');

        listItem.appendChild(
            document.createTextNode(placePrediction.text.toString())
        );
        resultsElement.appendChild(listItem);
    }

    const place = suggestions[0].placePrediction.toPlace(); // Get first predicted place.
    await place.fetchFields({
        fields: ['displayName', 'formattedAddress'],
    });

    const placeInfo = document.getElementById('prediction');
    placeInfo.textContent = `First predicted place: ${place.displayName}: ${place.formattedAddress}`;
}

void init();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;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete Data API Predictions</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <div id="title"></div>
        <ul id="results"></ul>
        <p><span id="prediction"></span></p>
        <img
            class="powered-by-google"
            src="./powered_by_google_on_white.png"
            alt="Powered by Google" />
    </body>
</html>index.html

Place Autocomplete type-ahead dengan sesi

Contoh ini menunjukkan konsep berikut:

Memanggil fetchAutocompleteSuggestions() berdasarkan kueri pengguna dan menampilkan daftar tempat yang diprediksi sebagai respons.
Menggunakan token sesi untuk mengelompokkan kueri pengguna dengan permintaan Place Details akhir.
Mengambil detail tempat untuk tempat yang dipilih dan menampilkan penanda.
Menggunakan slotting kontrol untuk menyusun bertingkat elemen UI dalam elemen gmp-map.

TypeScript

const mapElement = document.querySelector('gmp-map')!;
let innerMap: google.maps.Map;
let marker: google.maps.marker.AdvancedMarkerElement;
const titleElement = document.querySelector<HTMLElement>('.title')!;
const resultsContainerElement = document.querySelector('.results')!;
const inputElement = document.querySelector('input')!;
const tokenStatusElement = document.querySelector('.token-status')!;
let newestRequestId = 0;
let tokenCount = 0;

// Create an initial request body.
const request: google.maps.places.AutocompleteRequest = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};

async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Update request center and bounds when the map bounds change.
    innerMap.addListener('bounds_changed', () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

    inputElement.addEventListener('input', makeAutocompleteRequest);
}

async function makeAutocompleteRequest(inputEvent: Event) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;

    const { AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    if (!(inputEvent.target as HTMLInputElement)?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }

    // Add the latest char sequence to the request.
    request.input = (inputEvent.target as HTMLInputElement).value;

    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId) return;

    titleElement.innerText = `Place predictions for "${request.input}"`;

    // Clear the list first.
    resultsContainerElement.replaceChildren();

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        if (!placePrediction) {
            continue;
        }

        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            void onPlaceSelected(placePrediction.toPlace());
        });

        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');

        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place: google.maps.places.Place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });

    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';

    await refreshToken();

    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }

    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}

// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } =
        await google.maps.importLibrary('places');

    // Increment the token counter.
    tokenCount++;

    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}

void init();index.ts

JavaScript

const mapElement = document.querySelector('gmp-map');
let innerMap;
let marker;
const titleElement = document.querySelector('.title');
const resultsContainerElement = document.querySelector('.results');
const inputElement = document.querySelector('input');
const tokenStatusElement = document.querySelector('.token-status');
let newestRequestId = 0;
let tokenCount = 0;

// Create an initial request body.
const request = {
    input: '',
    includedPrimaryTypes: [
        'restaurant',
        'cafe',
        'museum',
        'park',
        'botanical_garden',
    ],
};

async function init() {
    await google.maps.importLibrary('maps');
    innerMap = mapElement.innerMap;
    innerMap.setOptions({
        mapTypeControl: false,
    });

    // Update request center and bounds when the map bounds change.
    innerMap.addListener('bounds_changed', () => {
        request.locationRestriction = innerMap.getBounds();
        request.origin = innerMap.getCenter();
    });

    inputElement.addEventListener('input', makeAutocompleteRequest);
}

async function makeAutocompleteRequest(inputEvent) {
    // To avoid race conditions, store the request ID and compare after the request.
    const requestId = ++newestRequestId;

    const { AutocompleteSuggestion } =
        await google.maps.importLibrary('places');

    if (!inputEvent.target?.value) {
        titleElement.textContent = '';
        resultsContainerElement.replaceChildren();
        return;
    }

    // Add the latest char sequence to the request.
    request.input = inputEvent.target.value;

    // Fetch autocomplete suggestions and show them in a list.
    const { suggestions } =
        await AutocompleteSuggestion.fetchAutocompleteSuggestions(request);

    // If the request has been superseded by a newer request, do not render the output.
    if (requestId !== newestRequestId) return;

    titleElement.innerText = `Place predictions for "${request.input}"`;

    // Clear the list first.
    resultsContainerElement.replaceChildren();

    for (const suggestion of suggestions) {
        const placePrediction = suggestion.placePrediction;

        if (!placePrediction) {
            continue;
        }

        // Create a link for the place, add an event handler to fetch the place.
        // We are using a button element to take advantage of its a11y capabilities.
        const placeButton = document.createElement('button');
        placeButton.addEventListener('click', () => {
            void onPlaceSelected(placePrediction.toPlace());
        });

        placeButton.textContent = placePrediction.text.toString();
        placeButton.classList.add('place-button');

        // Create a new list item element.
        const li = document.createElement('li');
        li.appendChild(placeButton);
        resultsContainerElement.appendChild(li);
    }
}

// Event handler for clicking on a suggested place.
async function onPlaceSelected(place) {
    const { AdvancedMarkerElement } = await google.maps.importLibrary('marker');

    await place.fetchFields({
        fields: ['displayName', 'formattedAddress', 'location'],
    });

    resultsContainerElement.textContent = `${place.displayName}: ${place.formattedAddress}`;
    titleElement.textContent = 'Selected Place:';
    inputElement.value = '';

    await refreshToken();

    // Remove the previous marker, if it exists.
    if (marker) {
        marker.remove();
    }

    // Create a new marker.
    marker = new AdvancedMarkerElement({
        map: innerMap,
        position: place.location,
        title: place.displayName,
    });

    // Center the map on the selected place.
    if (place.location) {
        innerMap.setCenter(place.location);
        innerMap.setZoom(15);
    }
}

// Helper function to refresh the session token.
async function refreshToken() {
    const { AutocompleteSessionToken } =
        await google.maps.importLibrary('places');

    // Increment the token counter.
    tokenCount++;

    // Create a new session token and add it to the request.
    request.sessionToken = new AutocompleteSessionToken();
    tokenStatusElement.textContent = `Session token count: ${tokenCount}`;
}

void init();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-button {
    height: 3rem;
    width: 100%;
    background-color: transparent;
    text-align: left;
    border: none;
    cursor: pointer;
}

.place-button:focus-visible {
    outline: 2px solid #0056b3;
    border-radius: 2px;
}

.input {
    width: 300px;
    font-size: small;
    margin-bottom: 1rem;
}

/* Styles for the floating panel */
.controls {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-family: sans-serif;
    font-size: small;
    margin: 12px;
    padding: 1rem;
}

.title {
    font-weight: bold;
    margin-top: 1rem;
    margin-bottom: 0.5rem;
}

.results {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.results li:not(:last-child) {
    border-bottom: 1px solid #ddd;
}

.results li:hover {
    background-color: #eee;
}
style.css

HTML

<html>
    <head>
        <title>Place Autocomplete Data API Session</title>

        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script type="module" src="./index.js"></script>
        <script>
            // prettier-ignore
            (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: "GOOGLE_MAPS_API_KEY"
            });
        </script>
    </head>
    <body>
        <gmp-map center="37.7893, -122.4039" zoom="12" map-id="DEMO_MAP_ID">
            <div class="controls" slot="control-inline-start-block-start">
                <input
                    type="text"
                    class="input"
                    placeholder="Search for a place..."
                    autocomplete="off" /><!-- Turn off the input's own autocomplete (not supported by all browsers).-->
                <div class="token-status"></div>
                <div class="title"></div>
                <ol class="results"></ol>
            </div>
        </gmp-map>
    </body>
</html>index.html

Pengoptimalan Autocomplete (New)

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

Berikut ini beberapa pedoman umum:

Cara tercepat untuk membuat antarmuka pengguna yang berfungsi baik adalah dengan menggunakan widget Autocomplete (New) Maps JavaScript API, widget Autocomplete (New) Places SDK for Android, atau widget Autocomplete (New) Places SDK for iOS.
Pahami kolom data Autocomplete (New) 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 (New), gunakan mask kolom dalam widget Place Details (New) dan Autocomplete (New) agar hanya menampilkan kolom data Autocomplete (New) yang Anda butuhkan.

Pengoptimalan biaya lanjutan

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

Jika Anda hanya memerlukan lintang dan bujur atau alamat tempat yang dipilih pengguna, Geocoding API akan mengirimkan informasi ini dengan biaya yang lebih murah daripada panggilan Place Details (New).
Jika pengguna memilih prediksi pelengkapan otomatis dalam rata-rata empat permintaan prediksi Autocomplete (New) atau kurang, harga per permintaan dapat lebih hemat biaya daripada harga per sesi.

Untuk mendapatkan bantuan dalam memilih penerapan Autocomplete (New) 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 (New) berbasis sesi dengan Place Details (New).
Karena aplikasi Anda memerlukan Place Details (New), seperti nama tempat, status bisnis, atau jam buka, penerapan Autocomplete (New) Anda harus menggunakan token sesi (secara terprogram atau terintegrasi ke dalam widget JavaScript, Android, atau iOS) per sesi ditambah SKU Places yang berlaku, bergantung pada kolom data tempat yang Anda minta.¹

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 (New) yang Anda butuhkan.

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

ID tempat dari respons Autocomplete (Baru)
Token sesi yang digunakan dalam permintaan Autocomplete (Baru)
Parameter fields yang menentukan kolom data Autocomplete (Baru) yang Anda perlukan

Tidak, hanya memerlukan alamat dan lokasi

Geocoding API dapat menjadi opsi yang lebih hemat biaya daripada Place Details (New) untuk aplikasi Anda, bergantung pada performa penggunaan Autocomplete (New). Efisiensi Autocomplete (New) 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 (New) di aplikasi Anda.

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

Ya

Terapkan Autocomplete (New) 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 Requests ditambah panggilan Geocoding API tentang prediksi tempat yang dipilih lebih murah daripada biaya per sesi Autocomplete (New) per sesi.¹

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

Tidak

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

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

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

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

Jika permintaan yang tertunda dapat menghasilkan permintaan terprogram rata-rata di bawah empat, Anda dapat mengikuti panduan ini untuk penerapan Autocomplete (New) 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.

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 Autocomplete (New) Anda. Preferensi bahasa tidak diperlukan dengan widget karena widget tersebut memilih preferensi bahasa dari browser atau perangkat seluler pengguna.
Jika Autocomplete (New) disertai sebuah peta, Anda dapat membiaskan lokasi berdasarkan area pandang peta.
Jika pengguna tidak memilih salah satu prediksi Autocomplete (New), 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 (New). Jika hasil hanya diharapkan di wilayah tertentu, gunakan pembiasan lokasi.
Skenario lain saat Anda sebaiknya beralih kembali ke Geocoding API mencakup:
- Pengguna yang memasukkan alamat sub-premis, 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.

Pembiasan lokasi

Biasakan hasil ke area yang ditentukan dengan meneruskan parameter location dan parameter radius. Tindakan ini akan menginstruksikan Autocomplete (New) untuk memprioritaskan menampilkan hasil dalam area yang ditentukan. Hasil di luar area yang didefinisikan mungkin tetap ditampilkan. Anda dapat menggunakan parameter includedRegionCodes untuk memfilter hasil agar hanya menampilkan tempat dalam negara yang ditentukan.

Peringatan: Jika radius tidak diberikan, parameter location akan diabaikan.

Hasil tempat usaha umumnya tidak memiliki peringkat yang cukup tinggi untuk ditampilkan dalam hasil saat area penelusuran luas. Jika ingin tempat usaha muncul dalam hasil campuran tempat usaha/geocode, Anda dapat menentukan radius yang lebih kecil. Atau, gunakan types=establishment untuk membatasi hasil hanya pada bangunan.

Pembatasan lokasi

Batasi hasil ke area yang ditentukan dengan meneruskan parameter locationRestriction.

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

Place Autocomplete Data API Tetap teratur dengan koleksi Simpan dan kategorikan konten berdasarkan preferensi Anda.

Permintaan Pelengkapan Otomatis

Membatasi prediksi pelengkapan otomatis

Mendapatkan detail tempat

Token sesi

Rekomendasi token sesi:

Contoh

Kode contoh lengkap

Prediksi Place Autocomplete

TypeScript

JavaScript

CSS

HTML

Place Autocomplete type-ahead dengan sesi

TypeScript

JavaScript

CSS

HTML

Pengoptimalan Autocomplete (New)

Praktik terbaik pengoptimalan biaya

Pengoptimalan biaya dasar

Pengoptimalan biaya lanjutan

Ya, memerlukan informasi lebih detail

Tidak, hanya memerlukan alamat dan lokasi

Ya

Tidak

Praktik terbaik performa

Pembiasan lokasi

Pembatasan lokasi

Place Autocomplete Data API