Anda sudah siap!

Untuk mulai mengembangkan, masuklah ke dokumentasi developer kami.

Aktifkan Google Maps JavaScript API

Untuk membantu Anda memulai, kami akan memandu Anda melalui Google Developers Console untuk melakukan beberapa hal terlebih dahulu:

  1. Buat atau pilih sebuah proyek
  2. Aktifkan Google Maps JavaScript API dan layanan terkait
  3. Buat kunci yang sesuai
Lanjutkan

Autocomplete untuk Alamat dan Istilah Penelusuran

Pengantar

Pelengkapan otomatis adalah fitur pustaka Places dalam Google Maps JavaScript API. Anda bisa menggunakan pelengkapan otomatis untuk memberi aplikasi Anda perilaku prediksi penelusuran di bidang penelusuran Google Maps. Bila pengguna mulai mengetik alamat, pelengkapan otomatis akan mengisikan sisanya.

Memulai

Sebelum menggunakan pustaka Places di Google Maps JavaScript API, terlebih dahulu pastikan Google Places API Web Service telah diaktifkan di Google API Console, dalam proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API.

Untuk menampilkan daftar API yang telah diaktifkan:

  1. Masuklah ke Google API Console.
  2. Klik tombol Select a project, kemudian pilih proyek yang sama dengan yang Anda persiapkan untuk Google Maps JavaScript API dan klik Open.
  3. Dari daftar API di Dashboard, cari Google Places API Web Service.
  4. Jika sudah melihat API di dalam daftar, artinya Anda sudah siap. Jika API tidak dicantumkan, aktifkan:
    1. Di bagian atas laman, pilih ENABLE API untuk menampilkan tab Library. Atau, dari menu sisi kiri, pilih Library.
    2. Telusuri Google Places API Web Service, kemudian pilih dari daftar hasil.
    3. Pilih ENABLE. Bila proses selesai, Google Places API Web Service akan muncul dalam daftar API di Dashboard.

Memuat Pustaka

Layanan Places adalah pustaka mandiri, terpisah dari kode utama Maps JavaScript API. Untuk menggunakan fungsionalitas yang ada dalam pustaka ini, terlebih dahulu Anda harus memuatnya menggunakan parameter libraries di URL bootstrap Maps API:

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

Lihat Ringkasan Pustaka untuk informasi selengkapnya.

Kebijakan dan batas penggunaan

Kuota

Google Places API Web Service dan Place Autocomplete berbagi kuota penggunaan seperti dijelaskan dalam dokumentasi Batas Penggunaan untuk Google Places API Web Service. Batas penggunaan ini juga berlaku saat menggunakan Places Library in the Google Maps JavaScript API. Penggunaan harian dihitung sebagai gabungan jumlah permintaan sisi-klien dan sisi-server.

Kebijakan

Penggunaan layanan Places Library in the Google Maps JavaScript API harus sesuai dengan kebijakan yang dijelaskan untuk Google Places API Web Service.

Ringkasan kelas

API menawarkan dua tipe widget autocomplete, yang bisa Anda tambahkan melalui kelas Autocomplete dan SearchBox. Selain itu, Anda bisa menggunakan kelas AutocompleteService untuk mengambil hasil pelengkapan otomatis lewat program.

