Submodule System

The NAVER Maps API v3 supports the submodule system that can expand the map features. Submodules currently available are listed below:

panorama - Enables you to use Street View and Aerial View.
geocoder - Provides expanded projection objects supporting geocoding/reverse geocoding methods and specific coordinate systems.
drawing - Places and provides controls used to draw shapes and markers.
visualization - Provides heatmaps and dot density maps that help users easily understand geographical information.

A submodule can be used only when the NAVER Maps API v3 has been loaded, and it extends the previous naver.maps namespace.

Load submodules

To use a submodule, you should load the submodule with the submodules URL parameter when loading the NAVER Maps API v3 as shown below.
You can use a comma (,) to load multiple submodules at once.

The NAVER Maps API v3 supports both http and https protocols.

<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?ncpClientId=YOUR_CLIENT_ID&submodules=panorama,geocoder"></script>

Load submodules asynchronously

If you load submodules and the NAVER Maps API v3 before the DOM is ready, you can use them immediately. Or you can load the NAVER Maps API v3 asynchronously after the HTML documents are all loaded, as shown below.

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');
});

This example contains jQuery code.

In this case, submodules are also loaded asynchronously. Therefore, use the onJSContentLoaded event handler. This handler is called once when all the JavaScript content of the submodule requested when the NAVER Maps API v3 is loaded is loaded to the web browser.

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
            }
        });
    };
});

This example contains jQuery code.

You can also specify a callback parameter when the NAVER Maps API v3 is loaded. This callback function is also called once when all the JavaScript content of the submodule is loaded to the web browser.

If both the callback parameter and the onJSContentLoaded event handler exist, call only the callback function specified by the callback parameter.

<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>

Submodule System

Load submodules

Load submodules asynchronously

Search results