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

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

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

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

次の表に、Place クラスと PlacesService の Place Photo の使用における主な違いを示します。

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

コードの比較

このセクションでは、Place Photo のコードを比較して、Places Service と Place クラスの違いを示します。コード スニペットは、それぞれの API で Place Photo をリクエストするために必要なコードを示しています。

Places Service（従来版）

次のスニペットは、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;

詳細

Place クラス（新規）

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

詳細