오늘은 네이버 지도 api 를 사용해서 지도를 띄우고 마커를 찍어보겠습니다.
먼저 네이버 클라우드 플랫폼의 Maps 서비스 페이지에 들어가서 로그인을 한 뒤, '이용 신청하기' 버튼을 클릭합니다.
https://www.ncloud.com/product/applicationService/maps
NAVER CLOUD PLATFORM
cloud computing services for corporations, IaaS, PaaS, SaaS, with Global region and Security Technology Certification
www.ncloud.com
Application 등록을 누르면 Application 이름을 설정하고, Service 선택 및 서비스 환경 등록하는 페이지로 이동합니다.
어플리케이션 이름을 입력하고, Maps 중에서 Web Dynamic Map 서비스를 선택합니다.
그리고 네이버 지도 api 를 사용할 서비스 url을 입력합니다.
이 포스팅에서는 localhost 에서 진행하기 때문에 http://localhost 라고 추가했습니다.
등록이 완료되면 등록된 application 정보를 확인할 수 있습니다.
인증정보 버튼을 누르면 Application Key를 확인할 수 있습니다. 그 중에서 Client ID 를 복사해둡니다.
이제 간단한 예제와 함께 네이버지도 api를 사용해보겠습니다.
NAVER 지도 API v3을 로드하려면 아까 복사한 Client ID가 필요합니다.
<head> 태그 안에 아래 코드를 추가합니다. "YOUR_CLIENT_ID" 부분에 복사한 id를 입력합니다.
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=YOUR_CLIENT_ID"></script>
그리고 웹 페이지에 지도를 삽입할 DOM 요소가 필요합니다. <body> 태그 안에 다음 코드를 추가합니다.
<div id="map" style="width:100%; height:800px;"></div>이제 지도를 생성하겠습니다. Map 클래스는 지도를 표현하는 클래스로, new 연산자를 이용해서 새 인스턴스를 생성합니다.
새 인스턴스를 만들 때 두 가지 인수를 전달합니다.
첫번째 인수는 지도를 표현할 컨테이너 요소를 가리킵니다. 방식은 해당 DOM 요소의 id 문자열을 직접 입력하거나, 또는 document.getElementById 메소드를 이용해서 해당 DOM 요소의 참조를 전달할 수 있습니다. 첫번째 인수는 반드시 전달해야 합니다.
두번째 인수는 지도의 속성을 초기화하는데 사용되는 지도 옵션입니다.
var map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
zoom: 15
});
// var map = new naver.maps.Map(document.getElementById('map'), {
// center: new naver.maps.LatLng(37.5112, 127.0981), // 잠실 롯데월드를 중심으로 하는 지도
// zoom: 15
// });지도 옵션은 Map 클래스의 새 인스턴스를 생성할 때 반드시 전달할 필요는 없습니다. 다음과 같이 옵션 없이 지도 객체를 생성하면 서울 시청을 중심으로 하는 16 레벨의 지도가 생성됩니다.
var map = new naver.maps.Map('map');
이제 마커를 지도 위에 표시해보겠습니다. 지도의 중심인 잠실 롯데월드 위치에 마커를 추가합니다.
var marker = new naver.maps.Marker({
position: new naver.maps.LatLng(37.5112, 127.0981),
map: map
});
완성된 화면은 다음과 같습니다. 잠실 롯데월드를 중심으로 하는 줌 레벨 15의 지도가 표시되고 롯데월드 위치에 마커도 표시되었습니다.
전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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://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>
</html>
참고사이트 : https://navermaps.github.io/maps.js.ncp/docs/tutorial-2-Getting-Started.html
'JavaScript' 카테고리의 다른 글
| [javascript] 숫자 입력하면 전화번호 형식으로 표현해주기 (0) | 2022.07.10 |
|---|---|
| [ javascript ] history 객체를 사용하여 이전 페이지로 돌아가기 (0) | 2022.07.09 |
| [JavaScript] Full-calendar 커스텀하기 (0) | 2022.07.01 |
| [javascript] 모달창의 외부를 클릭하면 모달창이 안 보이게 하기 (0) | 2022.06.24 |
| [Javascript] Video.js 사용해서 동영상 재생하기 (0) | 2022.06.23 |
