이 페이지는 Cloud Translation API를 통해 번역되었습니다.

시각화: Geomap

개요
예시
로드 중
데이터 형식
구성 옵션
메서드
이벤트
데이터 정책
Notes

개요

지역 지도는 특정 지역에 색상과 값이 할당된 국가, 대륙 또는 지역 지도입니다. 값은 색상 스케일로 표시되며 영역의 마우스 오버 텍스트(선택사항)를 지정할 수 있습니다. 지도는 삽입된 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개의 선택적 열에 입력됩니다.
1. [숫자, 필수] 위도입니다. 양수는 북쪽, 음수는 남쪽입니다.
2. [숫자, 필수] 경도입니다. 양수는 동쪽, 음수는 서쪽입니다.
3. [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 4열이 사용되는 경우 이 열은 필수입니다.
4. [문자열, 선택사항] 사용자가 이 영역 위로 마우스를 가져가면 표시되는 추가 문자열 텍스트입니다.
형식 2: 주소, 국가 이름, 지역 이름 위치 또는 미국 대도시 지역 코드 이 형식은 dataMode 옵션이 '마커' 또는 '지역'으로 설정된 경우 사용할 수 있습니다. 위치는 1개의 열에 추가로 2개의 선택 열을 입력합니다.
1. [문자열, 필수] 지도 위치입니다. 허용되는 형식은 다음과 같습니다.
  - 특정 주소 (예: '1600 Pennsylvania Ave')
  - 문자열 (예: '잉글랜드'), 대문자 ISO-3166 코드 또는 영문자로 된 국가 이름 (예: 'GB' 또는 '영국')
  - 대문자 ISO-3166-2 지역 코드명 또는 영문 텍스트로 된 코드명 (예: 'US-NJ' 또는 'New Jersey') 참고: dataMode 옵션이 'regions'로 설정된 경우에만 리전을 지정할 수 있습니다.
  - 권역의 지역 번호. 이는 다양한 지역을 지정하는 데 사용되는 세 자리 대도시 코드입니다. 미국 코드만 지원됩니다. 이 번호는 전화 지역 번호와 같지 않습니다.
2. [숫자, 선택사항] 사용자가 이 지역 위로 마우스를 가져가면 표시되는 숫자 값입니다. 3열이 사용되는 경우 이 열은 필수입니다.
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 형식) 또는 다음 문자열 중 하나일 수 있습니다. `world` - (전 세계) `us_metro` - (미국, 대도시 지역) `005` - (남미) `013` - (중앙 아메리카) `021` - (북미) `002` - (아프리카 전체) `017` - (중앙아프리카) `015` - (북아프리카) `018` - (남아프리카 공화국) `030` - (동아시아) `034` - (남아시아) `035` - (아시아/태평양 지역) `009` - (오세아니아) `145` - (중동) `143` - (중앙아시아) `151` - (북아시아) `154` - (북유럽) `155` - (서유럽) `039` - (남유럽) Geomap은 스크롤 또는 드래그 동작을 지원하지 않으며 제한된 확대/축소 동작만 지원합니다. 기본 축소는 `showZoomOut` 속성을 설정하여 사용 설정할 수 있습니다.
`dataMode`	문자열	'지역'	지도에 값을 표시하는 방법 두 가지 값이 지원됩니다. `regions` - 전체 영역에 적절한 색을 지정합니다. 이 옵션은 위도/경도 주소와 함께 사용할 수 없습니다. 지역 예를 참고하세요. `markers` - 지역 위에 점을 표시하고 색상과 크기로 값을 나타냅니다. 마커 예를 참고하세요.
`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`	사용자가 할당된 값이 있는 지역을 클릭하면 실행됩니다. 무엇이 선택되었는지 알아보려면 `getSelection()`를 호출하세요. `dataMode` 옵션이 '리전'으로 설정된 경우에만 사용할 수 있습니다. 참고: 브라우저에서 파일(예:`select` 서버 (예: "http://www").	없음
`regionClick`	지역을 클릭하면 호출됩니다. '지역' 및 '마커' `dataMode` 모두에서 작동합니다. 하지만 마커 모드에서는 '지역' 옵션에 할당된 특정 국가에 대해 이 문제가 발생하지 않습니다 (특정 국가가 나열되어 있는 경우). 참고: 브라우저에서 파일 (예:`regionClick` 서버 (예: "http://www").	클릭된 지역을 설명하는 ISO-3166 형식의 문자열로, 단일 속성 `region`를 포함하는 객체입니다.
`zoomOut`	축소 버튼을 클릭할 때 호출됩니다. 확대/축소를 처리하려면 이 이벤트를 포착하고 `region` 옵션을 변경합니다. 참고: 브라우저에서 파일(예:`zoomOut` 서버 (예: "http://www").	없음
`drawingDone`	Geomap 그리기가 완료되면 호출됩니다.	없음

데이터 정책

위치는 Google 지도에서 지오코딩됩니다. 지오코딩이 필요하지 않은 데이터는 어떠한 서버로도 전송되지 않습니다. 데이터 정책에 대한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.

참고사항

Flash 보안 설정으로 인해 웹 서버 URL(예: http://www.myhost.com/myviz.html)이 아니라 브라우저의 파일 위치(예: file:///c:/webhost/myhost/myviz.html)에서 액세스하면 이 및 모든 Flash 기반 시각화가 제대로 작동하지 않을 수 있습니다. 이 오류는 일반적으로 테스트 문제일 뿐입니다. Macromedia 웹사이트에 설명된 대로 이 문제를 해결할 수 있습니다.

시각화: Geomap 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.

개요

예