인증키 받는 곳 : https://www.ncloud.com/product
먼저 Api 연동을 설명하기 전에 Naver Map api를 사용하기 위해서 위의 주소에서 로그인을 한 뒤 이용신청을 하고, 인증키를 받아와야 한다. 설명에 나와있는 대로 차근차근 인증키를 발급받으면 아래와 같은 결과를 얻을 수 있다.
우리가 실질적으로 Spring에서 api를 호출할 대 Client ID가 필요하다. 또한 위 프로젝트를 진행하면서 도메인을 따로 등록한 것이 아니기 때문에 URL을 위의 사진처럼 지정해주었다.
<!-- 네이버 지도 api 연동(키) -->
<script type="text/javascript"
src="https://openapi.map.naver.com/openapi/v3/maps.js?인증키입력">먼저, jsp 지도를 보여줄 jsp 파일에 스크립트를 통해 네이버 지도 api를 연동해준다. src에 openapi/v3/maps.js? 인증키를 작성해준다.
이후 body 부분에 지도가 들어갈 위치를 설정해주고, 필요한 css설정과 id를 설정해준다.
<div id="map"
style="width: 75%; height: 100%; float: right; box-sizing: border-box; background: #ece6cc;">
</div>이제 실질적으로 지도에 대한 설정을 해 줄 script를 작성해야 한다.
<!-- 네이버 지도 api 연동 및 마커 설정 -->
<script type="text/javascript">
$(function() {
initMap();
});
function initMap() {
var markers = new Array(); // 마커 정보를 담는 배열
var infoWindows = new Array(); // 정보창을 담는 배열
//네이버 지도
var map = new naver.maps.Map('map', {
//center는 지도가 처음 띄워줄 좌표를 작성
center : new naver.maps.LatLng(37.498095, 127.027610),
//zoom이 숫자가 커지면 지도가 확대, 작아지면 축소
zoom : 14
});
//마커
//반복문을 활용하여 리스트 개수만큼 마커 표시
<c:forEach var="vo" items="${list }">
var marker = new naver.maps.Marker(
{
map : map,
title : "마커의 타이틀",
position : new naver.maps.LatLng(위도,경도),
icon : {
content :
'사용할 마커 이미지 코드 작성',
size : new naver.maps.Size(32, 32),
anchor : new naver.maps.Point(16, 32)
}
});
/* 정보창 */
var infoWindow = new naver.maps.InfoWindow(
{
content : '정보창에 들어갈 html코드 작성',
borderWidth: 1,
borderColor: "#ddd",
backgroundColor: "#f0f8f8",
anchorSize: new naver.maps.Size(30, 30)
}); // 클릭했을 때 띄워줄 정보 입력
markers.push(marker); // 생성한 마커를 담는다.
infoWindows.push(infoWindow); // 생성한 정보창을 담는다.
</c:forEach>
function getClickHandler(seq) {
return function(e) { // 마커를 클릭하는 부분
var marker = markers[seq], // 클릭한 마커의 시퀀스로 찾는다.
infoWindow = infoWindows[seq]; // 클릭한 마커의 시퀀스로 찾는다
if (infoWindow.getMap()) {
infoWindow.close();
} else {
infoWindow.open(map, marker); // 표출
}
}
}
for (var i = 0, k = markers.length; i < k; i++) {
naver.maps.Event.addListener(markers[i], 'click',
getClickHandler(i)); // 클릭한 마커 핸들러
}
}
</script>코드에 대한 설명은 주석으로 작성해두었기 때문에 생략하고, 이번 프로젝트에서 네이버 지도를 연동하여 해당 위치를 보여주고, 클릭하여 상세정보를 보여주는 작업을 했기 때문에 여러 개의 마커가 필요했고, 여러 개의 마커를 지도에 보여주기 위해 컨트롤러 파일에서 list로 값을 받고, forEach문을 활용하여 마커 생성 및 정보창 생성을 해주었다. 정보창의 content에 들어가는 html 코드가 길다면 ' ' 사이에 코드를 작성한 뒤 +를 입력하고 줄을 바꾸어서 나머지 코드를 작성하면 작업하기 편하다.
위의 화면이 실행시킨 화면이다. 네이버 지도 api를 연결하기 전에 서울 열린 데이터 광장에서 공영주차장 데이터를 미리 받아와 강남구의 공영주차장을 띄우는 작업을 진행하였다. 위에 설명한 대로 infoWindow의 content에 html문을 작성하여 클릭 시 상세정보를 보여주는 화면으로 구현해보았다.
