[TIL-230512] Google Map Api 적용하기

문득 회사에서 하는 개발에 지겨움(?)을 느끼고 있을 때쯤, TIL(Today I Learned)라는 용어를 알게 되어, 간단한 앱 제작을 목표로 TIL을 작성하게 되었습니다.

오늘 첫 글로 Google Maps API를 Android Project에 처음 적용하는 방법에 대해 작성해보겠습니다.

 

1. Google Cloud Console 프로젝트 생성하기

일단 모든 API를 사용하기 위해서는 API키가 필요합니다. Google Maps는 그 전에 Google Cloude Console이라는 페이지로 이동하여 프로젝트를 생성합니다.

* Google Cloud Platform Console 링크

Google 클라우드 플랫폼

 

위의 링크를 클클, 프로젝트를 만들 Google 계정으로 로그인하면 아래의 화면을 만날 수 있습니다.

Console에 접속하기 위해 서비스 약관 체크하여 동의 및 계속하기를 클릭합니다.

 

동의 및 계속 하기 클릭 후 아래 노란색으로 표기한 부분을 클릭합니다.

클릭 후 화면에서 오른쪽 위에 노란색으로 표기한 새 프로젝트 버튼을 클릭합니다.

그러면 프로젝트 이름 및 만들기 버튼이 보이는데, 적당한 프로젝트 이름을 작성하고 만들기 버튼을 클릭합니다.

 

만들기 버튼을 클릭하면, 첫 화면으로 돌아간후에 프로젝트가 만들어졌다는 메세지를 띄우고, 왼쪽 위의 프로젝트 선택 을 클릭하게 되면, 방금 생성한 프로젝트 이름이 보입니다. 프로젝트 이름을 클릭합니다.

클릭 후 아래의 빠른 액세스 목록에서 API 서비스를 클릭합니다.

2. API 키 생성하기

클릭 후 화면에서 왼쪽 메뉴 목록 중 라이브러리를 클릭합니다.

클릭을 하게되면 Google에서 지원하는 API 목록들을 볼 수 있는데, Google Maps API를 사용할 것이기 때문에,  Maps SDK for Android를 클릭합니다

클릭하면 아래와 유사한 화면이 출력되고, 사용 버튼을 클릭하여 사용 설정을 진행합니다. (아래는 사용 버튼 클릭 후 화면)

 

위의 API 사용 설정됨 메세지로 변경됨을 확인하였다면, 위의 화면에서 왼쪽 3줄 버튼 클릭하여, API 서비스 - 사용자 인증 정보를 클릭하여 화면으로 이동합니다.

 

사용자 인증정보 화면에서 + 사용자 인증 정보 만들기 버튼을 클릭한 후, API 키가 필요하기 때문에 해당 메뉴를 클릭한다.

키 생성 중이라는 메세지가 뜨다가, 아래와 같이 API 키가 생성되었습니다. 일단 API 키가 생성되었지만, 아무나 쓰지 못하게 하기 위해서 제한 사항을 추가해야 합니다. 

 

키 제한사항을 적용하기위해 아래의 설정을 선택 혹은 작성합니다.

애플리케이션 제한사항 설정 : 저는 Android 앱을 만들기 때문에 Android 앱 에 체크했습니다

패키지 이름 : 만들 Android 앱의 패키지 이름을 작성합니다. (미리 Android 프로젝트를 만들어놔야하겠죠?)

SHA-인증서 디지털 지문 : 이 항목은 Windows + R키로 CMD 창을 열어 명령어 입력 후 나오는 값을 입력해야하는데요
(위의 오른쪽 부분의 명령어이긴 합니다.)
저는 Windows 환경이기 때문에 아래와 같이 입력하였습니다.

"<<Android Studio가 설치된 경로>\Android Studio\jbr\bin\keytool" -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android

* 경로가 \jbr\bin\keytool 이 아닌 \jre\bin\keytool 일 수 있습니다.

명령어를 입력하였다면 아래와 같은 화면이 출력되는데, 그 중 SHA-1 항목의 값을 SHA-인증서 디지털 지문 칸에 입력합니다.

마지막으로 API 제한사항 항목에서 키 제한을 체크하고 바로 아래 API 선택하는 란에 Maps SDK for Android를 선택해줍니다.

