[Flutter] 네이버 지도 API key 발급 및 지도 표출 🗺️

1. 네이버 지도 Api key 발급

https://www.ncloud.com/product/applicationService/maps

NAVER CLOUD PLATFORM

 

* 1-1. Naver Cloud Platform에서 Application 등록

 

 

* 1) Application 이름 입력

   2) Service 선택

   3) 서비스 환경 등록

 

[ Maps Service ]

Web Dynamic Map	JavaScript 형태의 네이버 지도 플랫폼으로, 사용자 웹 서비스 또는 애플리케이션에 네이버 지도 기능을 구현할 수 있도록 다양한 클래스와 라이브러리를 제공
Moblie Dynamic Map	네이버 지도 Android 개발 도구로, Android 운영체제의 모바일 환경에서 네이버 지도를 사용할 수 있도록 다양한 클래스와 메소드를 제공
Static Map	REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메소드를 이용하여 네이버 지도 이미지를 받을 수 있음
Directions 5	REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메소드를 이용하여 출발지-목적지 간의 경로 정보를 요청하고 응답으로 경로 데이터 배열을 반환 받음
Directions 15	REST 형식을 따르는 네이버 지도 인터페이스로 HTTP GET 메서드를 이용하여 출발지와 목적지 간의 경로 정보를 요청하고 응답으로 경로 데이터 배열을 반환 받음
Geocoding	REST 형식을 따르는 네이버 지도 인터페이스로, HTTP GET 메소드를 이용하여 지번 도로명을 좌표값으로 반환 받는 API
Reverse Geocoding	REST 형식을 따르는 네이버 지도 인터페이스로, HTTP GET 메소드를 이용하여 지도 좌표값을 주소 정보(지번, 도로명, 법정동, 행정동)으로 반환 받는 API

 

* Adroid 앱 피키지 이름과 iOS Bundle ID는 Android Studio 프로젝트의 android/app/build.gradle.kts 파일에 있는 namespace 사용

 

 

* 1-2. 등록된 Application 인증 정보 확인

---

2. 에뮬레이터(AVD)에 지도 표출

* 2-1. 지도 초기화 및 생성

 

[ lib/main.dart ]

import 'package:flutter/material.dart';
import 'package:flutter_naver_map/flutter_naver_map.dart';

// 지도 초기화
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await NaverMapSdk.instance.initialize(clientId: '발급 받은 Client ID');
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

// 지도 생성
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: NaverMap(
          options: const NaverMapViewOptions(),
          onMapReady: (controller) {
            print("네이버 맵 로딩됨!");
          },
        ),
      ),
    );
  }
}

 

 

[ android/app/build.gradle.kts ]

 

* ndkVersion & minSdk 버전 수정

* 네이버 맵 플러그인이 SDK 21 버전 이상을 요구함으로 최소 버전을 설정 해야 함

android {
    namespace = "com.example.flutter_study"
    compileSdk = flutter.compileSdkVersion
    //ndkVersion = flutter.ndkVersion
    ndkVersion = "27.0.12077973" // 수정

    compileOptions {
        sourceCompatibility = JavaVersion.VERSION_11
        targetCompatibility = JavaVersion.VERSION_11
    }

    kotlinOptions {
        jvmTarget = JavaVersion.VERSION_11.toString()
    }

    defaultConfig {
        // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
        applicationId = "com.example.flutter_study"
        // You can update the following values to match your application needs.
        // For more information, see: https://flutter.dev/to/review-gradle-config.
        //minSdk = flutter.minSdkVersion
        minSdk = 23 // 수정
        targetSdk = flutter.targetSdkVersion
        versionCode = flutter.versionCode
        versionName = flutter.versionName
    }

    buildTypes {
        release {
            // TODO: Add your own signing config for the release build.
            // Signing with the debug keys for now, so `flutter run --release` works.
            signingConfig = signingConfigs.getByName("debug")
        }
    }
}

 

 

[ android/gradle.properties ]

 

* android.nonTransitiveRClass의 값을 false로 설정

org.gradle.jvmargs=-Xmx8G -XX:MaxMetaspaceSize=4G -XX:ReservedCodeCacheSize=512m -XX:+HeapDumpOnOutOfMemoryError
android.useAndroidX=true
android.enableJetifier=true
android.nonTransitiveRClass=false // 추가

 

 

[ pubspec.yaml  ]

 

* 패키지 추가 → https://pub.dev/packages/flutter_naver_map

flutter_naver_map | Flutter package

dependencies:
  flutter_naver_map: ^1.3.0+1 // 추가
  flutter:
    sdk: flutter
  http: ^0.13.6

 

 

* 2-2. pubspec.yaml 파일에서 Pub get 진행

 

 

* 2-3. 에뮬레이터(AVD) 추가

 

* 원하는 AVD 선택 후 설치

 

 

* 2-4. 에뮬레이터(AVD) 실행

 

 

* 2-5. 작성한 코드 실행 후 에뮬레이터에 표출되는 지도 확인

 

* 실행할 기기 선택 후 세모 버튼 클릭

 

 

* 참고

코드 수정 후 번개 모양 아이콘 클릭하면 수정한 코드대로 지도에 적용됩니다 !

 

---

빠이 (´▽`ʃ♡ƪ)

---