Cómo migrar a la nueva experiencia de Opiniones sobre lugares

Las opiniones de lugares te permiten agregar opiniones y calificaciones de los usuarios a tus páginas web. En esta página, se explican las diferencias entre las opiniones de lugares como se usan en la clase Place (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para compararlos.

  • PlacesService (heredado) muestra un array de instancias de PlaceReview como parte del objeto PlaceResult para cualquier solicitud de getDetails() si se especifica el campo reviews en la solicitud.
  • Place (nuevo) muestra un array de instancias de Review como parte de una solicitud fetchFields() si se especifica el campo reviews en la solicitud.

En la siguiente tabla, se enumeran algunas de las principales diferencias en el uso de las opiniones sobre lugares entre la clase Place y PlacesService:

PlacesService (heredada) Place (nuevo)
Interfaz de PlaceReview Clase Review
Los métodos requieren el uso de una devolución de llamada para controlar el objeto de resultados y la respuesta de google.maps.places.PlacesServiceStatus. Usa promesas y funciona de forma asíncrona.
Los métodos requieren una verificación de PlacesServiceStatus. No se requiere verificación de estado, se puede usar el manejo de errores estándar.
Se debe crear una instancia de PlacesService con un mapa o un elemento div. Se puede crear una instancia de Place donde sea necesario, sin una referencia a un mapa o elemento de página.
PlaceReview muestra los datos de atribución de la revisión con los campos author_name, author_url y profile_photo_url. Review muestra los datos de atribución de la opinión con una instancia de AuthorAttribution.

Comparación de código

En esta sección, se compara el código de los métodos de búsqueda de texto para ilustrar las diferencias entre las opiniones de Place en la PlacesService heredada y la clase Place más reciente.

Servicio Places (heredado)

El siguiente fragmento llama a getDetails() para solicitar detalles del lugar, incluidas las opiniones, y muestra el primer resultado de la opinión en una ventana de información.

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,
    });
  }
});

Clase Place (nueva)

En el siguiente fragmento, se llama al método fetchFields() para solicitar detalles del lugar, incluidas las opiniones, y se muestra el primer resultado de la opinión en una ventana de información.

// 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,
});