[Flutter] 네이버 지도 사용해보기

API 사용 신청 방법을 알아보고, 간단한 지도 출력 예제 코드를 작성해 지도를 띄워보겠습니다.

1. API 사용 신청

1-1. 이용 신청

• https://www.ncloud.com/product/applicationService/maps
• 회원가입 후 이용 신청하기 클릭
  

1-2. Application 등록

• 하단 Application 등록 버튼 클릭
  

1-3. 이름 설정, 서비스 선택

• application 이름 설정, Maps > Mobile Dynamic Map 선택
  

1-4. 서비스 환경 등록

• 생성한 플러터 프로젝트의 패키지명 복사하여 서비스 환경 등록에 추가 (안드로이드 기준)
  
  

1-5. 등록 완

• 짜잔
  

1-6. 인증 정보 확인

• Client ID 기억하기 (앱 개발시 사용됨)
  

---

2. Flutter에서 사용

2-1. 패키지 추가

• https://pub.dev/packages/flutter_naver_map
• pubspec.yaml
  

2-2. 지도 출력 예제 코드

✨ 코드

1. 지도 초기화하기
   

2. 지도 그리기
   

3. 전체 코드

   import 'dart:async';
   import 'dart:developer';
   
   import 'package:flutter/material.dart';
   import 'package:flutter_naver_map/flutter_naver_map.dart';
   
   void main() async {
     await _initialize();
     runApp(const NaverMapApp());
   }
   
   // 지도 초기화하기
   Future<void> _initialize() async {
     WidgetsFlutterBinding.ensureInitialized();
     await NaverMapSdk.instance.initialize(
       clientId: '<client id>',     // 클라이언트 ID 설정
       onAuthFailed: (e) => log("네이버맵 인증오류 : $e", name: "onAuthFailed")
     );
   }
   
   class NaverMapApp extends StatelessWidget {
     const NaverMapApp({Key? key});
   
     @override
     Widget build(BuildContext context) {
       // NaverMapController 객체의 비동기 작업 완료를 나타내는 Completer 생성
       final Completer<NaverMapController> mapControllerCompleter = Completer();
   
       return MaterialApp(
         home: Scaffold(
           body: NaverMap(
             options: const NaverMapViewOptions(
               indoorEnable: true,             // 실내 맵 사용 가능 여부 설정
               locationButtonEnable: false,    // 위치 버튼 표시 여부 설정
               consumeSymbolTapEvents: false,  // 심볼 탭 이벤트 소비 여부 설정
             ),
             onMapReady: (controller) async {                // 지도 준비 완료 시 호출되는 콜백 함수
               mapControllerCompleter.complete(controller);  // Completer에 지도 컨트롤러 완료 신호 전송
               log("onMapReady", name: "onMapReady");
             },
           ),
         ),
       );
     }
   }

📱 실행 화면

• 짜잔
  

---