구글맵 API - 다각형 그리기

구글맵에 다각형을 그리는 예제입니다.

예제보기
클릭한 지점을 중심으로 사각형을 그려줍니다.


    function initialize() {
        if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map_canvas"));
            map.setCenter(new GLatLng(37.4419, 127.1419), 13);
            GEvent.addListener(map, "click", function(overlay,latlng) {
                var lat = latlng.lat();
                var lon = latlng.lng();
                var latOffset = 0.01;
                var lonOffset = 0.01;
                var polygon = new GPolygon([
                    new GLatLng(lat, lon - lonOffset),
                    new GLatLng(lat + latOffset, lon),
                    new GLatLng(lat, lon + lonOffset),
                    new GLatLng(lat - latOffset, lon),
                    new GLatLng(lat, lon - lonOffset)
                    ], "#f33f00", 5, 1, "#ff0000", 0.2);
                map.addOverlay(polygon);
            });
        }
    }

GPolygon은 아래와 같이 정의되어 있습니다.

GPolygon(latlngs:GLatLng[], strokeColor?:String, strokeWeight?:Number, strokeOpacity?:Number, fillColor?:Number, fillOpacity?:Number, opts?:GPolygonOptions)

사실 GPolygon은 직선을 그려주는 GPolyline과 거의 같습니다.
선을 여러개 연결해서 다각형을 그려주기 때문이죠.

latlngs: 위/경도 좌표입니다. 그리려는 다각형의 (변의 갯수-1) 개 좌표가 들어가야 합니다.
strokeColor: 테두리 색상입니다.
strokeWeight: 테두리의 두께입니다.
strokeOpacity: 테두리의 불투명도입니다.
fillColor: 다각형 안의 색상입니다.
fillOpacity: 다각형 안의 투명도입니다.


이 코드를 처음 보고 제가 처음 가졌던 의문은, 4각형인데 좌표는 왜 5개지? 였습니다.
(무식한 저만 이런 고민 한건지도 모르겠네요).
소스를 잘 보시면 A-B-C-D-A 의 형태로 되어 있습니다.
4개의 선을 그리기 위해 5개의 좌표가 필요한 이유입니다.
언뜻 복잡해 보이기도 하지만, 하나하나 뜯어보면 단순한 예제입니다.


출처: http://code.google.com/intl/ko/apis/maps/documentation/examples