지도 앱 연동 URL Scheme

Classic/VPC 환경에서 이용 가능합니다.

네이버 지도 앱 URL Scheme을 사용하여 사용자 앱이나 웹 페이지에서 네이버 지도 앱 호출함으로써 네이버 지도 기능을 사용할 수 있습니다.

구문

네이버 지도 앱 URL Scheme은 nmap://으로 시작하며, 구문의 형식은 다음과 같습니다.

사전 설정

네이버 지도 URL Scheme은 사용자의 기기에 네이버 지도 앱이 설치되어 있어야만 사용 가능합니다. 따라서 네이버 지도 앱이 설치되어 있지 않을 경우, App Store나 Google Play에서 네이버 지도 앱을 설치할 수 있도록 코드를 작성해야 합니다. 사용 환경별(모바일 앱, 모바일 웹, 인앱 브라우저) 작성해야 하는 코드는 다음과 같습니다.

모바일 앱

네이버 지도 URL Scheme을 사용하기 위해 모바일 앱에서 작성해야 하는 코드는 다음과 같습니다.

Android

다음 예제 코드와 같이 queryIntentActivities를 호출해 네이버 지도 앱이 설치되어 있는지 확인하고, 설치되어 있지 않으면 Google Play로 이동합니다.

String url = "nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}";

Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url));
intent.addCategory(Intent.CATEGORY_BROWSABLE);

List<ResolveInfo> list = getPackageManager().queryIntentActivities(intent, PackageManager.MATCH_DEFAULT_ONLY);
if (list == null || list.isEmpty()) {
    context.startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=com.nhn.android.nmap")));
} else {
    context.startActivity(intent);
}

iOS

iOS 모바일 앱에서 작성해야 할 코드는 다음과 같습니다.

1. info.plist에 LSApplicationQueriesSchemes를 생성하고 nmap을 추가해 주십시오.

<key>LSApplicationQueriesSchemes</key>
<array>
    <string>nmap</string>
</array>

2. 다음과 같이 canOpenURL을 호출해 네이버 지도 앱이 설치되어 있는지 확인하고, 설치되어 있지 않으면 App Store로 이동해 주십시오.

let url = URL(string: "nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}")!
let appStoreURL = URL(string: "http://itunes.apple.com/app/id311867728?mt=8")!

if UIApplication.shared.canOpenURL(url) {
  UIApplication.shared.open(url)
} else {
  UIApplication.shared.open(appStoreURL)
}

모바일 웹

모바일 웹에서 네이버 지도 URL Scheme을 사용하려면 네이버 지도 앱을 설치하도록 구현해야 합니다.

Android

인텐트 URL을 사용하면 앱이 설치되어 있지 않은 경우 자동으로 Google Play 스토어로 이동합니다. 인텐트 URL의 구조는 다음과 같습니다.

intent://actionPath?parameter=value&appname={YOUR_APP_NAME}#Intent;scheme=nmap;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.nmap;end

다음은 (37.4979502, 127.0276368) 위치에 '경기도 성남시 분당구 정자동' 마커를 표시하는 URL Scheme을 인텐트 URL로 나타낸 예제입니다.

intent://place?lat=37.4979502&lng=127.0276368&name=%EA%B2%BD%EA%B8%B0%EB%8F%84%20%EC%84%B1%EB%82%A8%EC%8B%9C%20%EB%B6%84%EB%8B%B9%EA%B5%AC%20%EC%A0%95%EC%9E%90%EB%8F%99&appname=com.example.myapp#Intent;scheme=nmap;action=android.intent.action.VIEW;category=android.intent.category.BROWSABLE;package=com.nhn.android.nmap;end

iOS

다음과 같이 웹 페이지에서 JavaScript 타이머를 이용해 App Store로 분기시키는 방법을 사용합니다.

<script>
function openNaverMapApp(url) {
    var clickedAt = +new Date();

    location.href = url;

    setTimeout(function() {
        if (+new Date() - clickedAt < 2000) {
            location.href = 'http://itunes.apple.com/app/id311867728?mt=8';
        }
    }, 1500);
}

window.onload = function() {
    openNaverMapApp("nmap://actionPath?parameter=value&appname={YOUR_APP_NAME}");
};
</script>

