logo
Tutorials Examples naver map js api v3 네이버 지도 API 서브 모듈 시스템

서브 모듈 시스템

NAVER 지도 API v3은 지도의 기능을 확장하는 서브 모듈 시스템을 지원합니다. 현재 제공하는 서브 모듈의 목록은 다음과 같습니다.

  • panorama - 거리뷰/항공뷰를 사용할 수 있는 panorama 모듈입니다.
  • geocoder - 좌표 체계간 변환 메서드와 특정 좌표계를 지원하는 확장된 투영 객체들을 제공하는 geocoder 모듈입니다.
  • drawing - 지도 위에 도형, 마커를 그릴 수 있는 컨트롤을 배치하고, 이용할 수 있도록 제공하는 drawing 모듈입니다.
  • visualization - 지리 정보를 가지고 있는 데이터를 쉽게 이해할 수 있도록 열지도, 점지도를 제공하는 visualization 모듈입니다.

서브 모듈은 NAVER 지도 API v3이 로드되어 있어야 사용할 수 있으며, 기존의 naver.maps 네임스페이스를 확장합니다.

서브 모듈 로드하기

서브 모듈을 사용하려면 다음과 같이 NAVER 지도 API v3을 로드할 때 submodules URL 파라미터를 사용하여 해당 서브 모듈을 로드해야 합니다.
로드할 서브 모듈이 여러 개일 경우 콤마(,)를 이용해 여러 개의 서브 모듈을 한 번에 불러올 수 있습니다.

NAVER 지도 API v3은 httphttps 프로토콜을 모두 지원합니다.

네이버 클라우드 플렛폼
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama"></script>
공공기관용
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama"></script>    

또는

네이버 클라우드 플렛폼
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>
공공기관용
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>

비동기 방식으로 실행하기

DOM이 준비(ready)되기 전에 서브 모듈과 NAVER 지도 API v3을 로드했다면, 즉시 서브 모듈과 NAVER 지도 API v3을 사용할 수 있습니다. 또는 다음과 같이 HTML 문서가 모두 로드된 후에 NAVER 지도 API v3을 비동기 방식으로 로드해 사용할 수도 있습니다.

네이버 클라우드 플렛폼
var map = null;

$.getScript("https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama", function() {
    map = new naver.maps.Map('map-container');
});
공공기관용
var map = null;

$.getScript("https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama", function() {
    map = new naver.maps.Map('map-container');
});

위 예제는 jQuery 구문을 포함하고 있습니다.

이때, 서브 모듈 역시 비동기 방식으로 로드됩니다. 따라서, onJSContentLoaded 이벤트 핸들러를 사용합니다. 이 핸들러는 NAVER 지도 API v3 로드 시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다.

네이버 클라우드 플렛폼
var map = null,
    pano = null;

$.getScript("https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama", function() {
    naver.maps.onJSContentLoaded = function() {
        map = new naver.maps.Map('map-container');
        pano = new naver.maps.Panorama('pano', {
            position: map.getCenter(),
            pov: {
                pan: -135,
                tilt: 29,
                fov: 100
            }
        });
    };
});
공공기관용
$.getScript("https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama", function() {
    naver.maps.onJSContentLoaded = function() {
        map = new naver.maps.Map('map-container');
        pano = new naver.maps.Panorama('pano', {
            position: map.getCenter(),
            pov: {
                pan: -135,
                tilt: 29,
                fov: 100
            }
        });
    };
});

위 예제는 jQuery 구문을 포함하고 있습니다.

또는 NAVER 지도 API v3 로드 시 callback 파라미터를 지정할 수 있습니다. 이 역시 함께 요청한 서브 모듈의 JavaScript 콘텐츠가 웹 브라우저에 모두 로드되었을 때 한 번 호출됩니다.

callback 파라미터와 onJSContentLoaded 이벤트 핸들러가 모두 있을 때는 callback 파라미터로 지정한 콜백 함수만 호출합니다.

네이버 클라우드 플렛폼
<body>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&callback=initMap"></script>
    <script type="text/javascript">
        var map = null;

        function initMap() {
            map = new naver.maps.Map('map', {
                center: new naver.maps.LatLng(37.3595704, 127.105399),
                zoom: 10
            });
        }
    </script>
</body>
공공기관용
<body>
    <script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&callback=initMap"></script>
    <script type="text/javascript">
        var map = null;

        function initMap() {
            map = new naver.maps.Map('map', {
                center: new naver.maps.LatLng(37.3595704, 127.105399),
                zoom: 10
            });
        }
    </script>
</body>