네이버 OPEN API 나 DAUM OPEN API나 키 발급받는것은 비슷하기 때문에 올리지 않겠다.
키 발급받을대 주의 사항은 URL을 적는게 있는데 키 발급받은걸 사용하려면 키 발급받을때 적은 URL과 똑같이 만들어서 사용하던가 아니면 해당 URL의 하위폴더로해서 만들면 된다.
네이버
<Script type="text/javascript"
src="http://map.naver.com/js/naverMap.naver?key=발급받은 키">
</script>
</head>
<body>
<div id='mapBox' style='width:600px;height:600px'></div> //맵 사이즈 지정
<script type ="text/javascript">
//****************************** Map 생성 ******************************
var map = new NMap(document.getElementById('mapBox'));
map.setCenterAndZoom(new NPoint(321198, 529730), 3);
//****************************** NZoomControl 생성 ******************************
var zoom = new NZoomControl();
zoom.setAlign("left"); // 슬라이드바의 좌우 설정
zoom.setValign("top"); // 슬라이드바의 위,아래 설정
map.addControl(zoom);
map.addControl(new NIndexMap()); // 미니맵 생성
//****************************** 이벤트 리스너******************************
var regFlag = false;
function addClick() { //맵이라는 객체에서 클릭이라는 이벤트가 발생하면 clicked라는 함수를 호출한다.
NEvent.addListener(map, "click", clicked);
regFlag = true;
}
}
function removeClick() { //등록된 이벤트리스너를 해제시킨다.
NEvent.removeListener(map, "click", clicked);
regFlag = false;
}
function clicked(pos) {
alert("이곳의 좌표 : " + pos);
}
//****************************** 마크생성 ******************************
var cnt = 0;
NEvent.addListener(map, "click", clickMap);
function clickMap(pos) {
if (cnt >= 20) {
alert('마커는 20개까지만 추가 가능합니다.');
return;
}
cnt++;
map.addOverlay(createMarker(pos, cnt, "마커" + cnt));
}
function createMarker(pos, count, content) {
var iconUrl = "http://cfs.tistory.com/blog/plugins/tatterDesk/image/ico_tag.gif";
var marker = new NMark(pos, new NIcon(iconUrl, new NSize(15, 14)));
NEvent.addListener(marker, "mouseover", function(pos) { //마우스가 마커객체있을시에 정보를보여준다.
infowin.set(pos,
"<TABLE style='width:80px;height:50px;border:solid 1px #666666'><TR><TD>" + content + " "+ pos + "</TD></TR></TABLE>"); infowin.showWindow()
});
NEvent.addListener(marker, "mouseout", function() { infowin.hideWindow(); });
//마우스가 나가면 정보를 안보여준다.
return marker;
}
var infowin = new NInfoWindow();
map.addOverlay(infowin);
</script>
<button onclick='map.zoomIn()'>+</button>
<button onclick='map.setZoom(1)'>1</button>
<button onclick='map.setZoom(3)'>2</button>
<button onclick='map.setZoom(5)'>3</button>
<button onclick='map.setZoom(7)'>4</button>
<button onclick='map.zoomOut()'>-</button>
<button onclick=addClick()>click event 실행</button><button onclick=removeClick()>click event 제거</button>
</body>
</html>
DAUM
<Script type="text/javascript" src="http://apis.daum.net/maps/maps2.js?apikey=발급받은 키script>
</head>
<body>
<div id="map" style="width:600px;height:400px;"></div>
<script type ="text/javascript">
var cnt;
//맵 생성
var map = new DMap("map");
map.setCenter(new DLatLng(37.529196714213114, 126.92506196011036), 2);
//주요 컨트롤 셋팅
var indexMapControl = new DIndexMapControl();
var zoomControl = new DZoomControl();
var mapTypeControl = new DMapTypeControl()
map.addControl(indexMapControl);
map.addControl(zoomControl);
map.addControl(mapTypeControl);
indexMapControl.setAlign("left");
zoomControl.setVAlign("middle");
//이벤트리스너 등록
DEvent.addListener(map, "click", clickMap);
//이벤트발생
function clickMap(pos) {
if (cnt >= 20) {
alert('마커는 20개까지만 추가 가능합니다.');
return;
}
cnt++;
map.addOverlay(createMarker(pos));
}
//마커생성
function createMarker(pos) {
var marker = new DMark(pos);
return marker;
}
</script>
</body>
</html>
결론은 네이버나 DAUM이나 사용하는 함수나 방법은 거의 똑같다. 단 DAUM은 로드맵이나 더 많은 클래스들과 기능들을 제공해주는 거같다. 개인적으로 DAUM을 더 추천한다.
위에 예제는 그냥 API를 갔다 붙여서 쓰는정도 밖에 안되서 적절한 예제는 아니지만
활용방법 하나 예를 들자면 DB에 어느 특정 지역에대한 정보를 입력해놓고 맵을 마우스로 클릭했을때 마커를 등록시켜 해당 마커의 정보와 DB에 있는 데이터와 비교해서 찍은곳이 같은 곳일시에 DB에 그 해당 지역에 대한 정보들을 등록해놨던것을 보여주는 활용방법이 있겠다.
원래는 실현해볼려고했는데 자바스크립트도 잘모르겠고 뭔가 모르게 잘 안되서...나중에 꼭 다시 해서 API 활용법을 올리도록하겠다!~
