Bermigrasi ke Ulasan Tempat baru

Developer Wilayah Ekonomi Eropa (EEA)

Ulasan tempat memungkinkan Anda menambahkan ulasan dan rating pengguna ke halaman web. Halaman ini menjelaskan perbedaan antara ulasan tempat yang digunakan dalam class Place (baru) dan PlacesService (lama), serta memberikan beberapa cuplikan kode untuk perbandingan.

  • PlacesService (lama) menampilkan array instance PlaceReview sebagai bagian dari objek PlaceResult untuk permintaan getDetails() jika kolom reviews ditentukan dalam permintaan.
  • Place (baru) menampilkan array instance Review sebagai bagian dari permintaan fetchFields() jika kolom reviews ditentukan dalam permintaan.

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

PlacesService (Lama) Place (Baru)
Antarmuka PlaceReview Class Review
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.
PlaceReview menampilkan data atribusi untuk ulasan menggunakan kolom author_name, author_url, dan profile_photo_url. Review menampilkan data atribusi untuk ulasan menggunakan instance AuthorAttribution.

Perbandingan kode

Bagian ini membandingkan kode untuk metode penelusuran teks guna mengilustrasikan perbedaan antara ulasan Tempat di kelas PlacesService lama dan kelas Place yang lebih baru.

Layanan Places (lama)

Cuplikan berikut memanggil getDetails() untuk meminta detail tempat termasuk ulasan, dan menampilkan hasil ulasan pertama di jendela info.

const request = {
  placeId: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  fields: ["name", "formatted_address", "geometry", "reviews"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].author_name;
      let authorUri = place.reviews[0].author_url;

      // Format the review using HTML.
      contentString =`
            <div id="title"><b>${place.name}</b></div>
            <div id="address">${place.formatted_address}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
      contentString = `No reviews were found for ${place.name}`;
    }

    const infowindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: place.displayName,
    });

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

    // Show the info window.
    infowindow.open({
      anchor: marker,
      map,
    });
  }
});

Class tempat (baru)

Cuplikan berikut memanggil metode fetchFields() untuk meminta detail tempat termasuk ulasan, dan menampilkan hasil ulasan pertama di jendela info.

// Use a place ID to create a new Place instance.
const place = new google.maps.places.Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});

// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString =`
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = `No reviews were found for ${place.displayName}`;
}

// Create an infowindow to display the review.
infoWindow = new google.maps.InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});

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

// Show the info window.
infoWindow.open({
  anchor: marker,
  map,
});