Migrer vers la nouvelle interface des avis sur les lieux

Les avis sur les lieux vous permettent d'ajouter des avis et des notes d'utilisateurs à vos pages Web. Cette page explique les différences entre les avis sur les lieux tels qu'ils sont utilisés dans la classe Place (nouvelle) et PlacesService (ancienne), et fournit des extraits de code à des fins de comparaison.

  • PlacesService (ancien) renvoie un tableau d'instances PlaceReview dans l'objet PlaceResult pour toute requête getDetails() si le champ reviews est spécifié dans la requête.
  • Place (nouveau) renvoie un tableau d'instances Review dans le cadre d'une requête fetchFields() si le champ reviews est spécifié dans la requête.

Le tableau suivant présente certaines des principales différences d'utilisation des avis sur les lieux entre la classe Place et PlacesService:

PlacesService (ancienne) Place (nouveau)
Interface PlaceReview Classe Review
Les méthodes nécessitent l'utilisation d'un rappel pour gérer l'objet de résultats et la réponse google.maps.places.PlacesServiceStatus. Utilise des promesses et fonctionne de manière asynchrone.
Les méthodes nécessitent une vérification PlacesServiceStatus. Aucune vérification d'état requise. Vous pouvez utiliser la gestion des erreurs standard.
PlacesService doit être instancié à l'aide d'une carte ou d'un élément div. Place peut être instancié partout où cela est nécessaire, sans référence à un élément de carte ou de page.
PlaceReview renvoie les données d'attribution pour l'avis à l'aide des champs author_name, author_url et profile_photo_url. Review renvoie les données d'attribution pour l'avis à l'aide d'une instance AuthorAttribution.

Comparaison de code

Cette section compare le code des méthodes de recherche de texte pour illustrer les différences entre les avis sur les lieux dans l'ancienne classe PlacesService et la nouvelle classe Place.

Service Places (ancien)

L'extrait de code suivant appelle getDetails() pour demander des informations sur un lieu, y compris des avis, et affiche le premier résultat d'avis dans une fenêtre d'informations.

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

Classe Place (nouvelle)

L'extrait de code suivant appelle la méthode fetchFields() pour demander des informations sur un lieu, y compris les avis, et affiche le premier résultat d'avis dans une fenêtre d'informations.

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