새 Nearby Search로 이전

유럽 경제 지역 (EEA) 개발자

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

  • 기존 PlacesService에는 키워드 또는 유형별로 지정된 영역 내에서 장소를 검색할 수 있는 nearbySearch() 메서드가 있습니다.
  • Place 클래스에는 장소 데이터 필드 및 장소 유형의 확장된 선택을 활용하여 장소 유형별로 지정된 영역 내에서 장소를 검색할 수 있는 searchNearby() 메서드가 있습니다.

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

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

코드 비교

이 섹션에서는 주변 검색 메서드의 코드를 비교하여 Places Service와 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의 상태를 확인할 필요가 없습니다. 대신 표준 오류 처리를 사용할 수 있습니다.

다음 코드 스니펫은 레스토랑에 대한 주변 검색 요청을 하는 함수를 보여줍니다. 이 예에서는 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");
  }
}

자세히 알아보기