새 장소 세부정보로 이전

Places API는 특정 장소에 대한 자세한 정보를 반환할 수 있습니다. 이 페이지에서는 Place 클래스(신규)와 PlacesService (기존)에서 사용되는 장소 세부정보의 차이점을 설명하고 비교할 수 있는 몇 가지 코드 스니펫을 제공합니다. 다음 표에는 Place 클래스와 PlacesService의 장소 세부정보 사용 간에 몇 가지 주요 차이점이 나와 있습니다.

PlacesService (기존) Place (신규)
getDetails() fetchFields()
PlaceDetailsRequest FetchFieldsRequest
메서드는 결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리하기 위해 콜백을 사용해야 합니다. Promise를 사용하며 비동기식으로 작동합니다.
메서드에는 PlacesServiceStatus 검사가 필요합니다. 필수 상태 검사가 없으며 표준 오류 처리를 사용할 수 있습니다.
장소 데이터 필드의 형식은 스네이크 표기법을 사용합니다. 장소 데이터 필드의 형식은 케멜케이스를 사용합니다.
고정된 장소 유형 및 장소 데이터 필드 집합으로 제한됩니다. 정기적으로 업데이트되는 장소 유형 및 장소 데이터 필드의 확장된 선택을 제공합니다.

코드 비교

이 섹션에서는 유사한 두 코드를 비교하여 장소 서비스와 장소 클래스의 차이점을 보여줍니다. 코드 스니펫은 장소 세부정보 요청을 실행하는 데 각 API에 필요한 코드를 보여준 다음 결과 장소 데이터를 사용하여 지도에 마커를 추가합니다.

장소 서비스 (기존)

다음의 간단한 코드 스니펫은 PlacesService를 사용하여 장소 세부정보를 요청하는 방법을 보여줍니다. 이 요청은 콜백을 사용하며 PlacesServiceStatus에 필요한 조건부 검사를 포함합니다. 필요한 장소 데이터 필드는 요청 본문에 지정됩니다.

function getPlaceDetails() {
  // Instantiate the Places Service.
  const service = new google.maps.places.PlacesService(map);

  // Make a request using the Place ID.
  const request = {
    placeId: "ChIJN1t_tDeuEmsRUsoyG83frY4",
    fields: ["name", "formatted_address", "place_id", "geometry"],
  };

  // Request place details.
  service.getDetails(request, (place, status) => {
    // Check whether PlacesServiceStatus is OK.
    if (
      status === google.maps.places.PlacesServiceStatus.OK &&
      place &&
      place.geometry &&
      place.geometry.location
    ) {

      // Log the result.
      console.log(place.name);
      console.log(place.formatted_address);

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

자세히 알아보기

장소 클래스 (신규)

다음의 간단한 코드 스니펫은 Place 클래스를 사용하여 장소 세부정보 요청을 실행하는 방법을 보여줍니다. 요청은 비동기식이며 상태 확인을 포함하지 않습니다 (표준 오류 처리를 사용할 수 있음). 장소 ID는 요청 (fetchFields())을 하는 데 사용되는 새 Place 인스턴스를 만드는 데 사용됩니다. 필요한 장소 데이터 필드는 fetchFields()가 호출될 때까지 전달되지 않으므로 더 유연합니다. fetchFields() 메서드는 await 연산자를 사용하므로 async 함수 내에서만 사용할 수 있습니다.

async function getPlaceDetails() {
  // Use place ID to create a new Place instance.
  const place = new google.maps.places.Place({
    id: "ChIJN5Nz71W3j4ARhx5bwpTQEGg",
    requestedLanguage: "en", // optional
  });

  // Call fetchFields, passing the needed data fields.
  await place.fetchFields({
    fields: ["displayName", "formattedAddress", "location"],
  });

  // Log the result.
  console.log(place.displayName);
  console.log(place.formattedAddress);

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

자세히 알아보기