![[API] 웹 페이지에 네이버 지도 띄우고 마커 찍기 [네이버 Maps API 사용하기]](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbqHoHY%2FbtrWbj5fz5o%2FSPdtJDVzutRf2puW4GX7Qk%2Fimg.png)
- 웹 페이지에 네이버 지도 띄우고 마커 찍기
1. Naver Maps Application 등록
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
2. 웹 페이지에 지도 띄우기(+ 마커 찍기)
페이지 head 태그에 아래의 스크립트를 추가해준다. YOUR_CLIENT_ID에는 본인의 Client ID를 입력한다.
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
body 태그에 지도를 띄울 공간을 만든다.
<div id="map" style="width:100%; height:800px;"></div>
body 태그 내에 script 태그를 생성한다. 아래의 코드는 지도를 띄우는 코드이다.
첫 번째 인수는 지도를 표현할 컨테이너 요소를 지정하고, 두 번째 인수는 지도의 속성을 초기화하는데 사용된다.
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
zoom: 15
});
// document.getElementById로 DOM 요소 전달도 가능
var map = new naver.maps.Map(document.getElementById('map'), {
center: new naver.maps.LatLng(37.5112, 127.0981),
zoom: 15
});
// 두 번째 인수의 기본값은 서울 시청을 중심으로 하는 16레벨의 지도이다.
var map = new naver.maps.Map('map');
아래의 코드는 마커(marker)를 찍는 코드이며, 37.5112, 127.0981는 잠실 롯데월드의 위도, 경도이다.
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.5112, 127.0981),
map: map
});- 전체 코드
<head>
<title>naverMaps</title>
<script type="text/javascript" src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
</head>
<body>
<div id="map" style="width:100%; height:800px;"></div>
<script>
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
zoom: 15
});
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.5112, 127.0981),
map: map
});
</script>
</body>
- 참고 자료
[Javascript] 네이버 지도 api를 사용해서 지도 표시 및 마커 찍기
오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다. 먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다.
stickode.tistory.com