새 장소 사진으로 이전

유럽 경제 지역 (EEA) 개발자

장소 사진을 사용하면 고품질 사진 콘텐츠를 웹페이지에 추가할 수 있습니다. 이 페이지에서는 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를 사용하여 사진을 반환하고 페이지에 첫 번째 사진 결과를 표시하는 방법을 보여줍니다. 이 예에서 장소 세부정보 요청은 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;

자세히 알아보기