네이버 지도 API 로 회사약도 만들기 - 위치와 라벨표시하기

2012.07.16. 23:17

http://gggg4u.blog.me/162077346

네이버 지도 API 로 회사약도 만들기 - 위치와 라벨 표시하기
네이버 지도 API 를 이용하려고 개발자 센터에 들어가면, 마커 이용법은 나오는데, 네이버 측에서는 사람들이 가장 많이 이용할만한 것인 회사약도만들기와 같은 예제소스를 친절하게 가르쳐주지 않습니다. 그냥 전문가들만 써주길 바라는 것 같아요.
저도 자바스크립트는 좋아하지 않다보니, 한참 고생하다가 한 블로거님의 글을 보고 해결!
조금더 간단하게 많은 분들을 도와드릴 수 있을 것 같아서 "네이버 지도 API 로 회사약도 만들기"포스팅 들어갑니다.

1. 네이버 지도 API 키 발급

일단, 네이버 지도 API 를 사용하기 위해서는 API 사용을 위한 키를 받아야해요.

로그인 상태라면 https://dev.naver.com/openapi/register 로 접속하시면 바로 발급 가능!

2. 기본소스 복사 붙여넣기

이제, 지도를 볼수있게 해주는 기본 소스를 복사, 붙여넣기 해주어야 합니다.

사진에 보이는 지도 API 아래의 Javascript 2.0 버튼을 클릭!

사용예제 아래쪽에 "지도생성" 이라는 부분의 예제소스를 복사해서 지도를 넣을 곳에 붙여넣기 하세요.
만약 줌아웃기능이 필요하다면, "지도 줌 컨트롤 등록" 부분의 예제소스를 복사해서 붙여넣으세요

예제소스는 다음과 같습니다.

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en_US" xml:lang="en_US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
OpenAPI 2.0 - 지도 생성

</html>

빨간색 배경으로 되어있는 f32441ebcd3cc9de474f8081df1e54e3 부분이 보이시나요?
이 부분에다가 발급받은 네이버 API 키를 넣어주세요. 그리고!

이 소스를 붙여넣으면 일단 홈페이지 내에서 네이버 지도가 보여진답니다.
이제 빨간색으로 표시한 3부분이 보이시나요?

먼저 width:500px; height:400 은 지도가 실제로 보여지는 박스의 사이즈입니다. width 가 가로, height 가 세로를 나타내죠
맨 아래쪽의 500, 400 역시 width, 와 height 를 말한답니다.

그리고 가운데 37.5010226, 127.0396037 은 바로 위도와 경도를 나타내는 숫자로서 지도의 중심의 위치를 말한답니다.
이 위도와 경도는 회사위치로 바꿔 주셔야 겠죠?

3. 위도와 경도 찾기

http://openapi.map.naver.com/api/geocode.php?key=f32441ebcd3cc9de474f8081df1e54e3&encoding=euc-kr&coord=LatLng&query=인천시중구신흥동3가7-308

이 주소를 주소창에 넣고 검색해주면 코드가 등장하는데 여기서

<point>

point>

부분이다. y 좌표를 먼저 넣고 x 좌표를 뒤에 넣어준다.

4. (생략가능) 줌 컨트롤러 추가.

만약, 처음에 예제소스를 복사했을 때 줌컨트롤 등록 부분의 예제를 가져왔다면 아래의 소스가

var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
mapZoom.setPosition({left:80, bottom:40}); // - 줌 컨트롤 위치 지정
oMap.addControl(mapZoom); // - 줌 컨트롤 추가.

부분에 들어있을 것이다.

5. 회사위치에 마커표시하고 라벨표시하기

이제, 아래의 소스를 줌컨트롤 소스 아래에 넣어주자.

var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('http://static.naver.com/maps2/icons/pin_spot2.png', oSize, oOffset);

var oMarker = new nhn.api.map.Marker(oIcon, { title : '아이르의 사무실 ' }); //마커를 생성한다
oMarker.setPoint(oPoint); //마커의 좌표를 oPoint 에 저장된 좌표로 지정한다
oMap.addOverlay(oMarker); //마커를 네이버 지도위에 표시한다

var oLabel = new nhn.api.map.MarkerLabel(); // 마커 라벨를 선언한다.
oMap.addOverlay(oLabel); // - 마커의 라벨을 지도에 추가한다.
oLabel.setVisible(true, oMarker); // 마커의 라벨을 보이게 설정한다.

이제, 저장하고 확인하면 끝!

네이버 지도 API 로 회사위치를 손쉽게 알려줄 수 있게 되었다.

[출처] 네이버 지도 API 로 회사약도 만들기 - 위치와 라벨표시하기|작성자 아이르

070-8260-2526

평일 오전 9시 ~ 오후 6시

단위농협

352-0331-1626-83

예금주:강만수테크넷코리아