Hello, World
간단한 예제를 보면서 NAVER 지도 API v3에 대해 설명합니다. 아래는 NAVER 그린팩토리를 중심점으로 하는 지도를 생성하는 예제입니다.
<!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>간단한 지도 표시하기</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: 지도 기본 예제
NAVER 지도 API v3 로드하기
클라이언트 아이디 발급에서 발급받은 ncpClientId를 사용해 NAVER 지도 API v3을 로드해야 합니다. 공공기관용의 경우 govClientId를 금융기관용의 경우 finClientId를 사용하여 호출해주세요.
NAVER 지도 API v3은
http와https프로토콜을 모두 지원합니다.
네이버 클라우드 플랫폼
<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.js?govClientId=YOUR_CLIENT_ID"></script>
금융기관용
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?finClientId=YOUR_CLIENT_ID"></script>
NAVER 지도 API v3이 로드되는 동안 나머지 웹 사이트를 렌더링하는 비동기 방식으로 사용하려면 다음과 같이 callback 파라미터를 이용해 콜백 함수를 지정합니다. NAVER API v3이 준비되면 지정한 콜백 함수를 호출합니다.
<script type="text/javascript" src="https://oapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID&callback=CALLBACK_FUNCTION"></script>
지도 DOM 요소 지정하기
웹 페이지에 지도를 삽입할 DOM 요소를 지정합니다. 일반적으로 <div></div> 요소를 사용합니다.
<div id="map" style="width:100%;height:400px;"></div>
지도를 초기화할 때 MapOptions의
size를 지정하지 않으면, 초기화 시점의 지도 DOM 컨테이너의 크기로 지도 크기를 설정합니다. 이후setSize메서드를 이용해 지도 크기를 변경하기 전까지 지도 크기는 고정됩니다.
지도 옵션 설정하기
지도 옵션은 지도를 생성할 때 지도의 속성을 초기화하는 데 사용되며, 객체 리터럴로 만듭니다. 지도 옵션에 대한 자세한 설명은 MapOptions 명세를 참고합니다.
var mapOptions = {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
}
지도 생성하기
Map 클래스는 지도를 표현하는 클래스입니다. new 연산자를 이용하여 새 인스턴스를 생성합니다.
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.3595704, 127.105399),
zoom: 10
});
새 인스턴스를 만들 때 두 가지 인수를 전달합니다.
- 지도를 표현할 컨테이너 요소. 반드시 전달해야 하는 인수입니다. 앞서 지도를 표현하기 위해 지정한 DOM 요소의
id문자열을 직접 전달하거나,document.getElementById메서드를 이용해 해당 DOM 요소의 참조를 전달할 수 있습니다. - 지도의 속성을 초기화하는 데 이용하는 지도 옵션. 반드시 전달할 필요는 없습니다. 지도 옵션을 전달하면 설정한 속성으로 지도를 초기화합니다. 그렇지 않으면 NAVER 지도 API v3에서 가지고 있는 기본값으로 지도를 초기화합니다.
앞서 NAVER 지도 API v3을 비동기 방식으로 로드한 경우 아래와 같이 콜백 함수 내에서 지도를 생성합니다.
네이버 클라우드 플랫폼
<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>
인증 실패 확인
전역 함수를 사용하면 클라이언트 아이디 인증 실패를 확인할 수 있습니다. 아래 함수가 정의되어 있을 경우 Open API 인증 실패 시 함수가 호출됩니다.
window.navermap_authFailure = function () {
// 인증 실패 시 처리 코드 작성
// ...
}