네이버 지도를 티스토리 / 테터툴즈에서 사용하는 방법

2007. 3. 27. 13:23

주소 검색

경복궁, 선운사, 춘천, 환기미술관, 전남대 518광장

다음은 네이버 지도를 티스토리에서 이용하기 위하여 해야 할 것과 주의해야 할 것이다.
지금 네이버 소스(지도 API)의 조그마한 수정만 있으면 파이어폭스(FireFox)에서도 티스토리나 테터툴즈에 올려진 네이버 지도를 사용할 수 있을 것이다. 조만간 네이버에서 수정을 해 줄 것으로 생각된다.

네이버 지도 API 키 발급 ▲

"네이버 지도 Open API"에서 "네이버 지도 이용 등록 및 수정" 단추를 누른다.
그러면 API 이용등록 페이지로 들어가게 된다. 여기서 요구하는 정보를 입력하고,
끝부분에 있는 "지도 API KEY" 항목에서 "지도API를 사용할 웹사이트 도메인 및 디렉토리"를 입력하여 그 위치에 대한 키를 얻는다.
티스토리나 테터툴즈에서는 "http://idodream.tistory.com/" 처럼 자신의 블로그 도메인을 입력하면 키를 바로 얻을 수 있다.

다음은 "지도 API 사용자 문서" 에 있는 예제를 아주 쪼금 수정한 것이다.

기본 예제   ▼

아래의 소스를 복사하여 티스토리의 글수정 페이지에서 "HTML 모드로 변경" 아이콘을 눌러 HTML 태그를 직접 입력 할 수 있는 상태에서 붙여넣기를 한다.
그 다음 여기에네이버지도API키입력 를 위에서 얻은 네이버 지도 API KEY로 바꾸어 준다.

지도의 중심좌표(309808,553088)를 변경하려면 다음과 같이 하면 된다.
먼저 위의 "주소 검색" 칸에 도시이름이나 동이름을 입력하여 출력된 목록 중 해당 좌표의 "보기"를 누르게 되면 그 좌표가 중심이 되도록 지도가 변경 된다.
그 다음 지도를 끌거나 움직여서 상세 위치가 중심에 오도록 맞춘다.("중심 표시"를 이용하면 지도의 중심을 쉽게 볼 수 있다.)
마지막으로 "중심 좌표"를 누르면 지도의 중앙 부근에 중심좌표가 적어진 상자가 뜨게 된다.

확대/축소 값을 바꾸려면 5를 바꾸면 된다.

주의 : 여기서 여는 태그와 닫는 태그 사이에 아무것도 없으면 모드를 변경할 때 저절로 그 태그 자체가 송두리째 삭제 되니 주의하여야 한다. 그래서 네이버 예제에는 없는  와  를 집어 넣었다.
또 주의 : 글 내용의 처음에 주석()이나 스크립트(<script>......</script>)가 오면 이상스럽게도 편집모드를 변경하면 저절로 지워 버리고 있으니 무조건 글의 처음은 주석이나 스크립트 같은 것이 아닌 글이나 일반태그, 그림 같은 것을 놓아야 하겠다.(이상하지 ^----^)
그래서 이 글에서는 <DIV style="DISPLAY: none">^-^</DIV> 를 넣었다.

<DIV style="DISPLAY: none">^-^</DIV>

<SCRIPT LANGUAGE="JavaScript" src="http://maps.naver.com/js/naverMap.naver?key=여기에네이버지도API키입력"> </SCRIPT>

<div id='mapContainer07032602' style='width:530px;height:530px'></div>

<SCRIPT LANGUAGE="JavaScript">

//지도 생성 끝 ============================================
</SCRIPT>

지도 객체의 이름 mapObj07032602 와 지도가 들어갈 문서 객체 이름 mapContainer07032602 를 지도 마다 다르게 입력하면 여러개의 지도를 한 화면에 보여줄 수가 있다.

다음 소스를 지도객체 생성 소스 다음 그리고 </SCRIPT> 태그 전에 더하면 지도에 마커(표시 , , ......)를 표시 할 수 있다. 또는 원하는 다른 그림을 올려 놓을 수 도 있다.

경복궁 이미지를 마커로 사용해 보았다.

//마커 넣기 소스 시작 =====================================
var marker = new NMark(
    new NPoint(309808,553088)
    ,new NIcon('http://seoul.cha.go.kr/portal/site/depart_01/_images/_gyeongbok/left_img.gif', new NSize(80,67))
);
NEvent.addListener(marker,"click",function(pos){location.href="http://gbg.cha.go.kr/"});
mapObj07032602.addOverlay(marker);
//마커 넣기 끝 =============================================

마커와 정보창을 같이 활용 해 보았다. ()

