2015. 10. 28. 10:20ㆍ99. 정리전 - IT/29. IT 잡동지식
네이버 지도 키 발급
https://developer.naver.com/openapi/register.nhn
홈페이지에서 사용하기
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=18ac8040669d3142545233fdec219119"></script>
<!-- 네이버 지도 -->
<script type="text/javascript">
// 창크기 자동조절
var oMap;
var w = 0, h = 0;
w = $(window).width() - 100;
h = $(window).height() - 250;
$(document).ready(function(){
$(window).resize(function() {
w = $(window).width() - 100;
h = $(window).height() - 250;
oMap.setSize(new nhn.api.map.Size(w, h));
});
});
var oCenterPoint = new nhn.api.map.LatLng(37.5051646, 127.0525533);
var defaultLevel = 11;
oMap = new nhn.api.map.Map(document.getElementById('naverMap'),
{
point : oCenterPoint,
zoom : defaultLevel,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : true,
activateBicycleMap : false,
minMaxLevel : [ 1, 14 ],
size : new nhn.api.map.Size(w, h)
});
// 축척도
var oSlider = new nhn.api.map.ZoomControl();
oMap.addControl(oSlider);
oSlider.setPosition({
top : 40,
left : 5
});
// - 일반,위성
var oMapTypeBtn = new nhn.api.map.MapTypeBtn();
oMap.addControl(oMapTypeBtn);
oMapTypeBtn.setPosition({
bottom : 5,
right : 5
});
// - 교통 범례 선언
var oTrafficGuide = new nhn.api.map.TrafficGuide();
oTrafficGuide.setPosition({
top : 4,
right : 75
}); // - 교통 범례 위치 지정.
oMap.addControl(oTrafficGuide); // - 교통 범례를 지도에 추가.
// - 실시간 교통지도 버튼 선언
var trafficButton = new nhn.api.map.TrafficMapBtn();
trafficButton.setPosition({
top : 5,
right : 5
}); // - 실시간 교통지도 버튼 위치 지정
oMap.addControl(trafficButton);
var markerCount = 0;
// info
var addressInfo = '<DIV style="padding:4px; 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 2px 2px 2px !important">'
+ "<font color='red'>Minigate</font><br /> "
+ "<font>본사</font><br /> "
+ " <dl> "
+ " <dt style='color:gray'>주소 :</dt> "
+ " <dd>서울시 강남구 테헤란로 552 동광빌딩 (구, 비광빌딩) 53층</dd> "
+ " </dl> "
+ " <dl> "
+ " <dt style='color:gray'>전화 :</dt> "
+ " <dd>02-3245-1343</dd> "
+ " </dl> "
+ " <dl> "
+ " <dt style='color:gray'>FAX :</dt> "
+ " <dd>02-3534-1582</dd> "
+ " </dl> "
+ " <dl> "
+ " <dt style='color:gray'>지하철 :</dt> "
+ " <dd>2호선 까치릉역 하차 1번출구 도보 400m (약 6분)</dd> "
+ " </dl> "
+ " <dl> "
+ " <dt style='float:none; width:100%; color:gray'>EMAIL US</dt> "
+ " <dd style='float:none; width:100%;'>인사 : hr@minigate.net<br /> "
+ " 제휴/문의 : info@minigate.net</dd>"
+ " </dl><br /> "
+ "<font>일본지사</font><br /> "
+ " <dl> "
+ " <dt style='color:gray'>주소 :</dt> "
+ " <dd>Shinkasumigaseki Bldg. 5F., 23-33-2, kasumigaseki, Chiyoda-ku, Tokyo, Japan</dd>"
+ " </dl> "
+ " <dl> "
+ " <dt style='color:gray'>전화 :</dt> "
+ " <dd>+81-3-3539-5365, 070-7285-3327</dd> "
+ " </dl> "
+ " <dl> "
+ " <dt style='color:gray'>FAX :</dt> "
+ " <dd>+81-3-3539-3336</dd> "
+ " </dl> "
+ '<span></div>';
// - 지도위에 압정 포인트 찍기
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 tMarker = new nhn.api.map.Marker(oIcon, { title : 'DonzBox 본사' });
tMarker.setPoint(oCenterPoint);
oMap.addOverlay(tMarker);
// - infowindow 사용 시
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
mapInfoTestWindow.setVisible(false); // - infowindow 표시 여부 지정.
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.
var oLabel = new nhn.api.map.MarkerLabel(); // - 마커 라벨 선언.
oMap.addOverlay(oLabel); // - 마커 라벨 지도에 추가. 기본은 라벨이 보이지 않는 상태로 추가됨.
mapInfoTestWindow.attach('changeVisible', function(oCustomEvent) {
if (oCustomEvent.visible) {
oLabel.setVisible(false);
}
});
oMap.attach('mouseenter', function(oCustomEvent) {
var oTarget = oCustomEvent.target;
// 마커위에 마우스 올라간거면
if (oTarget instanceof nhn.api.map.Marker) {
var oMarker = oTarget;
oLabel.setVisible(true, tMarker); // - 특정 마커를 지정하여 해당 마커의 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;
mapInfoTestWindow.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 이 동작하지 않습니다.
mapInfoTestWindow.setContent(addressInfo);
mapInfoTestWindow.setPoint(oTarget.getPoint());
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.setPosition({right : 10, top : 35});
mapInfoTestWindow.autoPosition();
return;
}
oMap.addOverlay(tMarker);
});
setInfo();
function setInfo() {
mapInfoTestWindow.setContent(addressInfo);
mapInfoTestWindow.setPoint(oCenterPoint);
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.setPosition({right : 10, top : 35});
mapInfoTestWindow.autoPosition();
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.
}
function setCenterPT() {
oMap.setCenter(oCenterPoint);
oMap.setLevel(defaultLevel);
}
</script>