Di bawah ini adalah rangkuman kelas-kelas yang tersedia:

  • Autocomplete menambahkan bidang masukan teks ke laman web Anda, dan memantau pengisian karakter pada bidang tersebut. Saat pengguna memasukkan teks, pelengkapan otomatis akan mengembalikan prediksi tempat dalam bentuk daftar pilihan tarik-turun. Bila pengguna memilih tempat dari daftar tersebut, informasi tentang tempat akan dikembalikan ke objek autocomplete, dan bisa diambil oleh aplikasi Anda. Lihat detail di bawah ini.
  • SearchBox menambahkan bidang masukan teks ke laman web Anda, dengan cara yang hampir sama dengan Autocomplete. Perbedaannya adalah sebagai berikut:
    • Perbedaan utama ada pada hasil yang muncul dalam daftar pilihan. SearchBox menyediakan daftar prediksi tambahan, yang bisa menyertakan tempat (seperti didefinisikan oleh Google Places API) ditambah istilah penelusuran yang disarankan. Misalnya, jika pengguna memasukkan 'pizza in new', daftar pilihan mungkin menyertakan frasa 'pizza in New York, NY' serta nama-nama berbagai gerai pizza.
    • SearchBox menawarkan opsi yang lebih sedikit daripada Autocomplete untuk membatasi penelusuran. Pada yang pertama, Anda bisa mencondongkan penelusuran ke LatLngBounds yang diberikan. Pada yang selanjutnya, Anda bisa membatasi penelusuran ke negara tertentu dan tipe tempat tertentu, serta menyetel batasnya.
    Lihat detail di bawah ini.
  • Anda bisa membuat objek AutocompleteService untuk mengambil prediksi lewat program. Panggil getPlacePredictions() untuk mengambil tempat yang cocok, atau panggil getQueryPredictions() untuk mengambil tempat yang cocok ditambah istilah penelusuran yang disarankan. Catatan: AutocompleteService tidak menambahkan kontrol UI. Sebagai gantinya, metode di atas mengembalikan larik objek prediksi. Setiap objek prediksi berisi teks prediksi, serta informasi referensi dan detail tentang cara menyesuaikan hasilnya dengan masukan pengguna. Lihat detail di bawah ini.

Bagian selebihnya dari laman ini memberikan beberapa contoh kasus penggunaan, dan detail tentang penggunaan kelas-kelas di atas.

Cara menggunakan Autocomplete

Video ini menampilkan cara menggunakan Autocomplete, termasuk demo dan contoh kode.

Contoh: Autocomplete untuk formulir alamat

Apakah aplikasi Anda menyertakan suatu formulir alamat, seperti alamat pengiriman untuk pesanan online, alamat penagihan kartu kredit, atau formulir pemesanan taksi? Autocomplete bisa membantu pengguna memberikan detail.

Gambar 1 menampilkan bidang teks pelengkapan otomatis, dan daftar pilihan prediksi tempat yang disediakan saat pengguna memasukkan kueri penelusuran:

Bidang teks pelengkapan otomatis, dan daftar pilihan prediksi tempat yang disediakan saat pengguna memasukkan kueri penelusuran.
Gambar 1: Pengisian otomatis untuk bidang teks dan daftar pilihan

Bila pengguna memilih alamat dari daftar pilihan, aplikasi Anda akan bisa mengisikan formulir alamat:

Sebuah formulir alamat lengkap.
Gambar 2: Formulir alamat yang telah diisi

Lihat contoh formulir alamat bekerja: Tampilkan contoh (places-autocomplete-addressform.html).

Lanjutkan membaca untuk melihat cara menambahkan pelengkapan otomatis ke laman web Anda.

Contoh: Autocomplete untuk kontrol peta

Autocomplete berguna untuk meminta informasi dari pengguna sebagai bagian dari aplikasi peta, seperti yang ditampilkan dalam gambar 3:

Bidang teks pelengkapan otomatis menampilkan kueri penelusuran kota sebagian dan mencocokkan tempat.
Gambar 3: Pelengkapan otomatis untuk bidang teks dan daftar pilihan

Lihat cara kerjanya: Tampilkan contoh (places-autocomplete-hotelsearch.html).

Lanjutkan membaca untuk melihat cara menambahkan pelengkapan otomatis ke laman web Anda.

Menambahkan Autocomplete untuk tempat dan alamat

Autocomplete membuat suatu bidang masukan teks pada laman web Anda, memberikan prediksi tempat dalam UI daftar pilihan, dan mengembalikan detail tempat sebagai respons terhadap permintaan getPlace(). Setiap entri dalam daftar pilihan menunjukkan satu tempat (seperti yang didefinisikan oleh Google Places API).