인앱 브라우저

인앱 브라우저에서 URL Scheme을 사용하려면 다음과 같이 URL Scheme 처리 코드를 추가해야 합니다.

Android

다음과 같이 WebViewClient의 shouldOverrideUrlLoading을 오버라이드 하여 URL Scheme 처리 코드를 추가합니다.

@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("intent:")) {
        Intent intent;
        try {
            intent = Intent.parseUri(url, Intent.URI_INTENT_SCHEME);
        } catch (URISyntaxException e) {
            return false;
        }
        if (TextUtils.isEmpty(intent.getPackage())) {
            return false;
        }
        List<ResolveInfo> list = getPackageManager().queryIntentActivities(intent, PackageManager.MATCH_DEFAULT_ONLY);
        if (list == null || list.isEmpty()) {
            startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse("market://details?id=" + intent.getPackage())));
        } else {
            startActivity(intent);
        }
        return true;
    }

    return false;
}

iOS

다음과 같이 WKWebview의 decidePolicyFor에 URL Scheme 처리 코드를 추가합니다.

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    if let url = navigationAction.request.url {
        if url.scheme == "nmap" {
            UIApplication.shared.open(url)
            decisionHandler(.cancel)
            return
        }
    }
    decisionHandler(.allow)
}

URL Scheme 사용

네이버 지도 앱 URL Scheme이 제공하는 액션에 대해 설명합니다. 이 가이드를 통해 학습하게 되는 액션 사용법은 다음과 같습니다.

• 지도 메인 표시
• 지도 검색
  • 지도 통합 검색
  • 버스 검색
• 마커 표시
• 길찾기
  • 대중교통 길찾기
  • 자동차 길찾기
  • 도보 길찾기
  • 자전거 길찾기
• 내비게이션

지도 메인 표시

네이버 지도 앱의 메인 화면을 보여줍니다.

액션 경로

/map

파라미터

사용 예제

지도 앱 메인 화면 표시
다음은 입력 파라미터 없이 지도 앱의 메인 화면을 표시하는 예제입니다.

nmap://map?&appname=com.example.myapp

호출 결과는 다음과 같습니다.

중심 좌표 및 줌 레벨 반영
다음은 지도의 중심점을 (37.4979502, 127.0276368), 줌 레벨을 20으로 지정해 지도 앱의 메인 화면을 표시하는 예제입니다.

nmap://map?lat=37.4979502&lng=127.0276368&zoom=20&appname=com.example.myapp

호출 결과는 다음과 같습니다.

통합 검색

검색어에 맞는 지도 검색 결과를 보여줍니다.

액션 경로

/search

파라미터

사용예제

다음은 '강남역'을 검색어로 넣어 지도를 검색하는 예제입니다.

nmap://search?query=%EA%B0%95%EB%82%A8%EC%97%AD&appname=com.example.myapp

호출 결과는 다음과 같습니다.

버스 검색

검색어에 맞는 버스 검색 결과를 보여줍니다.

액션 경로

/search/bus

파라미터

사용예제

다음은 222번 버스를 검색하는 예제입니다.

nmap://search/bus?query=222&appname=com.example.myapp

호출 결과는 다음과 같습니다.

마커 표시

지정된 좌표에 마커를 표시합니다.

액션 경로

/place

파라미터

사용 예제

다음은 (37.3677345,127.1083617) 위치에 '경기도 성남시 분당구 정자동' 마커를 표시하는 예제입니다.

nmap://place?lat=37.3677345&lng=127.1083617&name=%EA%B2%BD%EA%B8%B0%EB%8F%84%20%EC%84%B1%EB%82%A8%EC%8B%9C%20%EB%B6%84%EB%8B%B9%EA%B5%AC%20%EC%A0%95%EC%9E%90%EB%8F%99&appname=com.example.myapp

호출 결과는 다음과 같습니다.

대중교통 길찾기

대중교통 길찾기를 수행합니다.

액션 경로

/route/public

파라미터

경로 탐색 공통 파라미터 항목을 참조해 주십시오.

사용 예제

다음은 서울대학교에서 올림픽 공원까지 대중교통으로 가는 경로를 탐색하는 예제입니다.

