자동 검색 완성 기능, Google Places Autocomplete 시작하기

사용자가 입력하고 있는 단어를 미리 보여주고 입력해주는 자동 완성 기능은 구글 검색의 편리한 기능 중 하나입니다. 사용자는 자동 완성 기능으로 오타 실수를 줄일 수 있고 원하는 정보를 더 정확하고 신속하게 검색할 수 있습니다.

구글에서는 개발자들이 자동 완성 기능을 어플리케이션에 활용할 수 있도록 Google Places API 라이브러리 형태로 제공하고 있지만 이를 모르고 지나치는 경우가 대부분입니다.

앱 개발자들은 자동 완성 기능을 활용하여 앱 사용자에게 정확하고 신속한 주소, POI, 용어 검색 경험을 제공할 수 있습니다. Google Places Autocomplete API는 Places Javascript API (웹 서비스), Places API for Android (모바일 서비스) 에서 확인할 수 있으며 Places API for iOS는 곧 출시될 예정입니다.

아래 3가지 스텝을 통해 Javascript 버전의 Places API를 사용한 웹사이트에 자동 완성 기능 적용 방법에 대해 알아보세요.

 

Step 1.

먼저, Google Maps Javascript API 업로드 시, Google Maps JavaScript API 부트스트랩 URL에 있는 매개 변수를 사용하여 Google Places 라이브러리를 함께 포함하여 업로드 해야 합니다. 여기서 API_KEY는 개발자가 발급받은 Maps API key로 변경되어야 합니다.

<script type=”text/javascript”
src=”https://maps.googleapis.com/maps/api/js?libraries=places&key=API_KEY”>
</script>

 

Step 2.

사용자의 입력을 넣을 수 있는 text box를 생성하고 자동 완성 기능을 생성된 text box에 적용시킵니다. 이 단계에서 사용자의 검색 결과가 ‘시 단위’ (cities)만 검색되는 등 개발자가 원하는 대로 다양하게 설정할 수 있습니다.

HTML:

<input id=”search” type=”text”>

JavaScript:

var autoComplete = new google.maps.places.Autocomplete(
document.getElementById(search), {
types: [‘(cities)’]
});

 

Step 3.

검색 결과가 선택되었을 때 실행되는 event listener를 추가해야 결과들을 처리할 수 있습니다. 아래 예제에서는 사용자가 지도에서 선택한 결과의 위치를 회전시키고 확대할 수 있습니다.

google.maps.event.addListener(autoComplete, ‘place_changed’, function() {
var place = autocomplete.getPlace();
if (place.geometry) {
map.panTo(place.geometry.location);
map.setZoom(15);
}
});

모바일 앱을 개발중이신가요?

Google Places API for Android는 모바일 앱에서 입력한 주소의 자동 완성 기능을 제공하고 있습니다. GitHub에서 개발자 문서 (developer documentation)와 샘플 어플리케이션 (sample application)을 통해 더욱 자세히 알아보세요!

시작하기

Google의 자동 완성 기능을 모바일, 웹 어플리케이션에 활용하고 싶으신 분들은 아래 링크를 통해 리소스를 받으실 수 있습니다.

 >> 구글 Geo Developers Blog [Map Tips: Get Started with Autocomplete] 보기