[개발일지] 구글 지도 API 활용하기-(1)

안녕하세요! miTHON의 위치 정보 및 안드로이드 서비스 단 담당 강현지입니다.

MIDAS Research Festival의 해커톤인 ESC 주제로 저희는 마라톤 앱인 miTHON에 지도 관련 기능이 많습니다.

아래 기획서를 받고 구현을 위해 구글 지도 API를 활용하였고, 그 내용을 공유하고자 게시글을 올리게 되었습니다~

그럼 우선 기획서부터 살펴볼까요?

1) [그룹] 이벤트 생성하기 (경로 생성, 식수대 처리)

2) [개인][메인] 기록 시작

위 기획서를 바탕으로 구글 지도 API를 활용하였고, 그 기능을 5단계로 설명하려고 합니다.

해당 게시글에서는 3단계까지 소개하겠습니다.

[ 1단계: 맵뷰 띄우기 ]

1. 사이트에 가서 API Key를 발급 받습니다.

(레퍼런스: https://developers.google.com/maps/documentation/android-api/signup?hl=ko)

 

2. app 폴더 밑에 있는 build.gradle에 가서 구글 맵 API 컴파일 설정을 해줍니다. Google Play Services 전체 라이브러리(com.google.android.gms:play-services)를 추가하는 대신에 Google Maps Android API를 사용하기 위해 필요한 라이브러리만 추가해주는 것이 좋습니다.

그리고 SDK Manger에서 Google Play services를 설치한다. (설치 안하고 빌드시 에러와 동시에 설치하는 링크를 제공할 것입니다.)

// Google Maps Android API

compile 'com.google.android.gms:play-services-maps:11.0.2'

compile 'com.google.android.gms:play-services-location:11.0.2'

구글 플레이 서비스를 이용하려는 해당 뷰에 아래 코드를 넣으면 구글 플레이 서비스를 이용할 수 있습니다.

GoogleApiAvailability.getInstance().isGooglePlayServicesAvailable(this);

 

3. AndoridManifest.xml에 가서 아래와 같이 meta-data 설정을 해줍니다.

<!-- 구글 API KEY 설정 -->
<meta-data
    android:name="com.google.android.geo.API_KEY"
    android:value=" 발급받은 API key'" />

 

4. 맵뷰를 구현할 화면의 onCreate 메소드에 SupportMapFragment를 이용해 지도 객체를 생성합니다. Fragment 객체를 지도를 처리할 Activity)에 추가한다. 프래그먼트에서 getMapAsync()를 호출하여 콜백을 등록합니다.

(레퍼런스: https://developers.google.com/maps/documentation/android-api/map?hl=ko)

@Override

protected void onCreate(Bundle savedInstanceState) {

    super.onCreate(savedInstanceState);



    // BitmapDescriptorFactory 생성하기 위한 소스

    MapsInitializer.initialize(getApplicationContext());



    SupportMapFragment mapFragment = ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map));

    mapFragment.getMapAsync(this);

}

 

5. 맵뷰를 구현할 화면에 OnMapReadyCallback 인터페이스를 구현하여 onMapReady 메소드를 오바라이딩 합니다. onMapReady은 콜백 메소드로서 GoogleMap 객체의 핸들을 가져옵니다.

(레퍼런스: https://developers.google.com/android/reference/com/google/android/gms/maps/OnMapReadyCallback )

public interface OnMapReadyCallback: Callback interface for when the map is ready to be used.

@Override

public void onMapReady(final GoogleMap googleMap) {



    this.mGoogleMap = googleMap;



    String coordinates[] = {"37.397446", "127.105714"};

    double lat = Double.parseDouble(coordinates[0]);

    double lng = Double.parseDouble(coordinates[1]);



    LatLng position = new LatLng(lat, lng);

    GooglePlayServicesUtil.isGooglePlayServicesAvailable(MapActivity.this);



    // 맵 위치이동.

    this.mGoogleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(position, 15));



}

 

위의 코드 실행결과 아래와 같이 지정한 위경도 좌표에 포커스가 된 맵뷰를 나타낼 수 있습니다.

[ 2단계: 화면에 마커 표시 및 마커 클릭 이벤트 ]

