이 페이지에서는 Place 클래스 (신규)와 PlacesService(기존)에서 사용되는 주변 검색의 차이점을 설명하고 비교를 위한 코드 스니펫을 제공합니다.
- 기존
PlacesService에는nearbySearch()메서드가 있어 지정된 영역 내에서 키워드나 유형으로 장소를 검색할 수 있습니다. Place클래스에는searchNearby()메서드가 있어 장소 데이터 필드와 장소 유형의 선택을 확장하여 유연성을 높여 장소 유형별로 지정된 지역 내에서 장소를 검색할 수 있습니다.
다음 표에는 Place 클래스와 PlacesService 간의 근처 검색 메서드의 주요 차이점이 나와 있습니다.
PlacesService (기존) |
Place (신규) |
|---|---|
nearbySearch() |
searchNearby()
|
PlaceSearchRequest |
SearchNearbyRequest |
결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리하기 위해 콜백을 사용해야 합니다. |
Promise를 사용하며 비동기식으로 작동합니다. |
PlacesServiceStatus 확인이 필요합니다. |
필수 상태 확인이 없으며 표준 오류 처리를 사용할 수 있습니다. 자세히 알아보기 |
| 위치 편향만 지원합니다. | 위치 편향 및 위치 제한을 지원합니다. |
| 사용 가능한 모든 데이터 필드 (지원되는 필드의 하위 집합)를 반환합니다. 특정 필드로 제한할 수 없습니다. | 요청된 장소 데이터 필드만 반환합니다. Place 클래스는 확장되고 정기적으로 업데이트되는 필드 선택을 제공합니다. |
| 고정된 장소 유형으로 제한됩니다. | 확장되고 정기적으로 업데이트되는 장소 유형을 이용할 수 있습니다. |
| 키워드를 사용한 텍스트 기반 검색을 지원합니다. | 텍스트 기반 검색은 지원되지 않습니다. 대신 텍스트 검색 (신규)을 사용하세요. |
코드 비교
이 섹션에서는 인근 검색 메서드의 코드를 비교하여 Places 서비스와 Place 클래스의 차이점을 설명합니다. 코드 스니펫은 텍스트 기반 검색 요청을 수행하는 데 각 API에 필요한 코드를 보여줍니다.
Nearby Search (기존)
기존 주변 검색을 사용하면 지정된 영역 내에서 키워드나 유형으로 장소를 검색할 수 있습니다. 장소 데이터 필드를 사용하여 검색을 제한할 수 있는 방법은 없으므로 사용 가능한 모든 필드가 각 요청과 함께 반환됩니다.
다음 스니펫은 nearbySearch()를 호출하여 오스트레일리아 시드니의 레스토랑에 관한 정보를 반환하는 방법을 보여줍니다. 요청은 동기식이며 콜백을 사용하고 PlacesServiceStatus에 대한 필수 조건부 검사를 포함합니다.
let map;
let service;
function initMap() {
const sydney = new google.maps.LatLng(-33.867, 151.195);
map = new google.maps.Map(document.getElementById("map"), {
center: sydney,
zoom: 15,
});
const request = {
location: sydney,
radius: '500',
type: ['restaurant']
};
service = new google.maps.places.PlacesService(map);
service.nearbySearch(request, callback);
}
function callback(results, status) {
if (status == google.maps.places.PlacesServiceStatus.OK) {
for (var i = 0; i < results.length; i++) {
createMarker(results[i]);
}
}
}
// Helper function to create markers.
function createMarker(place) {
if (!place.geometry || !place.geometry.location) return;
const marker = new google.maps.Marker({
map,
position: place.geometry.location,
title: place.name,
});
}
자세히 알아보기
주변 검색 (신규)
새 버전의 Nearby Search는 다음과 같은 방식으로 이전 버전을 개선합니다.
- 반환할 장소 데이터 필드를 지정하는 기능
- 비동기 작업을 지원하는 Promise 사용
PlacesService의 상태를 확인할 필요가 없습니다. 대신 표준 오류 처리를 사용할 수 있습니다.
다음 코드 스니펫은 레스토랑에 대한 Nearby Search 요청을 만드는 함수를 보여줍니다. 이 예에서는 rankPreference 옵션을 사용하여 인기도에 따라 검색 결과를 순위 지정하는 방법을 보여줍니다 (이전 버전에서는 rankBy 옵션을 사용하여 순위를 지정함). searchNearby() 메서드는 await 연산자를 사용하므로 async 함수 내에서만 사용할 수 있습니다.
async function nearbySearch() {
// Restrict within the map viewport.
let center = new google.maps.LatLng(52.369358, 4.889258);
const request = {
// Required parameters.
fields: ["displayName", "location", "businessStatus"],
locationRestriction: {
center: center,
radius: 500,
},
// Optional parameters.
includedPrimaryTypes: ["restaurant"],
maxResultCount: 5,
rankPreference: google.maps.places.SearchNearbyRankPreference.POPULARITY,
language: "en-US",
region: "us",
};
const { places } = await google.maps.places.Place.searchNearby(request);
if (places.length) {
console.log(places);
// Create a new bounds, which will be extended with each result.
const bounds = new google.maps.LatLngBounds();
// Loop through and get all the results.
places.forEach((place) => {
const markerView = new google.maps.marker.AdvancedMarkerElement({
map,
position: place.location,
title: place.displayName,
});
bounds.extend(place.location);
console.log(place);
});
map.fitBounds(bounds);
} else {
console.log("No results");
}
}