세우고
눞이고
소스공개 ㅋ
<html lang="ko" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>결혼합니다 동주,혜경</title>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/egovframework/mbl/cmm/jquery.mobile-1.3.2.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/egovframework/mbl/cmm/EgovMobile-1.3.2.css"/>
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/egovframework/mbl/com/uss/ussCommon.css"/>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/egovframework/mbl/cmm/jquery-1.9.1.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/egovframework/mbl/cmm/jquery.mobile-1.3.2.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/egovframework/mbl/cmm/EgovMobile-1.3.2.js"></script>
<script type="text/javascript" src="http://openapi.map.naver.com/openapi/naverMap.naver?ver=2.0&key=a64e324dad5fa88141a945d1afdc4ac2"></script>
<!--
좌표추출
http://openapi.map.naver.com/api/geocode.php?key=a64e324dad5fa88141a945d1afdc4ac2&encoding=utf-8&coord=LatLng&query=서울시서초구잠원동27-2
<point>
<x>313490</x>
<y>546258</y>
</point>
-->
</head>
<body>
<div id="naverMap" style="width:100%; height:250px; border:1px solid #000;"></div>
<!-- 네이버 지도 -->
<script type="text/javascript">
// 창크기 자동조절
var oMap;
var w = 100, h = 100;
w = $(window).width() - 95;
h = $(window).height() - 50;
$(document).ready(function(){
$(window).resize(function() {
w = $(window).width() - 95;
h = $(window).height() - 50;
oMap.setSize(new nhn.api.map.Size(w, h));
});
});
var oCenterPoint = new nhn.api.map.LatLng(37.5143890, 127.0191746);
var defaultLevel = 12;
oMap = new nhn.api.map.Map(document.getElementById('naverMap'),
{
point : oCenterPoint,
zoom : defaultLevel,
enableWheelZoom : true,
enableDragPan : true,
enableDblClickZoom : false,
mapMode : 0,
activateTrafficMap : false,
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 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);
tMarker.setPoint(oCenterPoint);
oMap.addOverlay(tMarker);
// - infowindow 사용 시
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
// - InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
// - 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
// - 단, DIV 의 position style 은 absolute 가 되면 안되며,
// - absolute 의 경우 autoPosition 이 동작하지 않습니다.
mapInfoTestWindow.setContent('<div style="width:145px; background-color:white; border: 1px solid #333; text-align:center;">JS강남 웨딩문화원<br/>서울시 서초구 잠원동 27-2<br/>02-3445-9000</div>');
mapInfoTestWindow.setPoint(oCenterPoint);
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.setPosition({left : 3, top : -43});
mapInfoTestWindow.autoPosition();
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.
</script>
</body>
</html>