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 seperti yang digunakan di class Place(baru) dan PlacesService (versi lama), serta memberikan beberapa cuplikan kode untuk perbandingan.

  • PlacesService (versi 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 (Versi Lama) Place (Baru)
PlaceReview antarmuka Review class
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.
PlaceReview menampilkan data atribusi untuk ulasan menggunakan author_name, author_url, dan profile_photo_url kolom. 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 PlacesService versi lama dan class Place yang lebih baru.

Layanan tempat (versi 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 fetchFields() metode 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,
});