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,
});
}