안녕하세요.
웹프로그래머 넓은마인드 입니다.^^
오늘은 네이버 API 를 이용하여 지도를 보여주는 형식을 공부해 보도록 하겠습니다.
그전에 간단히 웹언어의 특징및 장단점에 대하여 간략하게 말하는 시간을 가져보겠습니다.
============================================================================
컴퓨터 프로그래밍을 하는 방법은 여러가지가 있습니다.
그리고 표현할수 있는 언어도 여러가지가 있습니다.
아주 수많은 언어가 존재하지만 그중에서도 c, c++ ,닷넷 , asp , php , 파워빌더 등등.
은 우리가 익히 들어서 알고 있지요.
이중에서 웹프로그래밍 에 속하는 것은 asp , php , jsp 가 있는데요
이중 asp 와 php 의 차이점및 장단점에 대하여 얘기를 해보겠습니다.
asp 와 php 는 모두 대표적인 인터프린터 언어로써 컴파일러 를 거치지 않고 실행이 됩니다.
또한 언어가 직관적이면서 사용하기에 편리한 측면이 있죠.
asp 는 윈도우 기반의 언어로써 window 환경에서 구동이 됩니다.
php 는 리눅스(유닉스) 기반의 언어로써 현재로써는 asp 보다 많이 사용되어지고 있습니다.
두개의 언어가 모두 장단점이 있어 어떤 언어가 좋다 라고 말씀드릴수는 없지만
php 가 asp 에 비해 내장함수가 풍부하고 또 사용하기에 간단한것은 사실입니다.
예를들어 파일업로드의 경우 asp 는 덱스트업로드 와 같은 별개의 업로드 모듈이 있어야 하지만
php 는 내장함수로써 지원을 해줍니다.
asp 는 현재에 들어서 사용하는 인구가 예전에 비해 많이 줄어들었으며 php 또는 asp.net 으로
개발인력이 많이 전향되었습니다.
저또한 asp 는 2000년대 초반 6년정도 하다가 지금은 거의 사용하지 않고(ㅜㅜ) 있습니다.
인터프린터 , 컴파일러 언어 에 대해서는 다음에 기회가 된다면 좀더 자세히 말해드리도록
하겠습니다.^^
============================================================================
사설이 길었네요. 지금부터 오늘 강의 의 목적인 지도 api 활용에 대하여 강의해 보도록 하겠습니다.
예전에 api 가 없던 시절 우리는 홈페이지를 제작할때 찾아오시는길 은 무조건 이미지 또는 플래쉬
로 제작했습니다.
하지만 최근에는 네이버 또는 다음 api 를 이용해서 지도를 좀더 유동적이면서 보기 좋게
만들어서 보여주고 있죠 .
오늘 우리는 네이버 지도 api 를 이용해서 우리 홈페이지에 지도를 보여주도록 하겠습니다.
우선 네이버 api 를 이용하기 위해서 오픈 API 키 등록을 하여야 합니다.
https://dev.naver.com/openapi/register 를 방문 하셔서 키 발급을 받으세요.^^
위 주소로 들어가서 왼쪽 "키 등록관리" 메뉴를 누르신후 지도 API 에서 "키추가" 버튼을 누르시면
됩니다.
여기서 사용환경 을 "웹" 으로 선택하시고 URL 에 적용할 주소를 적어주시면 됩니다.
주소는 도메인만 입력하시면 됩니다.
여기까지 하면 키발급이 완료되면서 우리는 도메인 어디에서든 지도 API 를 이용할수 있게
됩니다. 참 쉽죠.~~~
============================================================================
다음 과정은 실제로 우리 홈페이지에 네이버 지도를 적용하는 과정입니다.
우선 테스트할수있는 페이지를 하나 생성해 주시면 되는데요
저는 map.php 라는 이름의 파일을 만들어서 작업 하겠습니다.
위와 같이 파일을 하나 만드셨다면 이제 지도 코드를 적용할 차례인데요
지도 코드의 연동은 생각보다 더 쉽습니다.
http://dev.naver.com/openapi/apis/map/javascript_2_0/example
여기에 가셔서 예제소스를 그대로 가져와서 쓰시면 됩니다.
여기 있는 소스를 그대로 복사해서 붙여 넣으시면 됩니다.
그럼 바로 위의 예제와 같은 지도가 짠~~ 하고 나타납니다.
api 예제 페이지에는 지도의 많은 형식이 들어가 있으므로 자신이 원하는 타입의 예제소스를
그대로 가져와서 사용하시면 됩니다.
저는 단순히 지도만 보여주고 싶으니까 위 예제에서 4번 샘플을 적용해 보도록 하겠습니다.
============================================================================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>OpenAPI Map Test -지도 타입 버튼, 주제별 지도.</title>
<style>v\:* { behavior: url(#default#VML); }</style>
<!-- prevent IE6 flickering -->
<script type="text/javascript">
try {document.execCommand('BackgroundImageCache', false, true);} catch(e) {}
</script>
</head>
<body>
<div id = "testMap" style="border:1px solid #000; width:500px; height:400px; margin:20px;"></div>
<script type="text/javascript">
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('testMap' ,{
point : oPoint,
zoom : 10,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(500, 400)
});
var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
themeMapButton = new nhn.api.map.ThemeMapBtn(); // - 자전거지도 버튼 선언
mapTypeChangeButton = new nhn.api.map.MapTypeBtn(); // - 지도 타입 버튼 선언
var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({top:10, right:110}); // - 실시간 교통지도 버튼 위치 지정
mapTypeChangeButton.setPosition({top:10, left:50}); // - 지도 타입 버튼 위치 지정
themeMapButton.setPosition({top:10, right:10}); // - 자전거지도 버튼 위치 지정
mapZoom.setPosition({left:10, top:10}); // - 줌 컨트롤 위치 지정.
oMap.addControl(mapZoom);
oMap.addControl(themeMapButton);
oMap.addControl(mapTypeChangeButton);
oMap.addControl(trafficButton);
</script>
</body>
</html>
위와같은 샘플코드를 우리가 생성해둔 map.php 파일에 적용시키면 되는데요.
적용전에 14번줄 아래부분의
naverMap.naver?ver=2.0&key=자신의 API키 값이 들어가도록 변경하시면 됩니다.
저장하신뒤에 브라우져를 실행하시면 위와같은 지도가 나오게 됩니다.^^
여기에서 우리회사를 보여주고 싶으시다면 20번줄의 좌표값을 바꾸셔야 하는데요.
주소의 좌표값을 알아보시려면
http://openapi.map.naver.com/api/geocode.php?key=122d6ba5ac9791f14c52f62c9442e851&encoding=euc-kr&coord=LatLng&query=서울시 마포구 동교동 185-10번지
이렇게 위 url 을 실행하시고 뒤쪽에 주소를 넣어주시면 됩니다.
위주소를 실행하면
이런 xml 이 나오는데요 여기서 x 좌표와 y 좌표의 값을 소스 20번줄에 대체해주시면 됩니다.
※ 여기서 주의할점은 y,x 의 순서로 적어주시면 됩니다.
var oPoint = new nhn.api.map.LatLng(37.5010226, 127.0396037);
여기의 좌표를
var oPoint = new nhn.api.map.LatLng(37.5563698, 126.9320456);
이렇게 바꾸시면 됩니다.
============================================================================
여기까지 오셨다면 기본 연결은 완료가 되었습니다.
이제 마커를 추가해볼텐데요.
아래와같이 추가해주세요
var oSize = new nhn.api.map.Size(28, 37); //아이콘 사이즈
var oOffset = new nhn.api.map.Size(14, 37); //아이콘 사이즈에 따른 위치 보정
oMarker = new nhn.api.map.Marker(oIcon, { title : '제목' }); //마커 제목 생성
oMarker.setPoint(oMap.getCenter()); // 마커 표시할 좌표 선택
oMap.addOverlay(oMarker); //마커를 지도위에 표시
//마커 라벨 출력
oLabel = new nhn.api.map.MarkerLabel(); //마커 라벨 선언
oMap.addOverlay(oLabel); //마커 라벨 지도에 추가, 기본은 보이지 않는 상태로 추가됨
oLabel.setVisible(true, oMarker); //마커 라벨 보이기
위소스는 스크립트 제일 하단에 추가해 주시면 됩니다.
이렇게 완벽한 지도가 생성되었습니다.
여러분 개개인에 맞게끔 나머지 부분도 샘플 예제를 참고하여 작업을 하시면 됩니다.^^
오늘 강의는 여기까지 하겠습니다. 감사합니다
