새 Nearby Search로 이전

이 페이지에서는 Place 클래스 (신규)와 PlacesService(기존)에서 사용되는 주변 검색의 차이점을 설명하고 비교할 수 있는 몇 가지 코드 스니펫을 제공합니다.

  • 기존 PlacesService에는 키워드나 유형으로 지정된 영역 내 장소를 검색할 수 있는 nearbySearch() 메서드가 있습니다.
  • Place 클래스에는 searchNearby() 메서드가 있습니다. 이 메서드를 사용하면 지정된 지역 내에서 장소 유형별로 장소를 검색할 수 있으며, 확장된 장소 데이터 필드와 장소 유형을 활용하여 유연성을 높일 수 있습니다.

다음 표에는 Place 클래스와 PlacesService의 주변 검색 메서드 간에 몇 가지 주요 차이점이 나와 있습니다.

PlacesService (기존) Place (신규)
nearbySearch()
 searchNearby()
PlaceSearchRequest SearchNearbyRequest
결과 객체와 google.maps.places.PlacesServiceStatus 응답을 처리하려면 콜백을 사용해야 합니다. Promise를 사용하며 비동기식으로 작동합니다.
PlacesServiceStatus 검사가 필요합니다. 필수 상태 검사가 없으며 표준 오류 처리를 사용할 수 있습니다.
위치 편향만 지원합니다. 위치 편향 및 위치 제한을 지원합니다.
사용 가능한 모든 데이터 필드 (지원되는 필드의 하위 집합)를 반환합니다. 특정 필드로 제한할 수 없습니다. 요청된 장소 데이터 필드만 반환합니다. Place 클래스는 확장되고 정기적으로 업데이트되는 필드 선택을 제공합니다.
고정된 장소 유형 집합으로 제한됩니다. 확대되고 정기적으로 업데이트되는 다양한 장소 유형에 액세스하세요.
키워드를 사용한 텍스트 기반 검색을 지원했습니다. 텍스트 기반 검색은 지원되지 않습니다. 대신 텍스트 검색 (신규)를 사용하세요.

코드 비교

이 섹션에서는 주변 검색 메서드의 코드를 비교하여 장소 서비스와 장소 클래스의 차이점을 보여줍니다. 코드 스니펫은 텍스트 기반 검색 요청을 실행하는 데 각 API에 필요한 코드를 보여줍니다.

주변 검색 (기존)

기존 주변 검색을 사용하면 키워드나 유형으로 지정된 영역 내 장소를 검색할 수 있습니다. 장소 데이터 필드를 사용하여 검색을 제한할 수 있는 방법은 없으므로 사용 가능한 모든 필드가 각 요청과 함께 반환됩니다. 다음 스니펫은 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,
  });
}

자세히 알아보기

주변 검색 (신규)

새 버전의 주변 검색은 이전 버전보다 다음과 같은 방식으로 개선되었습니다.

  • 반환할 장소 데이터 필드를 지정하는 기능
  • 비동기 작업을 사용 설정하는 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");
  }
}

자세히 알아보기