Bermigrasi ke Foto Tempat baru

Developer Wilayah Ekonomi Eropa (EEA)

Foto tempat memungkinkan Anda menambahkan konten fotografi berkualitas tinggi ke halaman web Anda. Halaman ini menjelaskan perbedaan antara fitur foto tempat di kelas Place (baru) dan PlacesService (lama), serta memberikan beberapa cuplikan kode untuk perbandingan.

  • PlacesService (lama) menampilkan array hingga 10 objek PlacePhoto sebagai bagian dari objek PlaceResult untuk permintaan getDetails() jika kolom photos ditentukan dalam permintaan. Dalam kasus textSearch() dan nearbySearch(), foto tempat pertama ditampilkan secara default jika tersedia.
  • Class Place menampilkan array hingga 10 objek Photo sebagai bagian dari permintaan fetchFields() jika kolom photos ditentukan dalam permintaan.

Tabel berikut mencantumkan beberapa perbedaan utama dalam penggunaan foto tempat antara kelas Place dan PlacesService:

PlacesService (Lama) Place (Baru)
Antarmuka PlacePhoto Class Photo
PlacePhoto menampilkan html_attributions sebagai string. Photo menampilkan instance AuthorAttribution.
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.
PlacesService harus dibuat instance-nya menggunakan peta atau elemen div. Place dapat di-instansiasi di mana pun diperlukan, tanpa referensi ke peta atau elemen halaman.

Perbandingan kode

Bagian ini membandingkan kode untuk foto tempat guna menggambarkan perbedaan antara Places Service dan class Place. Cuplikan kode menunjukkan kode yang diperlukan untuk meminta foto tempat di setiap API masing-masing.

Layanan Places (lama)

Cuplikan berikut menunjukkan cara menampilkan foto menggunakan PlacesService, dan menampilkan hasil foto pertama di halaman. Dalam contoh ini, permintaan detail tempat menentukan ID tempat, beserta kolom name dan photos. Foto pertama kemudian ditampilkan di halaman setelah memeriksa status layanan. Saat membuat instance PlacesService, peta atau elemen div harus ditentukan; karena contoh ini tidak menampilkan peta, elemen div digunakan.

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

Atribusi penulis di PlacesService

PlacesService menampilkan atribusi penulis yang diperlukan sebagai string html_attributions yang berisi URL yang mengarah ke halaman profil Google penulis. Cuplikan berikut menunjukkan pengambilan data atribusi untuk hasil foto pertama.

let attributionUrl = place.photos[0].html_attributions;

Pelajari lebih lanjut

Class tempat (baru)

Cuplikan berikut menunjukkan penggunaan metode fetchFields() untuk menampilkan detail tempat, termasuk nama tampilan dan foto tempat. Pertama, objek Place baru di-instantiate menggunakan ID tempat, diikuti dengan panggilan ke fetchFields() dengan kolom displayName dan photos yang ditentukan. Foto tempat pertama kemudian ditampilkan di halaman. Tidak perlu memeriksa status layanan saat menggunakan class Place, karena hal ini ditangani secara otomatis.

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

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

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Atribusi penulis di class Place

Class Place menampilkan atribusi penulis sebagai instance AuthorAttribution termasuk nama penulis, URI untuk halaman profil Google penulis, dan URI untuk foto profil penulis. Cuplikan berikut menunjukkan pengambilan data atribusi untuk hasil foto pertama.

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

Pelajari lebih lanjut