Konstruktor Autocomplete membutuhkan dua argumen:

  • Elemen input HTML bertipe text. Ini adalah bidang masukan yang akan dipantau oleh layanan pelengkapan otomatis dan untuk melekatkan hasilnya.
  • Argumen options, yang bisa berisi properti berikut:
    • Larik types menetapkan tipe eksplisit atau kumpulan tipe, sebagaimana tercantum dalam tipe yang didukung di bawah ini. Jika tidak ada yang ditetapkan, semua tipe akan dikembalikan. Umumnya hanya satu tipe yang diperbolehkan. Pengecualiannya adalah Anda bisa dengan aman mencampur tipe geocode dan establishment, namun perhatikan, hal ini sama efeknya dengan tidak menetapkan tipe. Tipe yang didukung adalah:
      • geocode menginstruksikan layanan Place agar hanya mengembalikan hasil geocoding, bukan hasil bisnis.
      • address menginstruksikan layanan Places agar hanya mengembalikan hasil geocoding dengan alamat yang akurat.
      • establishment menginstruksikan layanan Places agar hanya mengembalikan hasil bisnis.
      • kumpulan tipe (regions) menginstruksikan layanan Places agar mengembalikan hasil apa saja yang cocok dengan tipe berikut:
        • locality
        • sublocality
        • postal_code
        • country
        • administrative_area1
        • administrative_area2
      • kumpulan tipe (cities) menginstruksikan layanan Places agar mengembalikan hasil yang cocok dengan locality atau administrative_area3.
    • bounds adalah objek google.maps.LatLngBounds yang menetapkan lokasi daerah untuk menelusuri tempat. Hasilnya dicondongkan terhadap, namun tidak terbatas pada, tempat yang berada dalam batas ini.
    • componentRestrictions bisa digunakan untuk membatasi hasil ke kelompok tertentu. Saat ini, Anda bisa menggunakan componentRestrictions untuk memfilter berdasar negara. Negara harus diteruskan berupa dua karakter kode negara yang kompatibel dengan ISO 3166-1 Alpha-2.
    • placeIdOnly bisa digunakan untuk memerintahkan widget Autocomplete agar hanya mengambil ID Tempat. Setelah memanggil getPlace() di objek Autocomplete, PlaceResult yang menjadi tersedia hanya akan memiliki properti place id, types, dan name yang disetel. Anda bisa menggunakan ID tempat yang dikembalikan dengan panggilan ke layanan Places, Geocoding, Directions, atau Distance Matrix.

Menyetel kecondongan dan batas area penelusuran untuk Autocomplete

Anda bisa mencondongkan hasil pelengkapan otomatis untuk mendukung suatu perkiraan lokasi atau area, dengan cara berikut:

  • Menyetel batas saat pembuatan objek Autocomplete.
  • Mengubah batas yang ada pada Autocomplete.
  • Menetapkan batas ke viewport peta.
  • Membatasi penelusuran pada negara tertentu.

Detailnya dijelaskan pada bagian di bawah ini.

Menyetel batas saat pembuatan objek Autocomplete

Contoh di bawah ini menggunakan opsi bounds dan types untuk meminta bisnis yang bertipe 'tempat usaha', dengan lebih memilihnya dalam area geografis yang ditetapkan.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');
var options = {
  bounds: defaultBounds,
  types: ['establishment']
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Mengubah batas yang ada pada Autocomplete

Panggil setBounds() untuk mengubah area penelusuran pada Autocomplete yang ada.

// Bias the autocomplete object to the user's geographical location,
// as supplied by the browser's 'navigator.geolocation' object.
function geolocate() {
  if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      var geolocation = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      };
      var circle = new google.maps.Circle({
        center: geolocation,
        radius: position.coords.accuracy
      });
      autocomplete.setBounds(circle.getBounds());
    });
  }
}

Tampilkan contoh (places-autocomplete-addressform.html).

