Bermigrasi ke Place Details baru

Developer Wilayah Ekonomi Eropa (EEA)

Places API dapat menampilkan informasi mendetail tentang tempat tertentu. Halaman ini menjelaskan perbedaan antara detail tempat yang digunakan dalam class Place (baru) dan PlacesService (lama), serta memberikan beberapa cuplikan kode untuk perbandingan. Tabel berikut mencantumkan beberapa perbedaan utama dalam penggunaan detail tempat antara class Place dan PlacesService:

PlacesService (Lama) Place (Baru)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
Metode memerlukan penggunaan callback untuk menangani objek hasil dan respons google.maps.places.PlacesServiceStatus. Menggunakan Promise, dan berfungsi secara asinkron.
Metode memerlukan pemeriksaan PlacesServiceStatus. Tidak ada pemeriksaan status yang diperlukan, dapat menggunakan penanganan error standar. Pelajari lebih lanjut.
Kolom data tempat diformat menggunakan snake case. Kolom data tempat diformat menggunakan camel case.
Terbatas pada kumpulan tetap jenis tempat dan kolom data tempat. Menyediakan pilihan yang lebih luas untuk jenis tempat yang diperbarui secara berkala dan kolom data tempat.

Perbandingan kode

Bagian ini membandingkan dua bagian kode serupa untuk menggambarkan perbedaan antara Places Service dan class Place. Cuplikan kode menampilkan kode yang diperlukan di setiap API masing-masing untuk membuat permintaan detail tempat, lalu menggunakan data tempat yang dihasilkan untuk menambahkan penanda ke peta.

Layanan Places (Lama)

Cuplikan kode ringkas berikut menunjukkan cara membuat permintaan detail tempat menggunakan PlacesService. Permintaan menggunakan callback, dan menyertakan pemeriksaan bersyarat yang diperlukan pada PlacesServiceStatus. Kolom data tempat yang diperlukan ditentukan dalam isi permintaan.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

      // Add a marker for the place.
      const marker = new google.maps.Marker({
        map,
        position: place.geometry.location,
        title: place.name,
      });
    }
  });
}

Pelajari lebih lanjut

Class tempat (Baru)

Cuplikan kode ringkas berikut menunjukkan cara membuat permintaan detail tempat menggunakan class Place. Permintaan bersifat asinkron, dan tidak menyertakan pemeriksaan status (penanganan error standar dapat digunakan). ID tempat digunakan untuk membuat instance Place baru, yang digunakan untuk membuat permintaan (fetchFields()). Kolom data tempat yang diperlukan tidak diteruskan hingga fetchFields() dipanggil, yang memberikan fleksibilitas yang lebih besar. Karena metode fetchFields() menggunakan operator await, metode ini hanya dapat digunakan di dalam fungsi async.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

  // Add an Advanced Marker.
  const marker = new google.maps.marker.AdvancedMarkerElement({
    map,
    position: place.location,
    title: place.displayName,
  });
}

Pelajari lebih lanjut