지도 API에서는 아래 이미지와 같이 특정 좌표에 마커와 정보창을 표시하는 기능을 제공한다.
이번 예제에서는 필자와 필자의 애인의 집 주소에 마커를 찍고, 마커 위에 누구의 집인지 정보창으로 표시해볼 것이다.
먼저 전체 소스 코드를 보여주고 각각의 내용을 설명해보도록 하겠다.
1. 전체 소스 코드
<!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://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=pci7h12l33"></script>
</head>
<body>
<div id="map" style="width:100%;height:100vh;margin:0 auto;"></div>
<script>
var HOME_PATH = window.HOME_PATH || '.';
map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(36.31175, 127.3754709),
zoom: 13
});
var hyeonjinHouse = new naver.maps.LatLng(36.30260, 127.33838);
var jooyeokHouse = new naver.maps.LatLng(36.32611, 127.41263);
var markers = [];
var infowindows = [];
markers.push(new naver.maps.Marker({
map: map,
position: hyeonjinHouse
}));
infowindows.push(new naver.maps.InfoWindow({
content: [
'<div class="iw_inner">',
' <h3>현진이네 집</h3>',
'</div>'
].join('')
}));
markers.push(new naver.maps.Marker({
map: map,
position: jooyeokHouse
}));
infowindows.push(new naver.maps.InfoWindow({
content: [
'<div class="iw_inner">',
' <h3>주역이네 집</h3>',
'</div>'
].join('')
}));
for(let i=0; i<markers.length; i++){
naver.maps.Event.addListener(markers[i], "click", function(e) {
if (infowindows[i].getMap()) {
infowindows[i].close();
} else {
infowindows[i].open(map, markers[i]);
}
});
}
infowindows[0].open(map, markers[0]);
</script>
</body>
</html>
2. 소스 코드 부분 설명
1) HTML 부분
<!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://openapi.map.naver.com/openapi/v3/maps.js?ncpClientId=pci7h12l33"></script>
</head>
<body>
<div id="map" style="width:100%;height:100vh;margin:0 auto;"></div>
...javascript에서 네이버 지도에서 제공하는 클래스들을 이용하기 위해, <script> 태그로 maps.js 파일을 불러왔다.
그리고 지도는 웹 페이지의 전체 화면에 표시되게 하였다. vh는 웹 페이지의 높이를 100분의 1단위로 쪼갠 것이다.
2) Map 생성
map = new naver.maps.Map('map', {
center: new naver.maps.LatLng(36.31175, 127.3754709),
zoom: 13
});지도 객체이다.
center : 초기 중심 좌표 (LatLng에는 위도와 경도를 작성하면 된다.)
zoom : 확대의 정도 (6->축척 100km, 13->축척 1km, 21->축척 5m)
더 많은 옵션 확인 - Map
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
3) 좌표 설정
var hyeonjinHouse = new naver.maps.LatLng(36.30260, 127.33838);
var jooyeokHouse = new naver.maps.LatLng(36.32611, 127.41263);두 집의 좌표값을 LatLng 객체로 저장해두었다.
4) 배열 선언
var markers = [];
var infowindows = [];마커 객체와 정보창 객체를 담을 배열을 선언했다.
5) 마커 생성
markers.push(new naver.maps.Marker({
map: map,
position: jooyeokHouse
}));마커 객체를 생성하여 markers 배열에 추가한다.
map : 마커를 표시할 지도
position : 좌표 객체
더 많은 옵션 확인 - Marker
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.Marker.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
6) 정보창 생성
infowindows.push(new naver.maps.InfoWindow({
content: [
'<div class="iw_inner">',
' <h3>주역이네 집</h3>',
'</div>'
].join('')
}));정보창 객체를 생성하여 infowindows 배열에 추가한다.
content : 정보창을 표현하는 HTML코드
(join('') : 배열의 모든 요소를 연결해 하나의 문자열로 만들어줌)
더 많은 옵션 보기 - InfoWindow
https://navermaps.github.io/maps.js.ncp/docs/naver.maps.InfoWindow.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
7) 리스너 추가
for(let i=0; i<markers.length; i++){
naver.maps.Event.addListener(markers[i], "click", function(e) {
if (infowindows[i].getMap()) {
infowindows[i].close();
} else {
infowindows[i].open(map, markers[i]);
}
});
}마커를 눌러서 정보창을 표시하거나 숨길 수 있도록 모든 마커에 리스너를 추가했다.
click 외의 더 많은 이벤트들 확인
https://navermaps.github.io/maps.js.ncp/docs/tutorial-UI-Event.html
NAVER Maps API v3
NAVER Maps API v3로 여러분의 지도를 만들어 보세요. 유용한 기술문서와 다양한 예제 코드를 제공합니다.
navermaps.github.io
8) 정보창 미리 표시하기
infowindows[0].open(map, markers[0]);미리 표시해둘 정보창을 지정했다.
※ InfoWindow 클래스로 정보 창을 생성하게 되면, 동시에 여러 개의 정보 창을 띄울 수 없다. 이 때는 HTML 마커 또는 사용자 정의 오버레이를 이용하여 정보창을 생성하면 된다.
(참고) 네이버 지도 JavaScript API 완벽 가이드 – 오버레이 편
https://d2.naver.com/helloworld/3380225
실행 결과
'OpenAPI > Javascript API' 카테고리의 다른 글
| [OpenAPI] 네이버 지도 API(4) - 데이터베이스 연동 (0) | 2021.08.13 |
|---|---|
| [OpenAPI] 네이버 지도 API(2) - javascript 튜토리얼 (0) | 2021.08.10 |
| [OpenAPI] 네이버 지도 API(1) - 내 애플리케이션 생성 (0) | 2021.08.10 |
댓글