Menetapkan batas ke viewport peta

Gunakan bindTo() untuk mencondongkan hasilnya ke viewport peta, meskipun saat terjadi perubahan viewport.

autocomplete.bindTo('bounds', map);

Tampilkan contoh (places-autocomplete.html).

Membatasi penelusuran pada negara tertentu

Gunakan opsi componentRestrictions untuk membatasi penelusuran pelengkapan otomatis pada negara tertentu. Kode berikut membatasi hasil pada kota-kota di Prancis.

var input = document.getElementById('searchTextField');
var options = {
  types: ['(cities)'],
  componentRestrictions: {country: 'fr'}
};

autocomplete = new google.maps.places.Autocomplete(input, options);

Contoh berikut memungkinkan pengguna memilih sebuah negara, kemudian membatasi hasil pelengkapan otomatis pada negara itu.

// Set the country restriction based on user input.
// Also center and zoom the map on the given country.
function setAutocompleteCountry() {
  var country = document.getElementById('country').value;
  if (country == 'all') {
    autocomplete.setComponentRestrictions([]);
    map.setCenter({lat: 15, lng: 0});
    map.setZoom(2);
  } else {
    autocomplete.setComponentRestrictions({'country': country});
    map.setCenter(countries[country].center);
    map.setZoom(countries[country].zoom);
  }
  clearResults();
  clearMarkers();
}

Tampilkan contoh (places-autocomplete-hotelsearch.html).

Menyesuaikan teks placeholder untuk Autocomplete

Secara default, bidang teks yang dibuat oleh layanan pelengkapan otomatis berisi teks placeholder standar. Untuk memodifikasi teks, setel atribut placeholder pada elemen input:

<input id="searchTextField" type="text" size="50" placeholder="Anything you want!">

Catatan: Teks placeholder default dilokalkan secara otomatis. Jika Anda menetapkan nilai placeholder sendiri, Anda harus menangani pelokalan nilai tersebut dalam aplikasi Anda. Untuk informasi tentang cara Google Maps JavaScript API memilih bahasa yang akan digunakan, bacalah dokumentasi mengenai pelokalan.

Mendapatkan informasi tempat dari Autocomplete

Bila pengguna memilih sebuah tempat dari prediksi yang dilekatkan pada bidang teks pelengkapan otomatis, layanan akan memicu kejadian place_changed. Anda bisa memanggil getPlace() pada objek Autocomplete, untuk mengambil objek PlaceResult.

Secara default, pelengkapan otomatis akan memberi Anda alamat lengkap dalam satu baris teks. Formulir alamat perlu mendapatkan alamat dalam format terstruktur. Anda bisa menggunakan Autocomplete.getPlace() untuk mengambil detail lengkap setiap prediksi pelengkapan otomatis, termasuk alamat terstruktur.

Jika Anda menggunakan opsi placeIdOnly, objek Autocomplete tidak akan mendapatkan detail tempat, karena objek PlaceResult hanya memiliki properti place_id, types, dan name yang disetel.

Untuk mendapatkan detail tempat, ambil objek PlaceResult dengan memanggil getPlace() di objek Autocomplete saat Anda mendapatkan kejadian place_changed. Kemudian Anda bisa menggunakan geocoding untuk mendapatkan koordinat lokasi, atau layanan Places untuk mendapatkan informasi selengkapnya tentang tempat yang dipilih.

Untuk informasi selengkapnya tentang objek PlaceResult, lihat dokumentasi pada Hasil Place Details.

Contoh berikut menggunakan pelengkapan otomatis untuk mengisi bidang-bidang dalam formulir alamat.

function fillInAddress() {
  // Get the place details from the autocomplete object.
  var place = autocomplete.getPlace();

  for (var component in componentForm) {
    document.getElementById(component).value = '';
    document.getElementById(component).disabled = false;
  }

  // Get each component of the address from the place details
  // and fill the corresponding field on the form.
  for (var i = 0; i < place.address_components.length; i++) {
    var addressType = place.address_components[i].types[0];
    if (componentForm[addressType]) {
      var val = place.address_components[i][componentForm[addressType]];
      document.getElementById(addressType).value = val;
    }
  }
}

