[Android/Kotlin] Google Maps API 사용하기

현재 진행 중인 프로젝트에 지도API가 필요해서

 

Fragment에 Google Maps를 보여주는 방법을 기록한다.

 

 

 

1. Google API 프로젝트 생성 및 사용 등록

 

Google API에 접속하여 프로젝트 만들기를 클릭한다.

 

새 프로젝트 팝업이 뜨면 프로젝트 이름을 입력하고 프로젝트를 만든다.

 

프로젝트 만들기

 

프로젝트를 만들고 안내에 따라 API 라이브러리로 이동하여 API 사용 등록한다.

 

API 라이브러리 이동 안내

 

Maps SDK for Android 선택

 

Maps SDK for Android 사용

 

 

 

2. API 키 생성 및 설정

 

Google API 대시보드 화면에서

 

사용자 인증 정보 -> 상단의 + 사용자 인증 정보 만들기 -> API 키

 

순으로 클릭. 클릭. 클릭.

 

API 키 생성

 

API 키를 클릭하면 알아서 키가 생성된다.

 

API 키 생성 팝업

 

여기서 키 제한을 클릭하여 생성된 API 키 설정 화면으로 이동한다.

 

패키지 이름, SHA1 지문 입력

 

애플리케이션 제한사항에서 Android 앱을 클릭하고

 

Android 앱의 패키지명과 SHA1 지문을 입력한 후 완료버튼을 클릭한다.

 

 

[Android 앱 패키지명]

Android Project -> Manifest.xml -> package

 

[SHA1 지문 확인 방법]

MAC: Terminal을 열어 아래 명령어 실행

keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Window: cmd를 열어 아래 명령어 실행

"C:\Program Files\Android\Android Studio\jre\bin\keytool" -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

 

 

Android 앱 등록 완료

 

그 다음 Android 앱의 사용량 제한 하단의 API 제한사항에서

 

키 제한을 클릭하고 Maps SDK for Android에 체크가 되어있도록 한다.

 

API 키 제한

 

 

 

3. 그 외 설정

 

생성된 API 키 값을 복사하고

 

API 키 생성 완료

 

Android Project의  Manifest.xml에 <application></application> 안에 아래와 같이 작성한다.

 

<application>        
        <activity> ~~~~~~~~~ </activity>
        <meta-data
                android:name="com.google.android.geo.API_KEY"
                android:value="복사한 API키" />
</application>

 

Tool -> SDK Manager -> SDK Tools 순으로 들어가서

 

Google Play services를 체크하고 설치한다.

 

Google Play services 설치

 

그래들 파일에서 dependencies에 관련 라이브러리를 추가한 후 Android Studio 상단의 Sync Now를 클릭한다.

 

지도 관련 Google Play 라이브러리

 

 

4. xml, kotlin 소스 작성

 

Google Maps를 보여줄 fragment.xml와 fragment.kt를 알맞는 위치에 만들고 아래와 같이 작성한다.

 

fragment.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".gmap.GmapFragment">
 
    <com.google.android.gms.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
 
</androidx.constraintlayout.widget.ConstraintLayout>

 

fragment.kt

class GmapViewFragment : Fragment(), OnMapReadyCallback {
 
    lateinit var mContext: Context
 
    override fun onAttach(context: Context) {
        super.onAttach(context)
 
        if (context is BackActivity) {
            mContext = context
        }
    }
    private lateinit var mView: MapView
 
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        var rootView = inflater.inflate(R.layout.fragment_gmap_view, container, false)
        mView = rootView.findViewById(R.id.mapView)
        mView.onCreate(savedInstanceState)
        mView.getMapAsync(this)
        return rootView
    }
 
    override fun onMapReady(googleMap: GoogleMap) {
        val marker = LatLng(37.568291,126.997780)
        googleMap.addMarker(MarkerOptions().position(marker).title("여기"))
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(marker))
        googleMap.moveCamera(CameraUpdateFactory.zoomTo(15f))
    }
 
}

 

 

여기까지 실행해보면 지도가 없는 구글맵이 나온다.

 

지도 없는 구글맵

 

아무리 해도 지도가 안나와서 헤맸는데 떡방로그 님의 글을 보고 해결했다.

 

맵을 보여줄 mView에 대해서도 생명주기를 맞춰주니 정상적으로 작동했다.

 

class GmapViewFragment : Fragment(), OnMapReadyCallback {
 
    lateinit var mContext: Context
 
    override fun onAttach(context: Context) {
        super.onAttach(context)
 
        if (context is BackActivity) {
            mContext = context
        }
    }
    private lateinit var mView: MapView
 
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        var rootView = inflater.inflate(R.layout.fragment_gmap_view, container, false)
        mView = rootView.findViewById(R.id.mapView)
        mView.onCreate(savedInstanceState)
        mView.getMapAsync(this)
        return rootView
    }
 
    override fun onMapReady(googleMap: GoogleMap) {
        val marker = LatLng(37.568291,126.997780)
        googleMap.addMarker(MarkerOptions().position(marker).title("여기"))
        googleMap.moveCamera(CameraUpdateFactory.newLatLng(marker))
        googleMap.moveCamera(CameraUpdateFactory.zoomTo(15f))
    }
 
    override fun onStart() {
        super.onStart()
        mView.onStart()
    }
    override fun onStop() {
        super.onStop()
        mView.onStop()
    }
    override fun onResume() {
        super.onResume()
        mView.onResume()
    }
    override fun onPause() {
        super.onPause()
        mView.onPause()
    }
    override fun onLowMemory() {
        super.onLowMemory()
        mView.onLowMemory()
    }
    override fun onDestroy() {
        mView.onDestroy()
        super.onDestroy()
    }
 
}

 

 

완성된 구글맵

 

 

끝.

 

 

 

 

 

 

 

참고.

https://webnautes.tistory.com/647

https://db-log.tistory.com/entry/KotlinFragment에서-MapView로-GoogleMap사용하기