Hello, World

Let’s see the following simple example of using the NAVER Maps API v3. The code example creates a map centered on NAVER Green Factory.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <title>Display a simple map</title>
    <script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%;height:400px;"></div>

<script>
var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
};

var map = new naver.maps.Map('map', mapOptions);
</script>
</body>
</html>

Examples: Basic map

Load the NAVER Maps API v3

You need an ncpClientId issued from Get a Client ID to load the NAVER Maps API v3. Use the ncpClientId parameter as shown below.

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"></script>

If you want the rest of the web site to be rendered asynchronously while the NAVER Maps API v3 is loaded, set a callback function with the callback parameter. When the NAVER Maps API v3 is ready, call the specified callback function.

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

Specify map DOM elements

Specify a DOM element to insert a map to your web page. Usually a <div></div> element is used.

<div id="map" style="width:100%;height:400px;"></div>

If the size of MapOptions is not specified when a map is initialized, the map is created in the same size as that of the map DOM container at the point of initialization. The size of the map is fixed until it is changed with the setSize method.

Set map options

Being created with object literals, map options are used to initialize properties of a map to create. For more information on map options, refer to MapOptions specification.

var mapOptions = {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
}

Create a map

Map is a class that represents a map. Create a new instance with the new operator.

var map = new naver.maps.Map('map', {
    center: new naver.maps.LatLng(37.3595704, 127.105399),
    zoom: 10
});

Pass the following two arguments when creating a new instance.

Container element that represents a map. This argument is required. You can directly pass the id string of the DOM element previously specified to represent a map, or the reference to the DOM element by using the document.getElementById method.
Map options used to initialize properties of the map. This argument is optional. If map options are passed, the map is initialized with the specified properties. Otherwise the map is initialized with the default values of the NAVER Maps API v3.

If you previously loaded the NAVER Maps API v3 asynchronously, a map is created in the callback function as shown below.

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

Hello, World

Load the NAVER Maps API v3

Specify map DOM elements

Set map options

Create a map

Search results