Places API는 특정 장소에 대한 자세한 정보를 반환할 수 있습니다. 이 페이지에서는 Place 클래스(신규)와 PlacesService (기존)에서 사용되는 장소 세부정보의 차이점을 설명하고 비교를 위한 코드 스니펫을 제공합니다. 다음 표에는 Place 클래스와 PlacesService 간의 장소 세부정보 사용의 주요 차이점이 나와 있습니다.
PlacesService (기존) |
Place (신규) |
|---|---|
getDetails() |
fetchFields() |
PlaceDetailsRequest |
FetchFieldsRequest |
메서드에서는 콜백을 사용하여 결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리해야 합니다. |
Promise를 사용하며 비동기식으로 작동합니다. |
메서드에는 PlacesServiceStatus 확인이 필요합니다. |
필수 상태 확인이 없으며 표준 오류 처리를 사용할 수 있습니다. 자세히 알아보기 |
| 장소 데이터 필드는 스네이크 표기법을 사용하여 형식이 지정됩니다. | 장소 데이터 필드는 카멜 표기법을 사용하여 형식이 지정됩니다. |
| 고정된 장소 유형 및 장소 데이터 필드로 제한됩니다. | 정기적으로 업데이트되는 장소 유형과 장소 데이터 필드를 더 다양하게 선택할 수 있습니다. |
코드 비교
이 섹션에서는 유사한 두 코드 조각을 비교하여 Places 서비스와 Place 클래스의 차이점을 설명합니다. 코드 스니펫은 장소 세부정보 요청을 수행하고 결과 장소 데이터를 사용하여 지도에 마커를 추가하는 데 각 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,
});
}