Bermigrasi ke Foto Tempat baru

Developer Wilayah Ekonomi Eropa (EEA)

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

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

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

PlacesService (Lama) Place (Baru)
PlacePhoto antarmuka Photo class
PlacePhoto menampilkan html_attributions sebagai string. Photo menampilkan instance AuthorAttribution.
Metode memerlukan penggunaan callback untuk menangani objek hasil dan google.maps.places.PlacesServiceStatus respons. 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 dibuat instance-nya di mana pun diperlukan, tanpa a referensi ke peta atau elemen halaman.

Perbandingan kode

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

Places service (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 html_attributions string yang berisi URL yang mengarah ke halaman profil Google penulis. Cuplikan berikut menunjukkan cara mengambil data atribusi untuk hasil foto pertama.

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

Pelajari lebih lanjut

Class Place (baru)

Cuplikan berikut menunjukkan cara menggunakan metode fetchFields() untuk menampilkan detail tempat, termasuk nama tampilan dan foto tempat. Pertama, objek Place baru dibuat instance-nya menggunakan ID tempat, diikuti dengan panggilan ke fetchFields() tempat kolom displayName dan photos ditentukan. Foto tempat pertama kemudian ditampilkan di halaman. Anda 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 yang mencakup nama penulis, URI untuk halaman profil Google penulis, dan URI untuk foto profil penulis. Cuplikan berikut menunjukkan cara mengambil 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