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

Desarrolladores del Espacio Económico Europeo (EEE)

Las opiniones sobre 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 sobre lugares que se usan en la clase Place (nueva) y PlacesService (heredada), y se proporcionan algunos fragmentos de código para comparar.

  • PlacesService (legado) devuelve 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) devuelve un array de instancias de Review como parte de una solicitud de fetchFields() si el campo reviews se especifica 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 (heredado) 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 una verificación de estado. Se puede usar el control de errores estándar. Obtén más información.
Se debe crear una instancia de PlacesService con un mapa o un elemento div. Place se puede crear una instancia donde sea necesario, sin una referencia a un mapa o elemento de página.
PlaceReview devuelve los datos de atribución de la revisión con los campos author_name, author_url y profile_photo_url. Review devuelve 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 sobre lugares en la clase 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)

El siguiente fragmento llama al método fetchFields() para solicitar detalles del lugar, incluidas las opiniones, y 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,
});