구글맵에 오버레이을 넣어 영역표시하기

스마트폰시간활용백서

하루를 27시간으로 만드는 시간 관리의 기술

1. 도  서  명 :  순식간에 한 달이 사라지는 당신을 위한 스마트폰 시간 활용 백서
2. 저        자 :  이동현
3. 출        간 : 2019년 03월 20일
4. 출  판  사 :  정보문화사
5. 도서구매 : 예스24(Yes24 .com)
6. 도서가격 : 15,000원(예스24구매 13,500원)


구글맵에 오버레이을 넣어 영역표시하기


  구글지도 위에는 다양한 Overlay 클래스들을 통해 지도 위에 자신이 원하는 것들을 올려서 정보를 표시할 수 있다. 경로 표시 직선인 Polyline 직선을 overlay object를 지도 위에 표시한 형식으로 나타낼 수 있다. 예를들면 특정지역을 표시하기 위해 Polygon이라는 다각형 object를 이용 지도 위에 다각형을 그릴 수 있는데 각점을 연결하는 점을 통해 그려 나간다. 이점이 바로 위도와 경도에 해당하는 좌표이기도 하다. 그리고 이 점들을 연결하는 선의 색상이나 채우기색상, 투명도등을 옵션에 넣어서 표시해 나갈 수 있다.


그림입니다.<br />
원본 그림의 이름: CLP000002780003.bmp<br />
원본 그림의 크기: 가로 813pixel, 세로 356pixel






=====================================================


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<style type="text/css">

        html { height : 100% }

        body { height : 100%; margin: 3% 0% 0% 1.5%; padding: 0 }

        #map_canvas { height : 100% }

</style>

<script type = "text/javascript"

        src = "http://maps.googleapis.com/maps/api/js?sensor=true">

</script>

<script type = "text/javascript">

 

        function initialize(){

 

                var latlng = new google.maps.LatLng(37.609676, 127.074305);

                var myOptions = {

                        zoom: 15,

                        center:latlng,

                        mapTypeId: google.maps.MapTypeId.ROADMAP                 

                };

                

                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

        

            var triangleCoords = [

                                        new google.maps.LatLng(37.612056, 127.077309),

                                        new google.maps.LatLng(37.609897, 127.077738),

                                        new google.maps.LatLng(37.609421, 127.073039)

                                      ];

 

                YeouidoTriangle = new google.maps.Polygon({

                                paths: triangleCoords,

                                strokeColor: "#FF0000",

                                strokeOpacity: 0.5,

                                strokeWeight: 2,

                                fillColor: "#FF0000",

                                fillOpacity: 0.5

                              });

 

                YeouidoTriangle.setMap(map);

 

        }

 

</script>

</head>

<body onload="initialize()">

        <div id="map_canvas" style="width:80%; height:60%"></div>

</body>

</html>

 


================================================


<!DOCTYPE html>

<html>

<head>

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

<style type="text/css">

html { height : 100% }

body { height : 100%; margin: 3% 0% 0% 1.5%; padding: 0 }

#map_canvas { height : 100% }

</style>

<script type = "text/javascript"

src = "http://maps.googleapis.com/maps/api/js?sensor=true">

</script>

<script type = "text/javascript">


function initialize(){


var latlng = new google.maps.LatLng(37.609676, 127.074305);

var myOptions = {

zoom: 15,

center:latlng,

mapTypeId: google.maps.MapTypeId.ROADMAP

};

var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

//—————————————————————————-

//아래의 세 개의 좌표들은 폴리곤의 꼭지점이다.


var triangleCoords = [

new google.maps.LatLng(37.612056, 127.077309),

new google.maps.LatLng(37.609897, 127.077738),

new google.maps.LatLng(37.609421, 127.073039)

];

//저는 먹골역위에 삼각형을 그리고 싶어서 세 점의 좌표로 구성된 배열을 만들어 Polygon의꼭지점들의 배열을 만들었다. 만약 사각형으로 하고자 할 경우에는


var triangleCoords = [

new google.maps.LatLng(37.61158,127.072867),

new google.maps.LatLng(37.612056, 127.077309),

new google.maps.LatLng(37.609897, 127.077738),

new google.maps.LatLng(37.609421, 127.073039)

];



//YeouidoTriangle이라는 Polygon object를 생성합니다.


        YeouidoTriangle = new google.maps.Polygon({

                                paths: triangleCoords,

                                strokeColor: "#FF0000",

                                strokeOpacity: 0.5,

                                strokeWeight: 2,

                                fillColor: "#FF0000",

                                fillOpacity: 0.5

                              });


//path는 위에 만든 세 점의 좌표 배열을 사용해, 삼각형의 경로를 지정한다.

//색상(strokeColor), 투명도(strokeOpacity), 두께(StrokeWeight)를 지정한다. 

//채우기 색상(fillColor), 투명도(fillOpacity)도 지정한다.

//투명도는 0~1 사이의 수로 투명한 정도를 설정하고,

//색상은 16진수 HTML 색상 포맷을 사용하고, 두께는 픽셀(Pixel) 단위로 표시한다.


        YeouidoTriangle.setMap(map);

//setMap() 함수로 기존의 지도 위에 사각형을 올려놓는다.

    }


</script>

</head>

<body onload="initialize()">

    <div id="map_canvas" style="width:80%; height:60%"></div>

</body>

</html>


=============================================



관련자료 :

http://code.google.com/intl/en/apis/maps/documentation/javascript/overlays.html#Polygons



이동현 원장

구글오프라인 사용자 모임 대표, (사)교회정보기술연구원 원장, (사)한국교회 언론회 정보통신 전문위원, (사)한국교회연합회 SNS위원장, [저서] 구글완전정복1(이론편), 구글완전정복2(실전편), 구글완전정복3(교사편), 트위터와 페이북의 선교적활용, 스마트전도법