GDSC HUFS 3기/Android with Kotlin Team 2

[2팀] 35 Android 구글 맵 사용하기

어둠의 그림자 2021. 12. 7. 22:01

이 글은 이것이 안드로이드다 with 코틀린(개정판)를 참고하여 작성하였습니다.

작성자 : 김민서

개발환경은 Windows, Android Studio입니다. 

 

 

더보기

0. 프로젝트 생성하기

프로젝트를 생성하기 앞서서 먼저 GooglePlayService라는 sdk Tools를 설치해주고, Google Maps Activity로 선택해서생성해줘야한다. 그리고 구글 사이트에서 api키를 생성받아 코드에 넣어주는 과정을 거쳐야한다.

💡 Google Play Service 추가

생성하기 앞서 Google Play Service라는 sdk Tools를 설치해줘야한다. 강의에서는 Welcome 화면(초기화면)에서 해준다(보통 android studio를 켰을때, 작업하던 프로젝트가 부팅되는데, 시작화면으로 돌아가는 방법은 아래와 같이 file -> close project를 누르면된다 )

🔦 근데 강의 welcome 화면이랑 구성이 좀 차이가 있다,,

(좌) 강의에서 나온 welcome 화면 / (우) 실제 실행시킨 welcome 화면

🔦 따라서 구글링을 해보니 file->Setting에 들어가면 동일하게 설정할수있었다

Google Play Service를 선택하여 깔아주자.

💡설치 후에 Google Maps Activity를 선택해서 새 프로젝트를 생성해주자

💡 API키 생성및 코드 적용

프로젝트를 생성하고 나면, google_maps_api.xml이 자동으로 열려있다. 해당 코드중, url에 들어가면(ctrl키 누르고 클릭) google cloud platform 사이트에 접속된다. 근데 이마저도 강의와 많이 달라서😐두번째 링크에 접속하면 api 생성방법이 상세히 나와있어서 따라하면 된다.

첫번째 체크 링크: google cloud platform / 두번째 체크링크 : 설치및 api 생성방법

+)저 링크에 들어가서 바로 인증키를 만들면 제한사항이 바로 적용되는데 내 경우 강의와 다르게 적용되서 제한점을 수동으로 설정해주었다. 총 2가지를 설정해주어야한다

1. android 앱 체크표시

2. 사용량제한 

위의 사진을 참고해서 아래 android 앱의 사용량제한에 적용

위의 과정을 따라하면 api키가 생성이된다! 이를 <string>태그에 넣어주면 된다

💡 Emulator 실행되는지 체크

 

더보기

2. Google Map 사용해보기

Emulator를 실행해보면 Sydney의 지도가 출력되는데, 이는 코드에서 sydeny 좌표를 넣어주었기 때문이다!

코드를 수정해서 Google Map을 사용해보자

코드상에서 크게 두가지; maker, Camera를 설정해주었다

그에 앞서 코드상에 LatLng 파라미터로 학교의 좌표를 넣어주고, marker의 위치및 title도 변경해주었다.

💡 marker 설정

🔦 marker의 경우 MarkerOptions()라는 함수가 마커를 그려준다. 

//MapsActivity.kt

//함수의 파라미터로 사용할 map을 전달해줌
mMap = googleMap
// Add a marker in Sydney and move the camera
val mohyun = LatLng(37.337777, 127.269379)
//마커
val marker = MarkerOptions()
	.position(mohyun)//마커의 위치
	.title("Marker in mohyun")//클릭했을때 나오는 텍스트
mMap.addMarker(marker)

+)마커 핀 아이콘 바꾸기

우선 png 아이콘을 drawable 폴더에 넣어준다.

이 아이콘을 적용시켜주려면 BitmapDescriptor로 변환 시켜줘야한다.

icon 매개변수 형으로 위와 같이 뜬다.

그 후, 해당 함수를 이용하여 marker.png를 파라미터로 넣어줘서 변환시켜준다.

getDrawable을 사용해서 가져온후 형변환을 시켜줬다. 

더불어, 그냥 적용하면 애뮬레이터에서 본 png 크기 그대로 적용이되기때문에 크기 변환 코드도 작성해주었다.

fun getDiscriptorFromDrawable(drawableId: Int) : BitmapDescriptor{
        var bitmapDrawable:BitmapDrawable
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP){
            bitmapDrawable = getDrawable(R.drawable.marker) as BitmapDrawable
        }
        else{
            bitmapDrawable = resources.getDrawable(R.drawable.marker) as BitmapDrawable
        }
        //마커 크기 변환
        val scaledBitmap = Bitmap.createScaledBitmap(bitmapDrawable.bitmap, 100,100,false)
        val discriptor = BitmapDescriptorFactory.fromBitmap(scaledBitmap)
        return BitmapDescriptorFactory.fromBitmap(scaledBitmap)
    }

 

적용시키면 아래와 같이 인식해서 왼쪽 출력된다

 

💡 Camera 설정

	//카메라 세부설정
        val cameraOption = CameraPosition.Builder()
            .target(mohyun)//카메라 위치
            .zoom(12f)//줌 정도
            .build()
        val camera = CameraUpdateFactory.newCameraPosition(cameraOption)
        mMap.moveCamera(camera)

 

CameraPostion 함수를 사용하면 줌 기능 설정가능!