JSP 부분 소스
<button type="button" class="btn" onclick="window.open('/html/SC-AIP-0020_MAP.html?addr=${schlInfo.post_no_adrs }&nm=${schlInfo.schl_nm }')">
<spring:message code="code.m10115" /><%--지도보기--%>
</button>
html 전체 소스
파라미터로 addr 에 주소와 nm 에 지명을 넣으면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta content="noindex" name="robots" />
<meta name="description" content="">
<meta property="og:locale:alternate" content="ko_KR">
<meta property="og:title" content="">
<meta property="og:url" content="http:///">
<meta property="og:type" content="website">
<meta property="og:image" content="/resources/images/favicon/share.png">
<meta property="og:site_name" content="">
<meta property="og:description" content="">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="">
<meta name="twitter:url" content="http://">
<meta name="twitter:image" content="/resources/images/favicon/share.png">
<meta name="twitter:description" content="">
<meta name="format-detection" content="telephone=no, address=no, email=no">
<title>대학알리미</title>
</head>
<body>
<div id="map" style="width:100%;height:900px;"></div>
<script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=40256c4ae48a5d5467ee312008267827_&libraries=services,clusterer,drawing"></script>
<script>
window.onload = function(){
var addr = fnGetParameterByName('addr');
var nm = fnGetParameterByName('nm');
drawMap(addr,'map_area',nm);
}
function fnGetParameterByName(name) {
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "G" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
<script>
function drawMap(ADDR,DIVID,COMPANYNM){
var mapContainer = document.getElementById('map');
var mapOption = {
center: new daum.maps.LatLng(0 , 0),
level: 3
};
// 지도를 생성합니다
var map = new daum.maps.Map(mapContainer, mapOption);
// 주소-좌표 변환 객체를 생성합니다
var geocoder = new daum.maps.services.Geocoder();
// 주소로 좌표를 검색합니다
geocoder.addressSearch(ADDR, function(result, status) {
// 정상적으로 검색이 완료됐으면
if (status === daum.maps.services.Status.OK) {
var coords = new daum.maps.LatLng(result[0].y, result[0].x);
// 결과값으로 받은 위치를 마커로 표시합니다
var marker = new daum.maps.Marker({
map: map,
position: coords
});
// 인포윈도우로 장소에 대한 설명을 표시합니다
var infowindow = new daum.maps.InfoWindow({
content: '<div style="width:150px;text-align:center;padding:6px 0;">'+COMPANYNM+'</div>'
});
infowindow.open(map, marker);
// 지도의 중심을 결과값으로 받은 위치로 이동시킵니다
map.setCenter(coords);
var mapTypeControl = new daum.maps.MapTypeControl();
// 지도에 컨트롤을 추가해야 지도위에 표시됩니다
// kakao.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
// 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
var zoomControl = new daum.maps.ZoomControl();
map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
}else{
var colIdx = ADDR.indexOf(',');
var brcIdx = ADDR.indexOf('(');
var rstIdx = 0;
if(colIdx > 0 && brcIdx > 0){
rstIdx = colIdx < brcIdx ? colIdx : brcIdx;
}else {
if(colIdx > 0) rstIdx = colIdx ;
if(brcIdx > 0) rstIdx = brcIdx ;
}
if(rstIdx > 0 ){
reDraw(ADDR.substr(0,rstIdx),DIVID,COMPANYNM);
}
}
});
}
</script>
</body>
</html>
댓글