Tampilkan contoh (places-autocomplete-addressform.html).

SearchBox memungkinkan pengguna melakukan penelusuran geografis berbasis teks, seperti 'pizza in New York' atau 'shoe stores near robson street'. Anda bisa melekatkan SearchBox ke bidang teks dan, saat teks dimasukkan, layanan akan mengembalikan prediksi dalam bentuk daftar pilihan tarik-turun.

SearchBox menyediakan daftar prediksi tambahan, yang bisa menyertakan tempat (seperti didefinisikan oleh Google Places API) ditambah istilah penelusuran yang disarankan. Misalnya, jika pengguna memasukkan 'pizza in new', daftar pilihan mungkin menyertakan frasa 'pizza in New York, NY' serta nama-nama berbagai gerai pizza. Bila pengguna memilih tempat dari daftar tersebut, informasi tentang tempat akan dikembalikan ke objek SearchBox, dan bisa diambil oleh aplikasi Anda.

Konstruktor SearchBox memerlukan dua argumen:

  • Elemen input HTML bertipe text. Ini adalah bidang masukan yang akan dipantau oleh layanan SearchBox dan untuk melekatkan hasilnya.
  • Argumen options, yang bisa berisi properti bounds: bounds adalah objek google.maps.LatLngBounds yang menetapkan area menelusuri tempat. Hasilnya dicondongkan terhadap, namun tidak terbatas pada, tempat yang berada dalam batas ini.

Kode berikut menggunakan parameter bounds untuk mencondongkan hasil ke tempat-tempat yang ada dalam area geografis tertentu, yang ditetapkan melalui koordinat garis lintang/garis bujur.

var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(-33.8902, 151.1759),
  new google.maps.LatLng(-33.8474, 151.2631));

var input = document.getElementById('searchTextField');

var searchBox = new google.maps.places.SearchBox(input, {
  bounds: defaultBounds
});

Mengubah area penelusuran untuk SearchBox

Untuk mengubah area penelusuran bagi SearchBox yang ada, panggil setBounds() pada objek SearchBox dan teruskan objek LatLngBounds yang relevan.

Tampilkan contoh (places-searchbox.html).

Mendapatkan informasi SearchBox

Bila pengguna memilih sebuah item dari prediksi yang dilekatkan ke kotak penelusuran, layanan akan memicu kejadian places_changed. Anda bisa memanggil getPlaces() pada objek SearchBox, untuk mengambil larik berisi beberapa prediksi, yang masing-masing merupakan objek PlaceResult.

Untuk informasi selengkapnya tentang objek PlaceResult, lihat dokumentasi pada Hasil Place Details.

// Listen for the event fired when the user selects a prediction and retrieve
// more details for that place.
searchBox.addListener('places_changed', function() {
  var places = searchBox.getPlaces();

  if (places.length == 0) {
    return;
  }

  // Clear out the old markers.
  markers.forEach(function(marker) {
    marker.setMap(null);
  });
  markers = [];

  // For each place, get the icon, name and location.
  var bounds = new google.maps.LatLngBounds();
  places.forEach(function(place) {
    if (!place.geometry) {
      console.log("Returned place contains no geometry");
      return;
    }
    var icon = {
      url: place.icon,
      size: new google.maps.Size(71, 71),
      origin: new google.maps.Point(0, 0),
      anchor: new google.maps.Point(17, 34),
      scaledSize: new google.maps.Size(25, 25)
    };

    // Create a marker for each place.
    markers.push(new google.maps.Marker({
      map: map,
      icon: icon,
      title: place.name,
      position: place.geometry.location
    }));

    if (place.geometry.viewport) {
      // Only geocodes have viewport.
      bounds.union(place.geometry.viewport);
    } else {
      bounds.extend(place.geometry.location);
    }
  });
  map.fitBounds(bounds);
});

