47번째 줄:
47번째 줄: ==전자지도==
==전자지도==
− <html>
− <head>
− <meta charset="utf-8">
− <title>이미지 마커와 커스텀 오버레이 + 지도에 지형도 표시하기</title>
− <style>
− .customoverlay {position:relative;bottom:85px;border-radius:6px;border: 1px solid #ccc;border-bottom:2px solid #ddd;float:left;}
− .customoverlay:nth-of-type(n) {border:0; box-shadow:0px 1px 2px #888;}
− .customoverlay a {display:block;text-decoration:none;color:#000;text-align:center;border-radius:6px;font-size:14px;font-weight:bold;overflow:hidden;background: #d95050;background: #d95050 url(http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/arrow_white.png) no-repeat right 14px center;}
− .customoverlay .title {display:block;text-align:center;background:#fff;margin-right:35px;padding:10px 15px;font-size:14px;font-weight:bold;}
− .customoverlay:after {content:'';position:absolute;margin-left:-12px;left:50%;bottom:-12px;width:22px;height:12px;background:url('http://t1.daumcdn.net/localimg/localimages/07/mapapidoc/vertex_white.png')}
− </style>
− </head>
−
−
− <body>
− <div id="map" style="width:800px;height:600px;"></div>
−
− <script type="text/javascript" src="//dapi.kakao.com/v2/maps/sdk.js?appkey=89916f622dee27781f9dd08224b875a1"></script>
− <script>
− var mapContainer = document.getElementById('map'), // 지도를 표시할 div
− mapOption = {
− center: new daum.maps.LatLng(37.74422192927029, 126.48200372544497), // 지도의 중심좌표
− level: 5 // 지도의 확대 레벨
− };
−
− var map = new daum.maps.Map(mapContainer, mapOption); // 지도를 생성합니다
−
− // 지도에 지형정보를 표시하도록 지도타입을 추가합니다
− map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
−
− // 아래 코드는 위에서 추가한 지형정보 지도타입을 제거합니다
− map.removeOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
−
− // 일반뷰와 스카이뷰로 타입 전환이 가능한 컨트롤 생성
− var mapTypeControl = new daum.maps.MapTypeControl();
−
− // 지도에 컨트롤을 추가해야 지도위에 표시됩니다
− // daum.maps.ControlPosition은 컨트롤이 표시될 위치를 정의하는데 TOPRIGHT는 오른쪽 위를 의미합니다
− map.addControl(mapTypeControl, daum.maps.ControlPosition.TOPRIGHT);
−
− // 지도 확대 축소를 제어할 수 있는 줌 컨트롤을 생성합니다
− var zoomControl = new daum.maps.ZoomControl();
− map.addControl(zoomControl, daum.maps.ControlPosition.RIGHT);
−
− //지형정보 표시
− //map.addOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
−
− // 아래 코드는 위에서 추가한 지형정보 지도타입 제거
− //map.removeOverlayMapTypeId(daum.maps.MapTypeId.TERRAIN);
−
− var imageSrc = 'https://t1.daumcdn.net/localimg/localimages/07/mapapidoc/marker_red.png', // 마커이미지의 주소입니다
− imageSize = new daum.maps.Size(40, 40), // 마커이미지의 크기입니다
− imageOption = {offset: new daum.maps.Point(27, 69)}; // 마커이미지의 옵션입니다. 마커의 좌표와 일치시킬 이미지 안에서의 좌표를 설정합니다.
−
− // 마커의 이미지정보를 가지고 있는 마커이미지를 생성합니다
− var markerImage = new daum.maps.MarkerImage(imageSrc, imageSize, imageOption),
− markerPosition = new daum.maps.LatLng(37.74422192927029, 126.48200372544497); // 마커가 표시될 위치입니다
−
− // 마커를 생성합니다
− var marker = new daum.maps.Marker({
− position: markerPosition,
− image: markerImage // 마커이미지 설정
− });
−
− // 마커가 지도 위에 표시되도록 설정합니다
− marker.setMap(map);
−
− // 커스텀 오버레이에 표출될 내용으로 HTML 문자열이나 document element가 가능합니다
− var content = '<div class="customoverlay">' +
− ' <a href="http://dh.aks.ac.kr/~hoonhyeok/pavilion/GH/GH-01.htm" target="_blank">' +
− ' <span class="title">강화관제묘</span>' +
− ' </a>' +
− '</div>';
−
− // 커스텀 오버레이가 표시될 위치입니다
− var position = new daum.maps.LatLng(37.74422192927029, 126.48200372544497);
−
− // 커스텀 오버레이를 생성합니다
− var customOverlay = new daum.maps.CustomOverlay({
− map: map,
− position: position,
− content: content,
− yAnchor: 1
− });
−
− </script>
− </body>
− </html>
==주석==
==주석==
강화관제묘
명칭
강화관제묘
한문명칭
江華關帝廟
유형
관왕묘
건립일
1885년
주소
인천광역시 강화군 강화읍 합일길9번길 10
위도
37.744223
경도
126.482004
문화재 지정
비지정
개요 강화관제묘는 고종 22년(1885)에 마씨(馬氏) 여인이 창건한 것이라고 전한다. 즉 민간의 관우신앙에 기반하여 건립된 것으로, 국가 의례와는 무관하게 운영된 것으로 보인다. 고종 대 관왕묘에 대한 국가적 관심이 폭발하면서 각지에 건립된 여러 관왕묘들 가운데 하나인 듯하다.
민간신앙에 기반하여 건립된 특성상 강화관제묘는 관우뿐만 아니라 단군, 최영, 임경업, 율곡, 서산대사, 사명당 등 국내의 신격도 다수 모시고 있었다고 한다.
현황 관리자 故 정정애(인천시 무형문화재 제8호) 씨가 2021년 1월 1일에 타계했기 때문에 현재 강화관제묘의 제의 및 관리 상태가 어떠한지는 알 수 없다.
지식 관계망
시각자료 파노라마
스틸 갤러리 전자지도 주석 
