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

구글에서는 개발자들이 자동 완성 기능을 어플리케이션에 활용할 수 있도록 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의 자동 완성 기능을 모바일, 웹 어플리케이션에 활용하고 싶으신 분들은 아래 링크를 통해 리소스를 받으실 수 있습니다.

• Google Places API Developers Guide
• Google Places API Javascript API
• Google Places API Web Services
• Google Places API for Android
• Google Places API for iOS

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

 

Powered by Froala Editor

SPH는 Google Maps, SuperMap, Maxar Technologies 등 다양한 제품군을 가지고 있으며, 고객의 사례에 꼭 맞는 무료 세미나 및 인적 컨설팅을 제공하고 있습니다. 더욱 자세한 이야기를 나누고 싶으시다면, 여기에서 문의 주시길 바라며, SPH에서 발행하는 GIS / 로케이션인텔리전스 관련 최신 소식을 받아보고 싶으신 분들은 페이스북 페이지 또는 뉴스레터를 구독해주시길 바랍니다