Tampilkan contoh (places-searchbox.html).

Menata gaya widget Autocomplete dan SearchBox

Secara default, elemen UI yang disediakan oleh Autocomplete dan SearchBox telah ditata untuk dimasukkan ke peta Google. Anda mungkin perlu menyesuaikan gaya dengan situs Anda sendiri. Tersedia kelas-kelas CSS berikut. Semua kelas yang tercantum di bawah ini berlaku untuk widget Autocomplete maupun SearchBox.

Sebuah ilustrasi grafis dari kelas CSS untuk widget Autocomplete dan SearchBox
Kelas CSS untuk widget Autocomplete dan SearchBox
Kelas CSS Keterangan
pac-container Elemen visual berisi daftar prediksi yang dikembalikan oleh layanan Place Autocomplete. Daftar ini muncul berupa daftar tarik-turun di bawah widget Autocomplete atau SearchBox.
pac-icon Ikon yang ditampilkan di sebelah kiri setiap item dalam daftar prediksi.
pac-item Item dalam daftar prediksi yang disediakan oleh widget Autocomplete atau SearchBox.
pac-item:hover Item saat pengguna menempatkan kursor mouse di atasnya.
pac-item-selected Item saat pengguna memilihnya melalui keyboard. Catatan: Item terpilih akan menjadi anggota kelas ini dan kelas pac-item.
pac-item-query Sebuah rentang dalam pac-item yang merupakan bagian utama prediksi. Untuk lokasi geografis, isinya adalah nama tempat, seperti 'Sydney', atau nama dan nomor jalan, seperti '10 King Street '. Untuk penelusuran berbasis teks seperti 'pizza in New York', isinya adalah teks lengkap dari kueri. Secara default, pac-item-query berwarna hitam. Jika ada teks tambahan dalam pac-item, itu berada di luar pac-item-query dan mewarisi gayanya dari pac-item. Secara default, warnanya abu-abu. Teks tambahan biasanya berupa alamat.
pac-matched Bagian dari prediksi yang dikembalikan sesuai dengan masukan pengguna. Secara default, teks yang cocok ini disorot dalam teks tebal. Perhatikan, teks yang cocok bisa di mana saja dalam pac-item. Ini belum tentu bagian dari pac-item-query, dan bisa saja sebagian dalam pac-item-query serta sebagian lagi dalam teks selebihnya di pac-item.

Mengambil prediksi dari layanan pelengkapan otomatis

Untuk mengambil prediksi lewat program, gunakan kelas AutocompleteService. AutocompleteService tidak menambahkan kontrol UI. Sebaliknya, ia mengembalikan larik objek prediksi, yang masing-masing berisi teks prediksi, informasi referensi, dan detail mengenai cara mencocokkan hasilnya dengan masukan pengguna. Hal ini berguna jika Anda ingin lebih mengontrol antarmuka pengguna dibandingkan yang ditawarkan oleh Autocomplete dan SearchBox seperti dijelaskan di atas.

AutocompleteService mengekspos metode berikut:

  • getPlacePredictions() mengembalikan prediksi tempat. Catatan: Sebuah 'tempat' bisa berupa tempat usaha, lokasi geografis, atau tempat menarik yang menonjol, sebagaimana didefinisikan oleh Places API.
  • getQueryPredictions() mengembalikan daftar prediksi tambahan, yang bisa menyertakan tempat (sebagaimana didefinisikan oleh Places API) ditambah istilah penelusuran yang disarankan. Misalnya, jika pengguna memasukkan 'pizza in new', daftar pilihan mungkin menyertakan frasa 'pizza in New York, NY' serta nama-nama berbagai gerai pizza.

