서브 모듈 시스템

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

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

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

서브 모듈 로드하기

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

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

네이버 클라우드 플랫폼

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama"></script>

공공기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama"></script>    

금융기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&submodules=panorama"></script>

또는

네이버 클라우드 플랫폼

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>

공공기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?govClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>

금융기관용

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>

순차적으로 로드하기

submodules URL 파라미터를 사용하면 document.write 관련 경고를 발생시킬 수 있습니다.
따라서 서브 모듈을 순차적으로 로드하는 것을 권장합니다. 이 때 반드시 NAVER 지도 API v3(maps.js)를 먼저 로드해야 합니다.

• MDN - document.write

<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps-panorama.js"></script>

비동기 방식으로 실행하기

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

네이버 클라우드 플랫폼

var map = null;

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

금융기관용

var map = null;

$.getScript("https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=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://oapi.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://oapi.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
            }
        });
    };
});

금융기관용

$.getScript("https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=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://oapi.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://oapi.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>

금융기관용

<body>
    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=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>