AutocompleteService에서 AutocompleteSuggestion으로의 Google Maps API 이전 가이드

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

개발 툴

대상자

• *React 및 Google Maps API를 사용하는 개발자** (중간 수준)

핵심 요약

• @react-google-maps/api 패키지 업데이트 및 Places API (New) 활성화 필수
• componentRestrictions.country → includedRegionCodes로 변경, 최대 15개 지역 코드 지원
• AutocompleteSuggestion 응답 구조에 맞춘 데이터 매핑 및 mainText.text/secondaryText.text를 통한 주소 구성

섹션별 세부 요약

1. 이전 경고 및 준비 사항

• Google에서 AutocompleteService의 폐기 경고 발송
• @react-google-maps/api 패키지 최신 버전 설치
• Google Maps Console에서 Places API (New) 활성화 필요

2. 새로운 API 사용 예시

• AutocompleteSuggestion.fetchAutocompleteSuggestions 사용
• includedRegionCodes 매개변수로 지역 제한 설정 (예: ['gb', 'us'])
• 예외 처리 로직 추가 (try-catch 구문 활용)

3. 응답 구조 변경

• AutocompleteSuggestion 객체 반환 (기존 description 필드 대신 mainText.text/secondaryText.text 사용)
• serializePlacesSearchV2ToOptions 함수로 데이터 매핑 (예: placePrediction 필터링)

4. 지역 제한 처리

• locationRestriction 사용 시 단일 지역만 지원 (GB와 Texas 동시 제한 시 수동 필터링 적용)
• secondaryText.text의 마지막 부분에 주소/국가 코드 포함 → "UK", "TX" 검색 필터링

결론

• 패키지 업데이트 및 Places API (New) 활성화가 필수적임
• includedRegionCodes와 mainText.text/secondaryText.text 조합으로 지역/주소 필터링 구현
• 다중 지역 제한 시 수동 필터링 로직을 추가하여 해결 (예: "UK", "TX" 검색)
• 최신 Google Maps API 문서 참고하여 API 변경 사항 정기 점검 권장