[Flutter] 네이버 Maps API 사용하기

 

 

 

 

 

네이버 지도 api 사이트 바로가기

NAVER CLOUD PLATFORM

 

 

 

위 링크를 통해 이동하면 아래와 같은 화면이 뜬다

여기서 중간에 보이는 [이용 신청하기] 버튼 클릭

 

 

 

그럼 다음과 같이 API 관련 페이지가 뜰 것이다. 물론, 로그인을 했다는 전제 하에.

스크롤을 내리다보면 맨 하단에 [ + Application 등록 ] 이라는 버튼이 보일 것이다. 클릭

 

 

약관 동의

 

 

 

약관 동의 후 Service 선택이 보일 것이다. 우선 뭐가 뭔지 모르니 Maps 를 체크해준다.

 

 

 

320x100

 

 

 

이런.. Web Dynamic Map과 Static Map 서비스 선택 시 Web URL을 입력해야 한다고 한다..

나는 모바일 서비스를 이용할 예정이라 Web 관련 서비스들은 다시 체크 해제를 해준다.

 

 

Android 앱 패키지 이름과 iOS 번들 ID 입력을 위해 플러터 프로젝트를 생성해준다.

 

 

 

프로젝트 생성 후! Android 앱 패키지 이름과 iOS Bundle ID 입력후 추가해준다.

 

 

 

그리고 등록을 하면 다음과 같이 등록된 정보가 뜬다. 

 

 

 

 

 

 

 

 

여기서 앱 이름 밑에 [인증 정보]를 클릭해보자

 

 

 

그럼 다음과 같이 발급 받은 Client ID가 보일 것이다. 나중에 쓰일 것이니 복사해두자.

 

 

Flutter에서는 아래의 플러그인이 많이 쓰이는 것 같다.

https://github.com/LBSTECH/naver_map_plugin

GitHub - LBSTECH/naver_map_plugin

 

 

pubspec.yaml 파일에 github 주소로 플러그인을 불러오자.

 

 

 

이제 AndroidManifest.xml에 다음과 같이 코드를 넣어주자. 위치 권한 코드도 추가해주자.

<manifest>
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>
    <application>
        <meta-data
            android:name="com.naver.maps.map.CLIENT_ID"
            android:value="발급받은 client ID" />
    </application>
</manifest>

 

 

 

iOS에서는 Info.plist에 아래와 같이 코드를 넣어주자. 마찬가지로 위치 권한 코드도 같이 넣어주자.

<dict>
  <key>NMFClientId</key>
  <string>발급받은 client ID</string>
  <key>io.flutter.embedded_views_preview</key>
  <true/>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
  //권한
  <key>NSLocationAlwaysAndWhenInUseUsageDescription</key>
  <string>Always and When In Use Usage</string>
  <key>NSLocationAlwaysUsageDescription</key>
  <string>Always</string>
  <key>NSLocationWhenInUseUsageDescription</key>
  <string>When In Use Usage</string>
</dict>

 

 

 

 

예제 코드

import 'dart:async';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:naver_map_plugin/naver_map_plugin.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {

  final scaffoldKey = GlobalKey<ScaffoldState>();
  Completer<NaverMapController> _controller = Completer();

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: NaverMap(
          onMapCreated: _onMapCreated,
        ),
      ),
    );
  }

  void _onMapCreated(NaverMapController controller) {
    if (_controller.isCompleted) _controller = Completer();
    _controller.complete(controller);
  }

}

 

 

---

같이 보면 좋은 글 ▼

https://cording-cossk3.tistory.com/214

[Flutter] naver_map_plugin 사용하여 특정 위치로 이동하기

 

 

https://cording-cossk3.tistory.com/198

[Flutter] Google Map API 사용하기

 

https://cording-cossk3.tistory.com/208

[Flutter] Kakao Map api 사용하기

 

https://cording-cossk3.tistory.com/210

[Flutter] Tmap API 및 Tmap 앱 연동 (1) - Android편

 

https://cording-cossk3.tistory.com/212

[Flutter] Tmap API 및 Tmap 앱 연동 (2) - iOS편