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

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

プレイス レビューを使用すると、ユーザーのレビューや評価をウェブページに追加できます。このページでは、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,
});