[GoogleMap] 구역을 표시해보자 - Polygon

교통사고 다발지역 API의 응답값이 정확한 사고지점을 알려주는 것이 아니라,

사고가 많이 발생하는 구역의 좌표와 그 중앙값의 위도/경도값을 제공해 주기 때문에

이런 정보를 맵에 보여주기 위해서는 아래와 같이 해당 구역을 표시해 줄 수 있는 기능이 필요하다.

Polygon이라고 하는데 아래와 같이 원형태로 보여 주려면 엄청 많은 좌표값이 필요하다.

교통사고 다발지역 API에서 제공되는 샘플 좌표값은 이렇다.

[126.97851642,37.57485821],[126.97849053,37.57464986],[126.97841385,37.57444952],[126.97828933,37.57426488],[126.97812175,37.57410305],[126.97791756,37.57397023],[126.9776846,37.57387154],[126.97743183,37.57381077],[126.97716895,37.57379025],[126.97690607,37.57381077],[126.97665329,37.57387154],[126.97642033,37.57397023],[126.97621614,37.57410305],[126.97604856,37.57426488],[126.97592404,37.57444952],[126.97584736,37.57464986],[126.97582147,37.57485821],[126.97584736,37.57506655],[126.97592404,37.57526689],[126.97604856,37.57545152],[126.97621614,37.57561336],[126.97642033,37.57574617],[126.97665329,37.57584486],[126.97690607,37.57590563],[126.97716895,37.57592615],[126.97743183,37.57590563],[126.9776846,37.57584486],[126.97791756,37.57574617],[126.97812175,37.57561336],[126.97828933,37.57545152],[126.97841385,37.57526689],[126.97849053,37.57506655],[126.97851642,37.57485821]

구글 문서에서는 버뮤다삼각지대를 샘플로 보여주고 있는데, 

<script>
		function initMap() {
  			var map = new google.maps.Map(document.getElementById('map'), {
    			zoom: 5,
    			center: {lat: 24.886, lng: -70.268},
    			mapTypeId: 'terrain'
  			});

  			// Define the LatLng coordinates for the polygon's path.
  			var triangleCoords = [
    			{lat: 25.774, lng: -80.190},
    			{lat: 18.466, lng: -66.118},
				{lat: 32.321, lng: -64.757},
				{lat: 25.774, lng: -80.190}
			  ];

		  	// Construct the polygon.
		  	var bermudaTriangle = new google.maps.Polygon({
				paths: triangleCoords
		  	});
		  	bermudaTriangle.setMap(map);
		}
</script>

google.map.Polygon객체를 생성할 때 좌표의 배열을 전달만 하면 된다.

기본적으로 path 정보만 전달하면 아래처럼 검정색 라인에 좀 투명한 검정색으로 다각형 내부가 채워지게 되는데,

var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
});

Polyon 객체 생성시 라인에 대한 설정, 내부를 채울 색에 대한 정보를 전달하게 되면, 아래처럼 커스터마이징이 가능하다.

 

Polygon에 대한 상세 내용은 여기를 참조.

https://developers.google.com/maps/documentation/javascript/shapes

Shapes  |  Maps JavaScript API  |  Google Developers