[Android/study] 네이버 지도① 맵 사용하기, 현재 위치 표시, 마커 띄우기

내가 네이버 지도를 사용해보며 정리하고 싶었던 내용을 작성해보고자 한다.

📌 네이버 지도 사용하기

클라이언트 ID 발급

네이버 지도 SDK를 사용하려면 네이버 클라우드 플랫폼에서 애플리케이션을 등록하고 클라이언트 ID를 발급받아야 한다.

NAVER CLOUD PLATFORM

네이버 클라우드 플랫폼에 로그인 한 후 콘솔에 들어가 Service - AI·NAVER API를 누른다.

그 다음 Application 등록을 누른다.

애플리케이션 이름을 적고 이용할 서비스를 모두 선택한다. 또 앱 패키지 이름을 적어준 후 등록한다.

등록한 후 Application에 다시 들어가면 이렇게 자신이 신청한 서비스가 뜬다. 앱 이름 아래에 있는 '인증정보'를 클릭하면 다음과 같이 Client ID와 Client Secret이 나온다.

의존성 추가, 클라이언트 ID 지정

기본적인 사용법은 아래 링크에 나와있어 따라하기만 하면 된다. 내가 해본 부분만 간단히 포스팅 해 볼 생각이다.

Home · 네이버 지도 안드로이드 SDK

먼저 아래 코드를 추가해야하는데, 처음에 어디에 추가해야하는지 몰라 애를 먹었다.

allprojects {
    repositories {
        google()
        mavenCentral()
        maven {
            url 'https://naver.jfrog.io/artifactory/maven/'
        }
    }
}

알아보니 Gradle Scripts - settings.gradle 파일에 추가하면 되는 것이었다.

위와 같이 추가해준다.

그리고 다음과 같이 네이버 지도 SDK에 대한 의존성을 선언한다.

dependencies {
    // 네이버 지도 SDK
    implementation 'com.naver.maps:map-sdk:3.15.0'
}

그 다음, 최적의 위치를 반환하는 구현체인 FusedLocationSource를 사용하기위해 다음과 같이 play-services-location에 대한 의존성도 추가한다. 사용자의 현재 위치를 표시해주기 위한 것이다. 

implementation("com.google.android.gms:play-services-location:17.0.0")

build.gradle(:app) 파일의 dependencies에 붙여넣어 준다.

다음은 AndroidManifest.xml의 <meta-data>로 클라이언트 ID를 지정한다. 다음과 같이 <application> 아래에 <meta-data> 요소를 추가한다. value에는 네이버 클라우드 플랫폼에서 발급받은 클라이언트 ID를 지정한다.

<application>
    <meta-data
        android:name="com.naver.maps.map.CLIENT_ID"
        android:value="YOUR_CLIENT_ID_HERE" />
</application

그리고 위쪽에 다음과 같은 <uses-permission>도 추가한다. 

<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.INTERNET" />

📌 현재 위치 표시 및 기본 마커 띄우기

지도 표시하기

우선 지도를 띄울 새로운 MapActivity를 만든다. 그 다음 아래 코드를 activity_map.xml에 넣었다. 여기서 지도를 화면에 나타내는 방법 중 가장 권장되는 MapFragment를 사용하였다. MapFragment는 레이아웃 XML 또는 FragmentRransaction을 사용해 추가하는데, 나는 레이아웃 XML을 사용하였다.

<?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=".MapActivity">

    <fragment
        android:id="@+id/map_fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:name="com.naver.maps.map.MapFragment" />

</androidx.constraintlayout.widget.ConstraintLayout>

NaverMap 객체 얻어오기, 특정 좌표 마커 찍기

API를 호출하기 위해서는 NaverMap 객체가 필요하다. NaverMap 객체는 인터페이스 역할을 한다. getMapAsync() 메서드로 OnMapReadyCallback을 등록하면 비동기로 NaverMap 객체를 얻을 수 있으며, 객체를 얻으면 onMapReady() 콜백 메서드가 호출된다.  onMapReady() 메서드에서 Marker를 생성하거나 삭제할 수 있다.

public class MapActivity extends AppCompatActivity implements OnMapReadyCallback {
        private static final String TAG = "MapActivity";

        @Override
        protected void onCreate (Bundle savedInstanceState){
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_map);

            FragmentManager fm = getSupportFragmentManager();
            MapFragment mapFragment = (MapFragment) fm.findFragmentById(R.id.map_fragment);
            if (mapFragment == null) {
                mapFragment = MapFragment.newInstance();
                fm.beginTransaction().add(R.id.map_fragment, mapFragment).commit();
            }

            mapFragment.getMapAsync(this);
        }

        @Override
        public void onMapReady (@NonNull NaverMap naverMap){
            Log.d(TAG, "onMapReady");

            // 지도에 마커 표시
            Marker marker = new Marker();
            marker.setPosition(new LatLng(37.5670135, 126.9783740));
            marker.setMap(naverMap);
    }

마커 객체를 생성한 후 position 속성에 좌표를 지정하고 map 속성에 지도 객체를 지정해야 해당 좌표에 마커가 나타난다.

예시에서 좌표로 지정한 것은 서울특별시청 좌표로, 애뮬레이터로 보면 다음과 같이 정상적으로 마커가 찍힌 모습을 볼 수 있다.

이 외에도 마커의 아이콘, 색상, 크기, 투명도 등을 변경할 수 있다. 또한 마커 자체를 회전하고 원근감을 주거나, 마커 및에 캡션을 다는 등 다양하게 변형시킬 수 있다.

사용자 현재 위치 표시하기

onCreate 위쪽에 다음과 같이 변수를 선언해주었다. NaverMap 객체에 위치 소스를 지정하고 권한 설정을 하기 위한 것이다.

private static final int PERMISSION_REQUEST_CODE = 100;
private static final String[] PERMISSION = {
        Manifest.permission.ACCESS_FINE_LOCATION,
        Manifest.permission.ACCESS_COARSE_LOCATION
};
private FusedLocationSource mLocationSource;
private NaverMap mNaverMap;

onCreate 내부에 아래 코드를 추가한다.

mLocationSource =
        new FusedLocationSource(this, PERMISSION_REQUEST_CODE);

onMapReady 내부에 아래 코드를 추가한다. 

// NaverMap 객체에 위치 소스 지정
mNaverMap = naverMap;
mNaverMap.setLocationSource(mLocationSource);

// 권한 확인, onRequestPermissionsResult 콜백 메서드 호출
ActivityCompat.requestPermissions(this, PERMISSION, PERMISSION_REQUEST_CODE);

onRequestPermissionsResult() 메서드를 다음과 같이 작성한다. 이제 FusedLocationSource를 생성하여  NaverMap에 지정하는 과정을 완료하였다.

@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);

    // 권한 획득 여부 확인
    if (requestCode == PERMISSION_REQUEST_CODE) {
        if (grantResults.length > 0
                && grantResults[0] == PackageManager.PERMISSION_GRANTED) {
            mNaverMap.setLocationTrackingMode(LocationTrackingMode.Follow);
        }
    }
}

애뮬레이터를 실행하면 다음과 같이 사용자의 현재 위치가 잘 나오는 것을 볼 수 있다.

다음 포스팅에서는 마커 여러개 찍기, DB에서 위도와 경도를 가져와 마커 찍기를 작성할 예정이다.