그리고 저장 버튼을 클릭합니다.

저장이 완료한 후, 사용자 인증 정보 창으로 이동하게 되는데, 아래 화면에서 키 표시 링크를 클릭하여, APK 키를 복사해둡니다. 추후에 Android 프로젝트에 적용할 예정입니다.

 

3. Android 프로젝트에 APK 키 적용하기

API 키를 추출하였으니, 바로 Android 프로젝트에 적용하겠습니다.

우선 APK 키를 안전하게 보관하기 위해 사용되는 Secrets Gradle Plugin을 설치하기 위해

첫번째로, AndroidManifest.xml 파일에 아래와 같이 작성합니다.

 

<application
...
>
        <meta-data
            android:name="com.google.android.geo.API_KEY"
            android:value="<<YOUR_API_KEY>>" />

</application>

저는 아래와 같이 작성하였습니다.

 

4. Google Play Services 설치 및 적용하기

다음은, 프로젝트에 Maps API를 사용하기위해 Google Play Services를 설치합니다.
Android Studio 상단 메뉴 중 Tools - SDK Manager를 클릭하여, 아래의 창을 띄웁니다.

SDK Tools탭을 클릭하여 Google Play Services 항목을 클릭 후 Apply > OK 순으로 클릭합니다.
(설치가 되지 않은 상태라면, Apply 클릭 시 설치 창이 출력됩니다.)

설치한 Google Play Services를 적용하기위해 app모듈의 build.gradle 파일에도 아래와 같이 작성합니다.

implementation 'com.google.android.gms:play-services-maps:17.0.0'
implementation 'com.google.android.gms:play-services-location:17.0.0'

 

* implementation 항목을 최신으로 적용하려면, 항목에 마우스를 올려놓으면 최신 버전 작성여부를 묻습니다.
최신버전으로 적용하고 싶으시면 참고하세요!

 

5. 코드 작성하기

다음은, 지도를 출력하기 위한 코드를 작성합니다.

먼저 지도를 출력할 fragment를 layout 파일에 작성합니다.

중간에 <fragment> 내용이 작성할 코드입니다.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/map"
        tools:context=".MainActivity"
        android:name="com.google.android.gms.maps.SupportMapFragment" />

</androidx.constraintlayout.widget.ConstraintLayout>

tools:context : Fragment의 기본 활동을 MapsActivity지도 활동 파일에 정의된 로 설정합니다.
android:name : Fragment의 클래스 이름을 Map Activity File에서 사용되는 프래그먼트 유형으로 설정합니다.

 

 

위에 layout에 선언한 MainActivity의 코드도 작성합니다.

class MainActivity : AppCompatActivity(), OnMapReadyCallback {
    /**
     * GoogleMap 객체는 지도 데이터 및 뷰에 대한 액세스 권한을 제공합니다.
     */
    private lateinit var mMap: GoogleMap

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        val mapFragment = supportFragmentManager
            .findFragmentById(R.id.map) as SupportMapFragment
        mapFragment.getMapAsync(this)
    }

    /**
     * onMapReady 콜백은 맵을 사용할 준비가 되면 호출됩니다.
     * 여기에서 마커 또는 지도의 라인을 추가하거나
     * Listener 추가하거나 지도 화면을 이동할 수 있습니다.
     */

    override fun onMapReady(googleMap: GoogleMap) {
        mMap = googleMap

        val seoul = LatLng(37.56, 126.97)
        mMap.addMarker(MarkerOptions() // 마커를 표기합니다.
            .position(seoul) // 위치는 위에 선언한 좌표 (서울)
            .title("서울"))
        mMap.moveCamera(CameraUpdateFactory.newLatLng(seoul)) // 선언한 위치에 맞게 첫번째 설정을 지도 위치와 카메라 설정을 합니다.
    }

}

코드를 작성한 후에 앱을 빌드하여 설치하면 아래의 지도화면과 서울에 찍혀있는 마커를 볼 수 있습니다.

---

Google Maps API를 사용하는 방법 및 간단한 예제코드를 정리해보았습니다.

잘못된 내용이 있다면 댓글 부탁드리고, 내용이 좋았다면 공감, 구독 부탁드려요!