Nearby Search (신규) API로 지역 검색 개선

이 문서에서는 Nearby Search (New) API 를 사용하여 간단하고 비용 효율적인 애플리케이션을 빌드하는 방법을 알아봅니다.

지역 검색 경험

지역 검색 환경은 사용자가 호텔이나 부동산을 검색할 때 지정한 위치 근처의 주요 관심 장소를 사용자에게 보여줍니다. 장소 선택기와 사진 갤러리가 포함된 추가 패널이 있는 대화형 지도로 구성되는 경우가 많습니다. 상호작용 환경을 개선할 수 있도록 다양한 Google Maps Platform 제품과 기능이 제공됩니다.

사용 사례

이제 로컬 검색 통합의 어떤 요소가 사용자 가치를 높이는지 알아보겠습니다.

• 탐색 - 다양한 유형의 관련 장소를 표시하여 사용자에게 단일 위치 주변에 관한 개요를 제공합니다.

• 상호작용 - 사용자가 장소를 선택하고 데이터를 동적으로 새로고침할 수 있습니다.

  나타냅니다.

• 시각화 - 장소 리뷰, 사진 제공

  사용자의 필요를 빠르게 파악할 수 있습니다.

참조 아키텍처

로컬 탐색

로컬 검색 환경을 만드는 방법에는 여러 가지가 있습니다. 다음 통합은 잘 알려진 Google Maps Platform API와 몇 가지 흥미로운 새 기능을 활용하는 사용자 환경의 맞춤 예입니다. 로컬 검색에 대한 템플릿 방식을 사용하려면 웹 구성요소를 사용하면 됩니다.

샘플 애플리케이션

샘플 둘러보기

아래 표에는 Google Maps Platform API를 사용한 기술 구현에 대한 설명과 함께 단계별로 분류된 샘플 애플리케이션이 나와 있습니다.

1. AutocompleteSearch location을 사용한 위치 검색

• Maps JavaScript API를 로드합니다.
• Place Autocomplete 쿼리 또는 지도 상의 위치 선택

2. Nearby Search (New) API를 사용하여 지역 관심 장소 표시

• 인기도 순위 (관련성이 더 높은 결과) 또는 거리 순위
• includedTypes, excludedTypes). 호텔인 경우 '숙박' 유형을 제외하고 적합한 유형(예: '레스토랑, 카페, 공원, 관광 명소')만 포함할 수 있습니다.
• 결과를 더 세부적으로 제어하려면 includedPrimaryTypes, excludedPrimaryTypes를 활용하세요.
• `locationRestriction은 불충분한 결과나 너무 멀리 있는 장소를 방지하기 위한 것입니다. 결과가 0개이면 결과를 표시하기 전에 원 / 직사각형 크기를 넓힙니다.

요청된 데이터 필드로 호텔을 예약할 때 쿼리 샘플

• 기본 (displayName, types, openingHours, formattedAddress)
• 연락처 (websiteUri, nationalPhoneNumber, internationalPhoneNumber)
• 우선 (reviews, priceLevel, userRatingCount)

 { "includedTypes": ["restaurant","cafe","park"], "excludedTypes":
["lodging","convenience_store"], "includedPrimaryTypes":
["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes":
["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": {
"center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }

요청된 데이터 필드로 부동산을 검색할 때의 쿼리 샘플:

• 기본 (displayName, types, openingHours, formattedAddress)

 { "includedTypes": ["school","transport","bus","convenience_store"],
"excludedTypes": ["lodging"], "includedPrimaryTypes":
["restaurant","tourist_attraction","airport"], "excludedPrimaryTypes":
["lodging"], "maxResultCount": 20, "locationRestriction": { "circle": {
"center": { "latitude": 37.7937, "longitude": -122.3965 }, "radius": 500.0 } } }

3. Dynamic Maps 및 Directions API로 상호작용 추가하기

• Directions API를 쿼리하여 최신 구간 및 단계. * 다음 섹션에서 시간을 사용합니다.

4. 상호작용 시 장소에 대한 자세한 정보를 표시합니다.

1. 설명: displayName, types, rating, userRatingCount, priceLevel.

   시간: 이전 Directions API 쿼리에서 가져옵니다.

2. 리뷰: reviews[i].author, reviews[i].rating,reviews[i].text.

3. 이미지: Nearby Search (New) API의 무제한 미리보기 중에 place.id로 Places Details를 쿼리하여 photo_reference를 가져온 다음 환경에서 한 번에 하나씩 쿼리해야 합니다.

관련 쿼리 수 및 비용

• Maps JavaScript API: 작업 로드 시 지도 1개
• Places Autocomplete API: 입력된 모든 문자를 1로 쿼리합니다 (Autocomplete 위젯을 사용하는 경우).
• Nearby Search (New) API: 장소 20개 표시당 쿼리 1개 쿼리 응답에 포함된 장소 데이터에 따라 요금이 다릅니다.
• Directions API: 사용자가 선택한 모든 장소에 대해 1개의 쿼리입니다.
• Place Photo API: 표시된 모든 사진을 쿼리합니다.

결론

로컬 검색 환경은 사용자 가치를 전달하는 효과적인 방법입니다. 이 데모 구현에는 Nearby Search (New) API 의 특별한 기능을 사용하여 Google Maps Platform에서 이러한 환경을 만들 때 포함할 수 있는 많은 기능이 있습니다.

다음 단계

권장 추가 자료:

• Maps JavaScript API의 웹 구성요소
• Place Autocomplete 최적화
• 기타 장소 서비스
• 아래에 의견을 남겨주세요.

기여자

주요 저자:

토마스 앙글라레트 | Google Maps Platform 솔루션 엔지니어