新しい「場所の写真」に移行する

Place Photo を使用すると、ウェブページに質の高い写真コンテンツを追加できます。このページでは、Place クラス（新規）と PlacesService クラス（従来）の場所の写真機能の違いについて説明します。また、比較用のコード スニペットも示します。

  • PlacesService（レガシー）は、リクエストで photos フィールドが指定されている場合、getDetails() リクエストの PlaceResult オブジェクトの一部として、最大 10 個の PlacePhoto オブジェクトの配列を返します。textSearch() と nearbySearch() の場合、最初のプレイスの写真が利用可能な場合はデフォルトで返されます。
  • Place クラスは、リクエストで photos フィールドが指定されている場合、fetchFields() リクエストの一部として最大 10 個の Photo オブジェクトの配列を返します。

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

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

コードの比較

このセクションでは、場所の写真のコードと比較して、Places サービスと Place クラスの違いを示します。コード スニペットは、各 API でプレイスの写真のリクエストに必要なコードを示しています。

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

次のスニペットは、PlacesService を使用して写真を返す方法と、ページに最初の写真結果を表示する方法を示しています。この例では、プレイス詳細リクエストでプレイス ID と name フィールドと photos フィールドを指定しています。サービス ステータスを確認した後、最初の写真がページに表示されます。PlacesService をインスタンス化するときに、地図または div 要素を指定する必要があります。この例では地図を使用しないため、div 要素を使用しています。

function getPhotos() {
  // Construct the Place Details request.
  const request = {
    placeId: "ChIJydSuSkkUkFQRsqhB-cEtYnw",
    fields: ["name", "photos"],
  };

  // Create an instance of PlacesService.
  const attributionDiv = document.getElementById("attribution-div");
  const service = new google.maps.places.PlacesService(attributionDiv);

  // Check status and display the first photo in an img element.
  service.getDetails(request, (place, status) => {
    if (
      status === google.maps.places.PlacesServiceStatus.OK && place
    ) {
      const photoImg = document.getElementById('image-container');
      photoImg.src = place.photos[0].getUrl({maxHeight: 400});
    }
  });
}

PlacesService の著作者の帰属情報

PlacesService は、投稿者の Google プロフィール ページを指す URL を含む html_attributions 文字列として、必要な投稿者アトリビューションを返します。次のスニペットは、最初の写真の結果のアトリビューション データを取得するものです。

let attributionUrl = place.photos[0].html_attributions;

その他の情報

プレイスクラス（新規）

次のスニペットは、fetchFields() メソッドを使用して、表示名や場所の写真などの場所の詳細を返す方法を示しています。まず、プレイス ID を使用して新しい Place オブジェクトがインスタンス化され、次に fetchFields() が呼び出されます。ここでは、displayName フィールドと photos フィールドが指定されます。最初の場所の写真がページに表示されます。Place クラスを使用する場合は、サービス ステータスをチェックする必要はありません。これは自動的に処理されます。

async function getPhotos() {
  // Use a place ID to create a new Place instance.
  const place = new google.maps.places.Place({
      id: 'ChIJydSuSkkUkFQRsqhB-cEtYnw', // Woodland Park Zoo, Seattle WA
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({ fields: ['displayName','photos'] });

  console.log(place.displayName);
  console.log(place.photos[0]);
  // Add the first photo to an img element.
  const photoImg = document.getElementById('image-container');
  photoImg.src = place.photos[0].getURI({maxHeight: 400});
}

Place クラスの著作者の帰属情報

Place クラスは、著者の帰属情報を AuthorAttribution インスタンスとして返します。これには、著者の名前、著者の Google プロフィール ページの URI、著者のプロフィール写真の URI が含まれます。次のスニペットは、最初の写真の結果のアトリビューション データを取得しています。

let name = place.photos[0].authorAttributions[0].displayName;
let attributionUrl = place.photos[0].authorAttributions[0].uri;
let photoUrl = place.photos[0].authorAttributions[0].photoUri;

その他の情報