新しいスポット レビューに移行する

プレイス レビューを使用すると、ユーザーのレビューと評価をウェブページに追加できます。このページでは、Place クラス（新規）と PlacesService クラス（従来）で使用される場所のレビューの違いについて説明します。また、比較用のコード スニペットも示します。

  • PlacesService（レガシー）は、リクエストで reviews フィールドが指定されている場合、getDetails() リクエストの PlaceResult オブジェクトの一部として PlaceReview インスタンスの配列を返します。
  • Place（新規）: リクエストで reviews フィールドが指定されている場合、fetchFields() リクエストの一部として Review インスタンスの配列を返します。

次の表に、Place クラスと PlacesService クラスの場所のレビューの使用に関する主な違いを示します。

PlacesService（レガシー） Place（新規）
PlaceReview インターフェース Review クラス
メソッドでは、結果オブジェクトと google.maps.places.PlacesServiceStatus レスポンスを処理するためにコールバックを使用する必要があります。 Promise を使用し、非同期で動作します。
メソッドには PlacesServiceStatus チェックが必要です。 ステータス チェックは不要で、標準のエラー処理を使用できます。
PlacesService は、地図または div 要素を使用してインスタンス化する必要があります。 Place は、地図やページ要素を参照せずに、必要に応じてインスタンス化できます。
PlaceReview は、author_name、author_url、profile_photo_url フィールドを使用して、レビューのアトリビューション データを返します。 Review は、 AuthorAttribution インスタンスを使用して、レビューのアトリビューション データを返します。

コードの比較

このセクションでは、テキスト検索メソッドのコードと、従来の PlacesService クラスと新しい Place クラスの Place レビューの違いについて説明します。

プレイス サービス（従来版）

次のスニペットは、getDetails() を呼び出してクチコミを含む場所の詳細をリクエストし、最初のクチコミの結果を情報ウィンドウに表示します。

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

プレイスクラス（新規）

次のスニペットは、fetchFields() メソッドを呼び出して、クチコミを含む場所の詳細をリクエストし、最初のクチコミの結果を情報ウィンドウに表示します。

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