Kedua metode di atas mengembalikan lima larik objek prediksi dengan bentuk berikut:

  • description adalah prediksi yang cocok.
  • id berisi identifier unik yang menunjukkan tempat ini. Identifier ini tidak boleh digunakan untuk mengambil informasi tentang tempat ini, namun bisa digunakan untuk mengkonsolidasikan data tentang tempat ini, dan untuk memverifikasi identitas tempat di semua penelusuran terpisah. Karena ID kadang-kadang bisa berubah, disarankan agar ID tempat yang tersimpan dibandingkan dengan ID yang dikembalikan dalam permintaan Details selanjutnya untuk tempat yang sama, dan diperbarui jika diperlukan. Catatan: id tidak digunakan lagi karena sudah ada place_id, seperti dijelaskan dalam pemberitahuan penghentian pada laman ini.
  • matched_substrings berisi set substring dalam keterangan yang cocok dengan elemen dalam masukan pengguna. Hal ini berguna untuk menyoroti substring tersebut dalam aplikasi Anda. Dalam banyak kasus, kueri akan muncul sebagai substring bidang keterangan.
    • length adalah panjang substring.
    • offset adalah offset karakter, yang diukur dari awal string keterangan, tempat substring yang cocok muncul.
  • place_id sebuah identifier tekstual yang secara unik mengidentifikasi tempat. Untuk mengambil informasi tentang tempat, teruskan identifier ini dalam bidang placeId pada permintaan Place Details. Ketahui selengkapnya tentang cara mereferensikan sebuah tempat dengan ID tempat.
  • reference berisi token yang bisa digunakan untuk kueri layanan Details di masa mendatang. Token ini mungkin berbeda dari referensi yang digunakan dalam permintaan ke layanan Details. Disarankan agar referensi tempat yang tersimpan diperbarui secara rutin. Meskipun token ini secara unik mengidentifikasi tempat, hal yang sebaliknya tidak berlaku: suatu tempat bisa memiliki banyak token referensi yang valid. Catatan: reference tidak digunakan lagi karena sudah ada place_id, seperti dijelaskan dalam pemberitahuan penghentian pada laman ini.
  • terms adalah larik yang berisi elemen query. Untuk sebuah tempat, setiap elemen biasanya membentuk bagian alamat.
    • offset adalah offset karakter, yang diukur dari awal string keterangan, tempat substring yang cocok muncul.
    • value adalah istilah untuk mencocokkan.

Contoh di bawah ini mengeksekusi permintaan prediksi kueri untuk frasa 'pizza near' dan menampilkan hasilnya dalam daftar.

// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}
<div id="right-panel">
  <p>Query suggestions for 'pizza near Syd':</p>
  <ul id="results"></ul>
</div>
/* 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;
}
#right-panel {
  font-family: 'Roboto','sans-serif';
  line-height: 30px;
  padding-left: 10px;
}

#right-panel select, #right-panel input {
  font-size: 15px;
}

#right-panel select {
  width: 100%;
}

#right-panel i {
  font-size: 12px;
}
<!-- Replace the value of the key parameter with your own API key. -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&libraries=places&callback=initService"
    async defer></script>
// This example retrieves autocomplete predictions programmatically from the
// autocomplete service, and displays them as an HTML list.

// This example requires the Places library. Include the libraries=places
// parameter when you first load the API. For example:
// <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places">

function initService() {
  var displaySuggestions = function(predictions, status) {
    if (status != google.maps.places.PlacesServiceStatus.OK) {
      alert(status);
      return;
    }

    predictions.forEach(function(prediction) {
      var li = document.createElement('li');
      li.appendChild(document.createTextNode(prediction.description));
      document.getElementById('results').appendChild(li);
    });
  };

  var service = new google.maps.places.AutocompleteService();
  service.getQueryPredictions({ input: 'pizza near Syd' }, displaySuggestions);
}

Tampilkan contoh (places-queryprediction.html).

Kirim masukan tentang...

Google Maps JavaScript API
Google Maps JavaScript API
Butuh bantuan? Kunjungi halaman dukungan kami.