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

欧州経済領域（EEA）のデベロッパー

Place Reviews を使用すると、ウェブページにユーザーのクチコミや評価を追加できます。このページでは、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 クラスの場所のクチコミの違いを説明します。

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

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

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

Place クラス（新版）

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

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