이 문서에서는 Nearby Search (신규) API 를 사용하여 간단하고 비용 효율적인
지역별 탐색 환경을 제공합니다.
지역 검색 환경은 사용자가 호텔이나 부동산을 검색할 때 지정한 위치 근처의 주요 관심 장소를 사용자에게 표시합니다. 대화형 지도로 구성되는 경우가 많으며, 장소 선택기와 사진 갤러리가 포함된 추가 패널이 있습니다. 양방향 환경을 개선하기 위한 다양한 Google Maps Platform 제품과 기능이 표시됩니다.
사용 사례
이제 로컬 검색 통합의 어떤 요소가 사용자 가치를 창출하는지 알아보겠습니다.
탐색 - 다양한 유형의 관련 장소를 표시하여 사용자에게 특정 위치 주변의 장소를 한눈에 보여줍니다.
대화형 - 사용자가 장소를 선택하고 데이터를 동적으로 새로고침할 수 있도록 지원
입니다.
시각화 - 장소 리뷰, 사진 제공
사용자가 자신의 필요에 맞는지 빠르게 파악할 수 있도록 걸리는 시간과 거리를 표시합니다.
참조 아키텍처
로컬 검색
로컬 탐색 환경을 만드는 방법에는 여러 가지가 있습니다. 다음 통합은 잘 알려진 Google Maps Platform API와 몇 가지 흥미로운 새 기능을 활용하는 사용자 환경의 맞춤 예입니다. 로컬 검색에 템플릿화된 접근 방식을 사용하려면 웹 구성요소를 사용하세요.
샘플 애플리케이션
샘플 둘러보기
아래 표에는 단계별로 나뉜 샘플 애플리케이션과 Google Maps Platform API를 사용한 기술 구현에 관한 설명이 나와 있습니다.
1. 자동 완성으로 위치 검색
- Maps JavaScript API를 로드합니다.
- 장소 자동 완성 쿼리 또는 지도에서 위치 선택
2. Nearby Search (신규) API를 사용하여 로컬 관심 장소 표시
- 인기 순위 (더 관련성 높은 결과) 또는 거리 순위
includedTypes
,excludedTypes
: 호텔인 경우 '숙박' 유형을 제외하고 적합한 유형(예: 'restaurant, cafe, park, tourit_attraction')만 포함할 수 있습니다.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 and Directions API로 상호작용 추가
- 경로 API를 쿼리하여 최신 구간 및 단계를 업데이트합니다. * 다음 섹션에서 시간을 사용합니다.
4. 상호작용 시 장소의 세부정보 표시
설명:
displayName
,types
,rating
,userRatingCount
,priceLevel
.시간: 이전 Directions API 쿼리에서 가져옵니다.
리뷰:
reviews[i].author
,reviews[i].rating
,reviews[i].text
이미지: Nearby Search (신규) API의 제한되지 않은 미리보기 기간에는
place.id
를 사용하여 장소 세부정보를 쿼리하여 photo_reference를 가져온 후 환경에서 한 번에 하나씩 쿼리해야 합니다.
관련 쿼리 수 및 비용
- Maps JavaScript API: 환경 로드 시 지도 1개
- Places Autocomplete API: 입력한 모든 문자마다 1개의 쿼리 (자동 완성 위젯을 사용하는 경우)가 실행되며 맞춤설정할 수 있습니다.
- Nearby Search (신규) API: 표시되는 장소 20개마다 쿼리 1회 쿼리 응답의 일부인 장소 데이터에 따라 다른 결제
- Directions API: 사용자가 선택한 장소마다 1개의 쿼리
- Place Photo API: 표시되는 사진마다 쿼리 1회
결론
로컬 검색 환경은 사용자 가치를 제공하는 강력한 방법입니다. 이 데모 구현에는 Nearby Search (New) API 의 특별한 기능을 사용하여 Google Maps Platform에서 이러한 환경을 만들 때 포함할 수 있는 많은 기능이 있습니다.
다음 단계
추가로 읽어볼 만한 자료:
- Maps JavaScript API의 웹 구성요소
- Places Autocomplete 최적화
- 기타 장소 서비스
- 아래에 의견을 남겨주세요.
참여자
주요 저자:
토마스 앙글라레트 | Google Maps Platform 솔루션 엔지니어