1. 맵뷰가 구현된 화면에 OnMapClickListener, OnMapLongClickListener, OnInfoWindowClickListener 인터페이스를 구현하여 OnMapClick, OnMapLongClick, OnInfoWindowClick 메소드를 오버라이딩합니다.

(레퍼런스: https://developers.google.com/android/reference/com/google/android/gms/maps/GoogleMap.OnMapClickListener)

 

2. 1단계에서 오버라이드한 OnMapReady 메소드의 구글 맵 지도에 클릭 이벤트를 세팅합니다.

@Override

public void onMapReady(final GoogleMap googleMap) {

    mGoogleMap = googleMap;



    mGoogleMap.setOnMapClickListener(this);

    mGoogleMap.setOnMapLongClickListener(this);

    mGoogleMap.setOnInfoWindowClickListener(this); //정보창 클릭 리스너(마커 삭제 이벤트)

}

 

3. 오버라이딩한 OnMapClick, OnMapLongClick, OnInfoWindowClick 메소드에 아래와 같이 클릭했을 때 나타날 이벤트를 설정합니다. 이때 MarkerOptions를 이용해 마커를 커스터마이징 할 수 있습니다. (마커가 표시될 위치, 아이콘, 타이틀 등 추가 가능)

 

- 지도를 클릭했을 때 "출발" 마커 생성

@Override

public void onMapClick(LatLng latLng) {

    MarkerOptions markerOptions = new MarkerOptions();



        //add marker

        markerOptions.position(latLng);

        markerOptions.icon(BitmapDescriptorFactory.fromResource(R.mipmap.ic_marker_pink));

        markerOptions.title("출발");

        mGoogleMap.addMarker(markerOptions).showInfoWindow();



        // 맵셋팅

        arrayPoints.add(latLng);

        arrayMarkerOptions.add(markerOptions);

}

 

- 지도를 길게 클릭했을 때 polyLine 생성

@Override

public void onMapLongClick(LatLng latLng) {

    // TODO

    // 마커를 길게 누를 경우 발생할 이벤트 작성

}

 

- 마커 info창을 클릭했을 때 해당 마커 삭제 이벤트

@Override

public void onInfoWindowClick(Marker marker) {

    // step2에서만 삭제 가능 && 시작 위치는 삭제 못함

    if((getViewPager().getCurrentItem() == 1) && !arrayPoints.get(0).equals(marker.getPosition())){

        // 지도 초기화

        mGoogleMap.clear();



        // 리스트에서 마커 삭제

        arrayPoints.remove(marker.getPosition());

        arrayMarkerOptions.removeIf(v -> v.getPosition().equals(marker.getPosition()));

    }

}

        

[ 3단계: 마커를 연결하는 Polyline 생성 ]

1. 마커를 연결할 polyLine 생성은 PolylineOptions를 사용합니다. (라인 색, 두께 등 지정 가능)

// polyline 생성

public void drawPolyline(){

    polylineOptions = new PolylineOptions();

    polylineOptions.color(Color.RED);

    polylineOptions.width(5);

    polylineOptions.addAll(arrayPoints);

    mGoogleMap.addPolyline(polylineOptions);

}

 

2. [2단계]의 OnMapLongClick 메소드에 Polyline을 그리는 로직을 작성하여 마커를 길게 누를 경우 마커 리스트를 연결하는 polyLine을 만들 수 있습니다.

@Override

public void onMapLongClick(LatLng latLng) {

    if(getViewPager().getCurrentItem() == 1) { // 2page

        polylineOptions.addAll(arrayPoints);

        mGoogleMap.addPolyline(polylineOptions);

    }

}

우선 여기까지 해서 구글 지도 API 활용하기 포스팅을 마치겠습니다.

구글 지도 API는 처음 사용하시는 분들도 쉽게 사용할 수 있을 만큼 API 문서도 잘 정리되어있고, 예제 소스도 많이 있습니다.

생각보다 지도 관련 결과물이 잘 나와서 매우 뿌듯하네요~ 다음번 포스팅은 현재 위치 받아오기와 실시간 트래킹에 대해 소개해 드리겠습니다.

그럼 다음 포스팅에서 봐요~~

4-GRAM 화이팅입니다!!! 우리 조원 너무 좋아 ^______^!!