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

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

Place Photo を使用すると、ウェブページに質の高い写真コンテンツを追加できます。このページでは、Place クラス（新規）と PlacesService（以前の）のプレイス写真機能の違いについて説明し、比較用のコード スニペットをいくつか紹介します。

  • PlacesService（以前のバージョン）は、getDetails() リクエストの PlaceResult オブジェクトの一部として、最大 10 個の PlacePhoto オブジェクトの配列を返します。これは、リクエストで photos フィールドが指定されている場合に限ります。textSearch() と nearbySearch() の場合、デフォルトでは、利用可能な場合は 1 位の場所の写真が返されます。
  • photos フィールドがリクエストで指定されている場合、Place クラスは fetchFields() リクエストの一部として最大 10 個の Photo オブジェクトの配列を返します。

次の表に、Place クラスと PlacesService の間でプレイス写真の使用に関する主な違いをまとめます。

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

コードの比較

このセクションでは、Place Photos のコードを比較して、Places Service と Place クラスの違いを説明します。コード スニペットは、それぞれの API でプレイス写真のリクエストに必要なコードを示しています。

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

次のスニペットは、PlacesService を使用して写真を返し、最初の写真の結果をページに表示する方法を示しています。この例では、Places Details リクエストで、プレイス 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 オブジェクトをインスタンス化し、次に displayName フィールドと photos フィールドが指定された fetchFields() を呼び出します。1 位の写真がページに表示されます。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 クラスは、著作者の名前、著作者の Google プロフィール ページの URI、著作者のプロフィール写真の URI を含む AuthorAttribution インスタンスとして著作者の帰属情報を返します。次のスニペットは、最初の一致結果の写真のアトリビューション データを取得する方法を示しています。

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

その他の情報