새 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 서비스와 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");
  }
}

자세히 알아보기