var marker = new NMark(
    new NPoint(308938, 555189)
    ,new NIcon('http://static.naver.com/local/map_img/set/icos_free_a.gif',new NSize(15,14))
);
var infowin07032602 = new NInfoWindow();
mapObj07032602.addOverlay(infowin07032602);
NEvent.addListener(marker,"mouseover",function(pos){
    infowin07032602.set(pos,"<span style='color:red;font-weight:900;'>환기미술관</span>");
    infowin07032602.showWindow()
});
NEvent.addListener(marker,"mouseout",function(){infowin07032602.hideWindow();});
mapObj07032602.addOverlay(marker);

서울타워에 정보창을 만들어 보았다.

var infowin07032603 = new NInfoWindow();
mapObj07032602.addOverlay(infowin07032603);
infowin07032603.set(new NPoint(310704,550448),"<a href='http://www.visitkorea.or.kr/ya/gg/yagg_mv0.jsp?i_seqno=2675' style='text-align:center;'><img width='80' border='2' src='http://www.visitkorea.or.kr/photo/sightguide/1_17_38263.jpg' /><br /><span style='color:red;font-weight:900;'>서울타워</span></a>");
infowin07032603.setOpacity(0.5);//불투명도
infowin07032603.showWindow();

줌과 저장 컨트롤을 지도에 덧붙이기 위해서는 다음 소스가 지도객체 생성 소스 뒤에 들어 가면 된다. "//"를 소스의 앞에 붙이면 그 뒤의 소스들은 주석처럼 여겨지므로 실행이 안된다.

//컨트롤 넣기 시작 =========================================
var zoom =new NZoomControl();// 축척(확대/축소) 슬라이드바를 생성합니다.
zoom.setAlign("left");// 축척 슬라이드바를 지도상의 왼쪽 이동 시킵니다
//zoom.setValign("bottom");//아래로 이동 시킵니다
mapObj07032602.addControl(zoom);// 지도 객체에 축척(확대/축소) 슬라이드바 컨트롤을 등록합니다.

var save = new NSaveBtn();// 저장 버튼을 생성합니다.
//save.setValign("top");
mapObj07032602.addControl(save);
//컨트롤 넣기 끝 ============================================

링크를 클릭하면 지도의 중심위치와 확대/축소가 바꿔지게 하는 방법이다. 위 소스들(자바스크립트 소스)과는 달리 HTML 소스이므로 <SCRIPT> 과 </SCRIPT> 사이에 들어가면 안된다.

<a href="javascript:void(0)" onclick="mapObj07032602.setCenterAndZoom(new NPoint(309808,553088),5);">경복궁</a>,
<a href="javascript:void(0)" onclick="mapObj07032602.setCenter(new NPoint(270352,322920));">선운사</a>,
<a href="javascript:void(0)" onclick="mapObj07032602.setCenterrAndZoom(new NPoint(375136,586880),4);">춘천</a>,
<span style="cursor:pointer;" onclick="mapObj07032602.setCenter(new NPoint(308938, 555189));">환기미술관</span>,
<span style="cursor:pointer;" onclick="mapObj07032602.setCenterAndZoom(new NPoint(300627,287094),1);">전남대 518광장</span>

다음은 네이버에서 올려 놓은 기본 소스들이다. 뜯어보면 여러가지로 변형하여 활용할 수 있다.

지도 이동, 확대, 축소 및 중심점 이동 ▼

pan : 버튼을 클릭하면, 오른쪽, 위로, 각각 100 픽셀씩 이동
+ : 버튼을 클릭하면, 지도가 1단계 확대
1,2,3,4,5,6 : 버튼을 클릭하면, 지도가 특정레벨로 조정되도록 설정
- : 버튼을 클릭하면, 지도가 1단계 축소

여기 소스에서 mapObj는 위에서 위 소스의 mapObj와 같아야 한다.

<button onclick='mapObj.pan(100,100)'>pan</button>
<button onclick='mapObj.zoomIn()'>+</button>
<button onclick='mapObj07032602.setZoom(1)'>1</button>
<button onclick='mapObj07032602.setZoom(2)'>2</button>
<button onclick='mapObj07032602.setZoom(3)'>3</button>
<button onclick='mapObj07032602.setZoom(4)'>4</button>
<button onclick='mapObj07032602.setZoom(5)'>5</button>
<button onclick='mapObj07032602.setZoom(6)'>6</button>
<button onclick='mapObj07032602.zoomOut()'>-</button
이벤트 리스너 등록   ▼

마우스를 지도 위에서 누를 때 마다 위치를 적은 경고창이 나타나게 한다.

<button onclick=addClick()>click event등록</button>
<button onclick=removeClick()>click event제거</button>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
지도 상 마커 및 정보창 이용   ▼

<button onclick=addClickMarker()>click event등록</button>
<button onclick=removeClickMarker()>click event제거</button>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
지도 컨트롤 등록   ▼

var zoom =new NZoomControl();
mapObj.addControl(zoom);

이렇게 두줄만 첫번째 예제 소스의 끝에 붙여 주면 줌(zoom) 컨트롤이 처음부터 위치하게 할 수 있다.

<button onclick=addMapControl()>Control 등록</button>
<button onclick=removeMapControl()>Control 제거</button>

<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>