[기술 정보]편리한 지도 검색 모바일 앱 개발, 새로운 자동 완성 위젯으로!

2015년 12월 17일, 개발자 뿐만 아니라 사용자 입장에서도 더 쉽고 편리한, 구글 맵 자동 완성 위젯(Autocomplete Widget)이 발표되었습니다. 1. 적은 양의 코드로 쉽게 개발할 수 있고, 2. 적은 입력으로도 쉽게 사용자가 원하는 구글 맵 정보로 안내하는 구글의 모바일 용 자동 완성 위젯! 지금부터 상세히 소개해 드리겠습니다.

Full screen autocomplete widget Overlay autocomplete widget

 

자동 완성 위젯의 장점

이 글을 읽고 있는 여러분은 자동 완성이라는 단어를 보자마자 쉽게 이런 의문을 가질 수도 있을 겁니다.

“원래 있었던 기능 아니야?!”

맞습니다! 저희 SPH에서도 지난 포스팅에서 이미 구글의 자동 완성 기능을 소개한 바 있죠. 하지만 이번에 소개해드리는 자동 완성 위젯은 더 발전된 형태입니다.

첫째, 개발자 입장에서 사용법이 더 간단해졌어요. (코드가 줄었단 의미입니다.)
둘째, UX를 고려한, 두 가지 형태의 위젯으로 제공돼요. (간단히 모드만 변경하면 끝!)
셋째, 구글의 노하우를 바탕으로, 사용자는 이전보다 적은 타이핑으로 원하는 구글 맵 정보에 더 쉽고 빠르게 도달할 수 있습니다.

 

사용해보기

어떤 장점이 있는지 알게 됐으니, 이제는 사용 방법을 알아보겠습니다.

-Android :
먼저 안드로이드 개발 환경에서의 사용 방법입니다.


Step 1. Fragment를 사용할 Activity Layout XML 파일에 추가합니다.

<fragment
  android:id="@+id/place_autocomplete_fragment"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
android:name="com.google.android.gms.location.places.ui.PlaceAutocompleteFragment"
  />

Step 2. Activity의 onCreate() method에 이벤트 리스너를 추가합니다.

// 
PlaceAutocompleteFragment fragment = (PlaceAutocompleteFragment)
    getFragmentManager().findFragmentById(R.id.place_autocomplete_fragment);

fragment.setOnPlaceSelectedListener(new PlaceSelectionListener() {
   @Override
   public void onPlaceSelected(Place place) { // Handle the selected Place
   }
   @Override
   public void onError(Status status) { // Handle the error
   }

Step3. 자동 완성 위젯을 호출하기 위해서 intent를 생성합니다.

try {
   Intent intent =
            new PlaceAutocomplete.IntentBuilder(PlaceAutocomplete.MODE_FULLSCREEN)
           .build(this);
   startActivityForResult(intent, PLACE_AUTOCOMPLETE_REQUEST_CODE);
} catch (GooglePlayServicesRepairableException e) {
   GooglePlayServicesUtil
           .getErrorDialog(e.getConnectionStatusCode(), getActivity(), 0);
} catch (GooglePlayServicesNotAvailableException e) {
   // Handle the exception
}

 

-iOS:


Objective-C. 자동완성 대리자(delegate)를 구현(implement)합니다.

@interface MyViewController () 
@end

@implementation ViewController
.
.
.
- (IBAction)onLaunchClicked:(id)sender {
  // Present the Autocomplete view controller when the button is pressed.
  GMSAutocompleteViewController *acController = [[GMSAutocompleteViewController alloc] init];
  acController.delegate = self;
  [self presentViewController:acController animated:YES completion:nil];
}

- (void)viewController:(GMSAutocompleteViewController *)viewController
    didAutocompleteWithPlace:(GMSPlace *)place {
  // The user has selected a place.
  [self dismissViewControllerAnimated:YES completion:nil];
}

- (void)viewController:(GMSAutocompleteViewController *)viewController
    didAutocompleteWithError:(NSError *)error {
  [self dismissViewControllerAnimated:YES completion:nil];
}

// User pressed cancel button.
- (void)wasCancelled:(GMSAutocompleteViewController *)viewController {
  [self dismissViewControllerAnimated:YES completion:nil];
}

@end

Swift.

import UIKit
import GoogleMaps

class MyViewController: UIViewController {
    
    @IBAction func onLaunchClicked(sender: AnyObject) {
        let acController = GMSAutocompleteViewController()
        acController.delegate = self
        self.presentViewController(acController, animated: true, completion: nil)
    }
}

extension MyViewController: GMSAutocompleteViewControllerDelegate {
    
    func viewController(viewController: GMSAutocompleteViewController!, didAutocompleteWithPlace place: GMSPlace!) {
        // The user has selected a place.
        self.dismissViewControllerAnimated(true, completion: nil)
    }
    
    func viewController(viewController: GMSAutocompleteViewController!, didAutocompleteWithError error: NSError!) {
        self.dismissViewControllerAnimated(true, completion: nil)
    }
    
    func wasCancelled(viewController: GMSAutocompleteViewController!) {
        self.dismissViewControllerAnimated(true, completion: nil)
    }
}

 

사용자의 편의성을 제공하는 완벽한 지도 정보 앱을 개발하려는 분들에게, 이제 자동 완성 위젯이 자꾸만 손이 가는 새우깡처럼 또 하나의 즐거운 선택지가 되어 줄 수 있을 것 같습니다 .

글을 통해 자동 완성 위젯에 대해 더 궁금해지셨습니까? 혹은 구현해보고 싶은 열정이 불타오르시나요? 개발 문서와 code samples 를 참조하시길 바라며, 저는 SPH와 GIS에 대한 새로운 소식을 가지고 다시 찾아뵙겠습니다! 지금까지 SPH 오동환이었습니다. ^^

*이 포스팅의 전체 내용은 Google Geo Developers Blog 를 참조하였습니다.