Bermigrasi ke Place Details baru

Places API dapat menampilkan informasi detail tentang tempat tertentu. Halaman ini menjelaskan perbedaan antara detail tempat seperti yang digunakan di 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 diperlukan pemeriksaan status, dapat menggunakan penanganan error standar.
Kolom data tempat diformat menggunakan snake case. Kolom data tempat diformat menggunakan camel case.
Dibatasi untuk kumpulan tetap jenis tempat dan kolom data tempat. Memberikan pilihan yang diperluas dari jenis tempat dan kolom data tempat yang diperbarui secara berkala.

Perbandingan kode

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

Layanan Places (Lama)

Cuplikan kode ringkas berikut menunjukkan pembuatan permintaan detail tempat menggunakan PlacesService. Permintaan menggunakan callback, dan menyertakan pemeriksaan kondisional 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