네이버 맵 연동 - 마커 / 라벨 추가하기
1. 네이버 지도 API 키 발급 받기
http://developer.naver.com/wiki/pages/MapAPI 로 들어가 [키 발급/관리]를 클릭한다.
코딩할 때는 JavaScript 2.0 지도 시작하기를 참고 하면 된다. 
[키 추가] 버튼을 눌러 키를 발급화면으로 이동한다. 
[?] 버튼을 눌러 디렉토리 제한에 관한 설명을 숙지하고, 양식을 작성하고 키를 발급 받는다. 
2. 코딩하기 – 마커 및 라벨 추가하기
아래는 보통 회사 위치를 안내하는 페이지 이다.
네이버맵을 페이지에 내장시키고, 맵 위에 회사 위치에 마커를 찍어주고, 라벨에 회사명을 적어 주었다.
마커 옆에 긴 네모가 라벨이다. 
JavaScript 2.0 지도 시작하기에 다 나와 있다. 아마 수십분만 투자해도 활용할 수 있을 것이다.
그런데 “샘플 파일 다운로드” 링크가 깨져있어서, 소스를 복사 붙여넣기 해야 하는데,
붙여넣기 하면 소스가 한줄로 쭉 나와서, 소스 정리 하는 시간이 좀 걸린다. 좀 짜증…
여튼 아래 소스는 1. 사용 예제를 기반으로 작성한 것이다.
주석을 약간 붙였다.
안쓰는 기능은 다 주석(/**/) 처리를 했다.
위 그림과 같이 나오게 하려면, 굵게 표시한 부분만 고쳐서 쓰면 된다.
위도/경도(Lat, Lng)는 각자에 맞게 찾아야 하는데, 네이버맵을 통해 어찌저찌 알아내면 된다.
안되면 구글맵을 통해 알아내도 되고, 다음맵을 통해 알아내도 될 것이다.
(주소를 가지고 있으면 쉽게 알아낼 수 있을 것이다.)
<!-- 네이버 맵 -->
<!-- prevent IE6 flickering -->
<script type="text/javascript">
try {
document.execCommand('BackgroundImageCache', false, true);
}
catch(e) {
}
</script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=여기에발급받은키를입력한다."></script>
<div id="map" style="border:1px solid #000;"></div>
<script type="text/javascript">
var Lat = 37.0000000;
var Lng = 126.0000000;
// 위도/경도
var oSeoulCityPoint = new nhn.api.map.LatLng(Lat, Lng);
// 줌레벨
var defaultLevel = 12;
// 맵 생성
var oMap = new nhn.api.map.Map(document.getElementById('map'), {
point : oSeoulCityPoint,
zoom : defaultLevel,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(900, 480)
});
// 줌 컨트롤
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({
top : 10,
left : 10
});
// 일반/위성 버튼
var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
oMap.addControl(oMapTypeBtn);
oMapTypeBtn.setPosition({
bottom : 10,
right : 80
});
// 주제별 지도 버튼
/*var oThemeMapBtn = new nhn.api.map.ThemeMapBtn();
oThemeMapBtn.setPosition({
bottom : 10,
right : 10
});
oMap.addControl(oThemeMapBtn);*/
// 자전거 지도 범례 컨트롤
/*var oBicycleGuide = new nhn.api.map.BicycleGuide(); // - 자전거 범례 선언
oBicycleGuide.setPosition({
top : 10,
right : 10
}); // - 자전거 범례 위치 지정
oMap.addControl(oBicycleGuide);// - 자전거 범례를 지도에 추가. */
// 교통범례 컨트롤
/*var oTrafficGuide = new nhn.api.map.TrafficGuide(); // - 교통 범례 선언
oTrafficGuide.setPosition({
bottom : 30,
left : 10
}); // - 교통 범례 위치 지정.
oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.*/
// 실시간 교통 버튼
/*var trafficButton = new nhn.api.map.TrafficMapBtn(); // - 실시간 교통지도 버튼 선언
trafficButton.setPosition({
bottom:10,
right:150
}); // - 실시간 교통지도 버튼 위치 지정
oMap.addControl(trafficButton);*/
// 마커 아이콘(안보이는 상태로 맵에 추가해 놓기)
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 oInfoWnd = new nhn.api.map.InfoWindow();
oInfoWnd.setVisible(false);
oMap.addOverlay(oInfoWnd);
oInfoWnd.setPosition({
top : 20,
left :20
});
// 마커라벨(안보이는 상태로 맵에 추가해 놓기)
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
oInfoWnd.attach('changeVisible', function(oCustomEvent) {
if (oCustomEvent.visible) {
oLabel.setVisible(false);
}
});
/*
// 폴리곤 객체 선언(안보이는 상태로 맵에 추가해 놓기)
var oPolyline = new nhn.api.map.Polyline([], {
strokeColor : '#f00', // - 선의 색깔
strokeWidth : 5, // - 선의 두께
strokeOpacity : 0.5 // - 선의 투명도
}); // - polyline 선언, 첫번째 인자는 선이 그려질 점의 위치. 현재는 없음.
oMap.addOverlay(oPolyline); // - 지도에 선을 추가함.
oMap.attach('mouseenter', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, oMarker); // - 특정 마커를 지정하여 해당 마커의 title을 보여준다.
}
});
oMap.attach('mouseleave', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에서 마우스 나간거면
if (oTarget instanceof nhn.api.map.Marker) {
oLabel.setVisible(false);
}
});
oMap.attach('click', function(oCustomEvent) {
var oPoint = oCustomEvent.point;
var oTarget = oCustomEvent.target;
oInfoWnd.setVisible(false);
// 마커 클릭하면
if (oTarget instanceof nhn.api.map.Marker) {
// 겹침 마커 클릭한거면
if (oCustomEvent.clickCoveredMarker) {
return;
}
// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
// - 단, DIV 의 position style 은 absolute 가 되면 안되며,
// - absolute 의 경우 autoPosition 이 동작하지 않습니다.
oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' +
'Hello World <br /> ' + oTarget.getPoint()
+'<span></div>');
oInfoWnd.setPoint(oTarget.getPoint());
oInfoWnd.setPosition({right : 15, top : 30});
oInfoWnd.setVisible(true);
oInfoWnd.autoPosition();
return;
}
var oMarker = new nhn.api.map.Marker(oIcon, { title : '마커 : ' + oPoint.toString() });
oMarker.setPoint(oPoint);
oMap.addOverlay(oMarker);
var aPoints = oPolyline.getPoints(); // - 현재 폴리라인을 이루는 점을 가져와서 배열에 저장.
aPoints.push(oPoint); // - 추가하고자 하는 점을 추가하여 배열로 저장함.
oPolyline.setPoints(aPoints); // - 해당 폴리라인에 배열에 저장된 점을 추가함
});
*/
// 마커 직접추가
var oMarker = new nhn.api.map.Marker(oIcon, { title : '회사명' });
oMarker.setPoint(oSeoulCityPoint);
oMap.addOverlay(oMarker);
oLabel.setVisible(true, oMarker);
// 정보상자 직접추가
/*
oInfoWnd.setContent('<DIV style="border-top:1px solid; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
'<span style="color: #000000 !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing: -1px !important;white-space: nowrap !important; padding: 2px 5px 2px 2px !important">' +
'Hello World <br /> '
+'<span></div>');
oInfoWnd.setPoint(oMarker.getPoint());
oInfoWnd.setPosition({right : 15, top : 30});
oInfoWnd.setVisible(true);
oInfoWnd.autoPosition();
*/
</script>