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

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

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

  • PlacesService（従来版）は、getDetails() リクエストで reviews フィールドが指定されている場合、PlaceResult オブジェクトの一部として PlaceReview インスタンスの配列を返します。
  • Place（新規）は、fetchFields() リクエストで 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() を呼び出して、クチコミを含むプレイスの詳細情報をリクエストし、最初のクチコミの結果を情報ウィンドウに表示します。

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