nmap://route/public?slat=37.4640070&slng=126.9522394&sname=%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90&dlat=37.5209436&dlng=127.1230074&dname=%EC%98%AC%EB%A6%BC%ED%94%BD%EA%B3%B5%EC%9B%90&appname=com.example.myapp

호출 결과는 다음과 같습니다.

자동차 길찾기

자동차 길찾기를 수행합니다.

액션 경로

/route/car

파라미터

경로 탐색 공통 파라미터 항목을 참조해 주십시오.

사용 예제

서울대학교에서 올림픽 공원까지 자동차 길찾기 예제
다음은 서울대학교에서 올림픽 공원까지 자동차로 가는 경로를 탐색하는 예제입니다.

nmap://route/car?slat=37.4640070&slng=126.9522394&sname=%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90&dlat=37.5209436&dlng=127.1230074&dname=%EC%98%AC%EB%A6%BC%ED%94%BD%EA%B3%B5%EC%9B%90&appname=com.example.myapp

호출 결과는 다음과 같습니다.

경유지가 있을 경우 자동차 길찾기 예제
다음은 그린팩토리에서 서울대학교를 경유해 성남시청까지 자동차로 가는 경로를 탐색하는 예제입니다.

nmap://route/car?slat=37.3595953&slng=127.1053971&sname=%EA%B7%B8%EB%A6%B0%ED%8C%A9%ED%86%A0%EB%A6%AC&secoords=37.359761,127.10527&dlng=127.1267772&dlat=37.4200267&dname=%EC%84%B1%EB%82%A8%EC%8B%9C%EC%B2%AD&decoords=37.4189564,127.1256827&v1lng=126.9522394&v1lat=37.464007&v1name=%20%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90&v1ecoords=37.466358,126.948357&appname=com.example.myapp

호출 결과는 다음과 같습니다.

도보 길찾기

도보 길찾기를 수행합니다.

액션 경로

/route/walk

파라미터

경로 탐색 공통 파라미터 항목을 참조해 주십시오.

사용 예제

다음은 서울대학교에서 동원 낙성대 아파트까지 도보로 가는 경로를 탐색하는 예제입니다.

nmap://route/walk?slat=37.4640070&slng=126.9522394&sname=%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90&dlat=37.4764356&dlng=126.9618302&dname=%EB%8F%99%EC%9B%90%EB%82%99%EC%84%B1%EB%8C%80%EC%95%84%ED%8C%8C%ED%8A%B8&appname=com.example.myapp

호출 결과는 다음과 같습니다.

자전거 길찾기

자전거 길찾기를 수행합니다.

액션 경로

/route/bicycle

파라미터

경로 탐색 공통 파라미터 항목을 참조해 주십시오.

사용 예제

다음은 서울대학교에서 올림픽 공원까지 자전거로 가는 경로를 탐색하는 예제입니다.

nmap://route/bicycle?slat=37.4640070&slng=126.9522394&sname=%EC%84%9C%EC%9A%B8%EB%8C%80%ED%95%99%EA%B5%90&dlat=37.5209436&dlng=127.1230074&dname=%EC%98%AC%EB%A6%BC%ED%94%BD%EA%B3%B5%EC%9B%90&appname=com.example.myapp

호출 결과는 다음과 같습니다.

내비게이션

내비게이션 경로를 탐색합니다.

액션 경로

/navigation

파라미터

경로 탐색 공통 파라미터 항목을 참조해 주십시오.

사용 예제

안전 운행 모드 내비게이션
다음은 안전 운행 모드로 내비게이션 화면을 표시하는 예제입니다.

nmap://navigation?&appname=com.example.myapp

호출 결과는 다음과 같습니다.

현재 위치에서 목적지까지 내비게이션
다음은 사용자의 현재 위치로부터 올림픽 공원까지 내비게이션 경로를 탐색하는 예제입니다.

nmap://navigation?dlat=37.5209436&dlng=127.1230074&dname=%EC%98%AC%EB%A6%BC%ED%94%BD%EA%B3%B5%EC%9B%90&appname=com.example.myapp

호출 결과는 다음과 같습니다.

경로 탐색 공통 파라미터

길찾기(/route)와 내비게이션(/navigation)에서 사용하는 공통 파라미터입니다.