개요
지역 지도는 특정 지역에 색상과 값이 할당된 국가, 대륙 또는 지역 지도입니다. 값은 색상 스케일로 표시되며 영역의 마우스 오버 텍스트(선택사항)를 지정할 수 있습니다. 지도는 삽입된 Flash 플레이어를 사용하여 브라우저에서 렌더링됩니다. 지도는 스크롤하거나 드래그할 수 없지만 확대/축소를 허용하도록 구성할 수 있습니다.
예
예를 들어 지역 표시 스타일을 사용하는 예와 마커 표시 스타일을 사용하는 예가 있습니다.
지역 예
지역 스타일은 할당한 값에 해당하는 색상으로 전체 지역 (일반적으로 국가)을 채웁니다. 코드에서 options['dataMode']
= 'regions'를 할당하여 지역 스타일을 지정합니다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages':['geomap'],
// Note: you will need to get a mapsApiKey for your project.
// See: https://developers.google.com/chart/interactive/docs/basic_load_libs#load-settings
'mapsApiKey': 'AIzaSyD-9tSrke72PouQMnMX-a7eZSW0jkFMBWY'
});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
var options = {};
options['dataMode'] = 'regions';
var container = document.getElementById('regions_div');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id="regions_div" style="width: 900px; height: 500px;"></div>
</body>
</html>
마커 예
'마커' 스타일은 지정한 지역 위에 값을 나타내는 원을 크기와 색상으로 표시합니다.
<html>
<head>
<script type='text/javascript' src='https://www.gstatic.com/charts/loader.js'></script>
<script type='text/javascript'>
google.charts.load('current', {'packages': ['geomap']});
google.charts.setOnLoadCallback(drawMap);
function drawMap() {
var data = google.visualization.arrayToDataTable([
['City', 'Popularity'],
['New York', 200],
['Boston', 300],
['Miami', 400],
['Chicago', 500],
['Los Angeles', 600],
['Houston', 700]
]);
var options = {};
options['region'] = 'US';
options['colors'] = [0xFF8747, 0xFFB581, 0xc06000]; //orange colors
options['dataMode'] = 'markers';
var container = document.getElementById('map_canvas');
var geomap = new google.visualization.GeoMap(container);
geomap.draw(data, options);
};
</script>
</head>
<body>
<div id='map_canvas'></div>
</body>
</html>
로드
google.charts.load 패키지 이름은 "geomap"입니다.
google.charts.load('current', {'packages': ['geomap']});
지역 지도 시각화 클래스 이름은 google.visualization.GeoMap입니다.
var visualization = new google.visualization.GeoMap(container);
데이터 형식
두 가지 주소 형식이 지원되며, 각 형식은 서로 다른 수의 열과 각 열의 다른 데이터 유형을 지원합니다. 테이블의 모든 주소가 둘 중 하나를 사용해야 하며 유형을 혼합할 수 없습니다.
- 형식 1: 위도/경도 위치 이 형식은
dataMode옵션이 '마커'인 경우에만 작동합니다. 이 형식을 사용하는 경우 Google 지도 JavaScript를 포함하지 않아도 됩니다. 위치는 2개의 열과 2개의 선택적 열에 입력됩니다.- [숫자, 필수] 위도입니다. 양수는 북쪽, 음수는 남쪽입니다.
- [숫자, 필수] 경도입니다. 양수는 동쪽, 음수는 서쪽입니다.
- [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 4열이 사용되는 경우 이 열은 필수입니다.
- [문자열, 선택사항] 사용자가 이 영역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
- 형식 2: 주소, 국가 이름, 지역 이름 위치 또는 미국 대도시 지역 코드 이 형식은
dataMode옵션이 '마커' 또는 '지역'으로 설정된 경우 사용할 수 있습니다. 위치는 1개의 열에 추가로 2개의 선택 열을 입력합니다.- [문자열, 필수] 지도 위치입니다. 허용되는 형식은 다음과 같습니다.
- 특정 주소 (예: '1600 Pennsylvania Ave')
- 문자열 (예: '잉글랜드'), 대문자 ISO-3166 코드 또는 영문자로 된 국가 이름 (예: 'GB' 또는 '영국')
- 대문자 ISO-3166-2 지역 코드명 또는 영문 텍스트로 된 코드명 (예: 'US-NJ' 또는 'New Jersey') 참고: dataMode 옵션이 'regions'로 설정된 경우에만 리전을 지정할 수 있습니다.
- 권역의 지역 번호. 이는 다양한 지역을 지정하는 데 사용되는 세 자리 대도시 코드입니다. 미국 코드만 지원됩니다. 이 번호는 전화 지역 번호와 같지 않습니다.
- [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 3열이 사용되는 경우 이 열은 필수입니다.
- [문자열, 선택사항] 사용자가 이 영역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
- [문자열, 필수] 지도 위치입니다. 허용되는 형식은 다음과 같습니다.
참고: 지도에는 최대 400개의 항목을 표시할 수 있습니다. DataTable 또는 DataView에 400개가 넘는 행이 있는 경우 처음 400개만 표시됩니다. 가장 빠른 모드는 ISO 코드로 지정된 위치를 사용하는 dataMode='regions'와 위도/경도 항목을 사용하는 dataMode='markers'입니다. 가장 느린 모드는 문자열 주소를 사용하는 dataMode='markers'입니다.
중요: DataTable에는 사용하려는 열 앞에 모든 선택적 열이 포함되어야 합니다. 예를 들어 위도/경도 표를 지정하고 열 1, 2, 4만 사용하려는 경우에도 DataTable에서 열 3을 정의해야 합니다 (값을 추가할 필요는 없음).
dataTable = new google.visualization.DataTable();
dataTable.addRows(1);
dataTable.addColumn('number', 'LATITUDE', 'Latitude');
dataTable.addColumn('number', 'LONGITUDE', 'Longitude');
dataTable.addColumn('number', 'VALUE', 'Value'); // Won't use this column, but still must define it.
dataTable.addColumn('string', 'HOVER', 'HoverText');
dataTable.setValue(0,0,47.00);
dataTable.setValue(0,1,-122.00);
dataTable.setValue(0,3,"Hello World!");
구성 옵션
| 이름 | 유형 | 기본값 | 설명 |
|---|---|---|---|
region |
문자열 | '세계' | 지도에 표시할 영역입니다. 주변 지역도 표시됩니다. 국가 코드 (대문자 ISO-3166 형식) 또는 다음 문자열 중 하나일 수 있습니다.
Geomap은 스크롤 또는 드래그 동작을 지원하지 않으며 제한된 확대/축소 동작만 지원합니다. 기본 축소는 |
dataMode |
문자열 | '지역' | 지도에 값을 표시하는 방법 두 가지 값이 지원됩니다. |
width |
문자열 | '556px' | 시각화 너비입니다. 단위를 지정하지 않은 경우 기본 단위는 픽셀입니다. |
height |
문자열 | '347픽셀' | 시각화의 높이입니다. 단위를 지정하지 않은 경우 기본 단위는 픽셀입니다. |
colors |
0xRRGGBB 형식의 RGB 숫자 배열입니다. | [0xE0FFD4, 0xA5EF63, 0x50AA00, 0x267114] | 시각화의 값에 할당할 색상 그라디언트입니다. 값이 2개 이상 있어야 합니다. 그라데이션에는 모든 값과 계산된 중간 값이 포함되며, 가장 밝은 색상이 가장 작은 값으로, 가장 어두운 색상이 가장 높은 값으로 지정됩니다. |
showLegend |
boolean | true | true인 경우 지도의 범례를 표시합니다. |
showZoomOut |
boolean | false | true인 경우 zoomOutLabel 속성으로 지정된 라벨이 있는 버튼을 표시합니다. zoomOut 이벤트가 발생하는 경우를 제외하고 이 버튼을 클릭하면 아무런 동작도 하지 않습니다.
확대/축소를 처리하려면 이 이벤트를 포착하고 region 옵션을 변경합니다.
region 옵션이 세계 뷰보다 작은 경우에만 showZoomOut를 지정할 수 있습니다. 확대 동작을 사용 설정하는 한 가지 방법은 regionClick 이벤트를 수신 대기하고 region 속성을 적절한 지역으로 변경한 다음 지도를 새로고침하는 것입니다. |
zoomOutLabel |
문자열 | '넓게 보기' | 확대/축소 버튼의 라벨입니다. |
메서드
| 메서드 | 반환 유형 | 설명 |
|---|---|---|
draw(data, options) |
없음 | 지도를 그립니다. 그리기가 완료되기 전에 반환할 수 있습니다 (drawingDone() 이벤트 참고). |
getSelection() |
선택 요소의 배열 | 표준 getSelection() 구현 선택된 요소는 행입니다. 이 메서드는 dataMode 옵션이 '리전'인 경우에만 작동합니다. 할당된 값이 있는 지역만 선택할 수 있습니다. |
setSelection(selection) |
없음 | 표준 setSelection() 구현 선택항목을 행 선택으로 취급하고 여러 행 선택을 지원합니다. 할당된 값이 있는 리전만 선택할 수 있습니다. |
이벤트
| 이름 | 설명 | 속성 |
|---|---|---|
error |
차트를 렌더링하려고 시도할 때 오류가 발생하면 실행됩니다. | ID, 메시지 |
select |
사용자가 할당된 값이 있는 지역을 클릭하면 실행됩니다. 무엇이 선택되었는지 알아보려면 참고: 브라우저에서 파일(예: |
없음 |
regionClick |
지역을 클릭하면 호출됩니다. '지역' 및 '마커' 참고: 브라우저에서 파일 (예: |
클릭된 지역을 설명하는 ISO-3166 형식의 문자열로, 단일 속성 region를 포함하는 객체입니다. |
zoomOut |
축소 버튼을 클릭할 때 호출됩니다. 확대/축소를 처리하려면 이 이벤트를 포착하고 참고: 브라우저에서 파일(예: |
없음 |
drawingDone |
Geomap 그리기가 완료되면 호출됩니다. | 없음 |
데이터 정책
위치는 Google 지도에서 지오코딩됩니다. 지오코딩이 필요하지 않은 데이터는 어떠한 서버로도 전송되지 않습니다. 데이터 정책에 대한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.
참고사항
Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 및 모든 Flash 기반 시각화가 제대로 작동하지 않을 수 있습니다. 이 오류는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.