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

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

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 Service と Place クラスの違いを説明します。コード スニペットは、各 API で場所の写真をリクエストするために必要なコードを示しています。

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

次のスニペットは、PlacesService を使用して写真を返し、最初の写真の結果をページに表示する方法を示しています。この例では、Place 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() メソッドを使用して、表示名や Place Photos などの Place Details を返す方法を示しています。まず、プレイス ID を使用して新しい Place オブジェクトがインスタンス化され、次に displayName フィールドと photos フィールドが指定された fetchFields() が呼び出されます。ページに最初の場所の写真が表示されます。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;

詳細