안녕하세요! 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 화이팅입니다!!! 우리 조원 너무 좋아 ^______^!!
