새 장소 사진으로 이전

장소 사진 기능을 사용하면 고품질 사진 콘텐츠를 웹페이지에 추가할 수 있습니다. 이 페이지에서는 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는 지도나 페이지 요소를 참조하지 않고도 필요한 위치에 인스턴스화할 수 있습니다.

코드 비교

이 섹션에서는 장소 사진의 코드를 비교하여 장소 서비스와 장소 클래스의 차이점을 보여줍니다. 코드 스니펫은 각 API에서 장소 사진을 요청하는 데 필요한 코드를 보여줍니다.

장소 서비스 (기존)

다음 스니펫은 PlacesService를 사용하여 사진을 반환하고 페이지에 첫 번째 사진 결과를 표시하는 방법을 보여줍니다. 이 예에서 장소 세부정보 요청은 name 및 photos 필드와 함께 장소 ID를 지정합니다. 그런 다음 서비스 상태를 확인한 후 첫 번째 사진이 페이지에 표시됩니다. 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;

자세히 알아보기