새 장소 리뷰로 이전

장소 리뷰를 사용하면 웹페이지에 사용자 리뷰와 평점을 추가할 수 있습니다. 이 페이지에서는 Place 클래스(신규)와 PlacesService (기존)에서 사용되는 장소 리뷰의 차이점을 설명하고 비교할 수 있는 몇 가지 코드 스니펫을 제공합니다.

  • PlacesService (레거시)는 요청에 reviews 필드가 지정된 경우 모든 getDetails() 요청의 PlaceResult 객체의 일부로 PlaceReview 인스턴스의 배열을 반환합니다.
  • Place (신규)는 요청에 reviews 필드가 지정된 경우 fetchFields() 요청의 일부로 Review 인스턴스 배열을 반환합니다.

다음 표에는 Place 클래스와 PlacesService 간의 장소 리뷰 사용의 주요 차이점이 나와 있습니다.

PlacesService (기존) Place (신규)
PlaceReview 인터페이스 Review 클래스
메서드는 결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리하기 위해 콜백을 사용해야 합니다. Promise를 사용하며 비동기식으로 작동합니다.
메서드에는 PlacesServiceStatus 검사가 필요합니다. 필수 상태 검사가 없으며 표준 오류 처리를 사용할 수 있습니다.
PlacesService는 지도 또는 div 요소를 사용하여 인스턴스화해야 합니다. Place는 지도나 페이지 요소를 참조하지 않고도 필요한 위치에 인스턴스화할 수 있습니다.
PlaceReview는 author_name, author_url, profile_photo_url 필드를 사용하여 리뷰의 기여 분석 데이터를 반환합니다. Review는 AuthorAttribution 인스턴스를 사용하여 리뷰의 기여 분석 데이터를 반환합니다.

코드 비교

이 섹션에서는 텍스트 검색 메서드의 코드를 비교하여 기존 PlacesService의 장소 리뷰와 최신 Place 클래스의 차이점을 보여줍니다.

장소 서비스 (기존)

다음 스니펫은 getDetails()를 호출하여 리뷰를 비롯한 장소 세부정보를 요청하고 정보 창에 첫 번째 리뷰 결과를 표시합니다.

const request = {
  placeId: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
  fields: ["name", "formatted_address", "geometry", "reviews"],
};
const service = new google.maps.places.PlacesService(map);

service.getDetails(request, (place, status) => {
  if (
    status === google.maps.places.PlacesServiceStatus.OK &&
    place &&
    place.geometry &&
    place.geometry.location
  ) {
    // If there are any reviews display the first one.
    if (place.reviews && place.reviews.length > 0) {
      // Get info for the first review.
      let reviewRating = place.reviews[0].rating;
      let reviewText = place.reviews[0].text;
      let authorName = place.reviews[0].author_name;
      let authorUri = place.reviews[0].author_url;

      // Format the review using HTML.
      contentString =`
            <div id="title"><b>${place.name}</b></div>
            <div id="address">${place.formatted_address}</div>
            <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
            <div id="rating">Rating: ${reviewRating} stars</div>
            <div id="rating"><p>Review: ${reviewText}</p></div>`;
    } else {
      contentString = `No reviews were found for ${place.name}`;
    }

    const infowindow = new google.maps.InfoWindow({
      content: contentString,
      ariaLabel: place.displayName,
    });

    // Add a marker.
    const marker = new google.maps.Marker({
      map,
      position: place.geometry.location,
    });

    // Show the info window.
    infowindow.open({
      anchor: marker,
      map,
    });
  }
});

장소 클래스 (신규)

다음 스니펫은 fetchFields() 메서드를 호출하여 리뷰를 비롯한 장소 세부정보를 요청하고 첫 번째 리뷰 결과를 정보 창에 표시합니다.

// Use a place ID to create a new Place instance.
const place = new google.maps.places.Place({
  id: "ChIJpyiwa4Zw44kRBQSGWKv4wgA", // Faneuil Hall Marketplace, Boston, MA
});

// Call fetchFields, passing 'reviews' and other needed fields.
await place.fetchFields({
  fields: ["displayName", "formattedAddress", "location", "reviews"],
});

// If there are any reviews display the first one.
if (place.reviews && place.reviews.length > 0) {
  // Get info for the first review.
  let reviewRating = place.reviews[0].rating;
  let reviewText = place.reviews[0].text;
  let authorName = place.reviews[0].authorAttribution.displayName;
  let authorUri = place.reviews[0].authorAttribution.uri;

  // Format the review using HTML.
  contentString =`
          <div id="title"><b>${place.displayName}</b></div>
          <div id="address">${place.formattedAddress}</div>
          <a href="${authorUri}" target="_blank">Author: ${authorName}</a>
          <div id="rating">Rating: ${reviewRating} stars</div>
          <div id="rating"><p>Review: ${reviewText}</p></div>`;
} else {
  contentString = `No reviews were found for ${place.displayName}`;
}

// Create an infowindow to display the review.
infoWindow = new google.maps.InfoWindow({
  content: contentString,
  ariaLabel: place.displayName,
});

// Add a marker.
const marker = new google.maps.marker.AdvancedMarkerElement({
  map,
  position: place.location,
  title: place.displayName,
});

// Show the info window.
infoWindow.open({
  anchor: marker,
  map,
});