Penampil Lingkungan Permukiman

Dalam contoh ini, kami menambahkan kotak penelusuran Place Autocomplete untuk alamat agar pengguna dapat memasukkan alamat dan mengevaluasi fasilitas terdekat. Untuk pengguna perumahan, kami menetapkan placeTypePreferences ke jenis yang umum dikaitkan dengan kehidupan sehari-hari seseorang. Alamat dalam contoh ini dibatasi untuk Amerika Serikat.

Memahami kode

Menyesuaikan frekuensi jenis tempat

Saat menentukan jenis tempat untuk ditampilkan oleh Library Konteks Lokal, Anda dapat menetapkan bobot relatif untuk setiap properti menggunakan atribut weight (jenis dengan bobot relatif yang lebih tinggi akan lebih sering muncul). Contoh ini menetapkan frekuensi taman dan sekolah yang lebih tinggi jika tersedia.

TypeScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

JavaScript

placeTypePreferences: [
  { type: "bakery", weight: 1 },
  { type: "bank", weight: 1 },
  { type: "cafe", weight: 2 },
  { type: "department_store", weight: 1 },
  { type: "drugstore", weight: 1 },
  { type: "park", weight: 3 },
  { type: "restaurant", weight: 2 },
  { type: "primary_school", weight: 3 },
  { type: "secondary_school", weight: 3 },
  { type: "supermarket", weight: 2 },
],

Place Autocomplete

Untuk menggunakan layanan Place Autocomplete, Anda harus memuat Places Library, Maps JavaScript API terlebih dahulu. Dokumentasi Autocomplete menjelaskan semua parameter yang tersedia untuk menyesuaikan perilaku Place Autocomplete seperti memfilter prediksi berdasarkan geografi atau jenis tempat.

  1. Aktifkan Places API untuk project Anda.
  2. Selain Library Konteks Lokal, muatkan Places Library, JavaScript API.

<script async
    src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=localContext,places&v=beta&callback=initMap">
</script>

  1. Ikuti dokumentasi Autocomplete dan contoh kode untuk mempelajari cara menambahkan kotak penelusuran Place Autocomplete ke situs atau peta Anda. Dalam contoh ini, baris yang relevan adalah:

TypeScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input")! as HTMLInputElement;
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

JavaScript

// Build and add the Autocomplete search bar
const input = document.getElementById("input");
const options = {
  types: ["address"],
  componentRestrictions: {
    country: "us",
  },
  fields: ["address_components", "geometry", "name"],
};
const autocomplete = new google.maps.places.Autocomplete(input, options);

Mencoba Contoh