개요
Google 지도 차트에는 Google 지도 API를 사용하여 지도가 표시됩니다. 데이터 값이 지도에 마커로 표시됩니다. 데이터 값은 좌표 (위도 쌍) 또는 주소일 수 있습니다. 지도는 식별된 모든 지점을 포함하도록 조정됩니다.
지도를 위성 이미지가 아닌 선 그림으로 나타내려면 지역 차트를 사용하세요.
이름이 지정된 위치
인구별로 상위 10개 국가의 지도 아래에 표시된 것처럼 마커를 표시할 장소를 식별할 수 있습니다.
사용자가 마커 중 하나를 선택하면 showInfoWindow 옵션을 사용했으므로
국가와 인구가 포함된 도움말이
표시됩니다. 또한 사용자가 잠시 마커 위에 마우스를 가져가면 '제목' 팁에 동일한 정보가 함께 표시됩니다. showTooltip 옵션을 사용했기 때문입니다.
다음은 전체 HTML입니다.
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script>
google.charts.load('current', {
'packages': ['map'],
// 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', 'Population'],
['China', 'China: 1,363,800,000'],
['India', 'India: 1,242,620,000'],
['US', 'US: 317,842,000'],
['Indonesia', 'Indonesia: 247,424,598'],
['Brazil', 'Brazil: 201,032,714'],
['Pakistan', 'Pakistan: 186,134,000'],
['Nigeria', 'Nigeria: 173,615,000'],
['Bangladesh', 'Bangladesh: 152,518,015'],
['Russia', 'Russia: 146,019,512'],
['Japan', 'Japan: 127,120,000']
]);
var options = {
showTooltip: true,
showInfoWindow: true
};
var map = new google.visualization.Map(document.getElementById('chart_div'));
map.draw(data, options);
};
</script>
</head>
<body>
<div id="chart_div"></div>
</body>
</html>
지오코딩된 위치
위도와 경도로 위치를 지정할 수도 있습니다. 이 경우 이름이 지정된 위치보다 빠르게 로드됩니다.
위 차트는 위도 및 경도로 4개의 위치를 식별합니다.
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, {
showTooltip: true,
showInfoWindow: true
});
}
</script>
</head>
<body>
<div id="map_div" style="width: 400px; height: 300px"></div>
</body>
</html>
마커 맞춤설정
웹상의 다른 곳에 있는 마커 도형을 사용할 수 있습니다. 다음은 iconarchive.com의 파란색 핀을 사용하는 예입니다.
위 차트에서 핀을 선택하면 기울어집니다. PNG, GIF, JPG가 지원됩니다.
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load("current", {
"packages":["map"],
// 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(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Lat', 'Long', 'Name'],
[37.4232, -122.0853, 'Work'],
[37.4289, -122.1697, 'University'],
[37.6153, -122.3900, 'Airport'],
[37.4422, -122.1731, 'Shopping']
]);
var options = {
icons: {
default: {
normal: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Azure-icon.png',
selected: 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/Map-Marker-Ball-Right-Azure-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_markers_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_markers_div" style="width: 400px; height: 300px"></div>
</body>
</html>
여러 마커 세트 추가하기
기본 마커 세트를 만드는 것 외에도 여러 마커 집합을 만들 수도 있습니다.
추가 마커 집합을 만들려면 icons 옵션에 ID를 추가하고
마커 이미지를 설정합니다. 그런 다음 데이터 표에 열을 추가하고 데이터 표의 각 행에 사용할 마커 세트의 ID를 설정합니다. 'default' 또는 null를 사용하여 기본 마커를 사용할 수도 있습니다.
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addColumn('string', 'Marker')
data.addRows([
['New York City NY, United States', 'New York', 'blue' ],
['Scranton PA, United States', 'Scranton', 'green'],
['Washington DC, United States', 'Washington', 'pink' ],
['Philadelphia PA, United States', 'Philly', 'green'],
['Pittsburgh PA, United States', 'Pittsburgh', 'green'],
['Buffalo NY, United States', 'Buffalo', 'blue' ],
['Baltimore MD, United States', 'Baltimore', 'pink' ],
['Albany NY, United States', 'Albany', 'blue' ],
['Allentown PA, United States', 'Allentown', 'green']
]);
var url = 'https://icons.iconarchive.com/icons/icons-land/vista-map-markers/48/';
var options = {
zoomLevel: 6,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
icons: {
blue: {
normal: url + 'Map-Marker-Ball-Azure-icon.png',
selected: url + 'Map-Marker-Ball-Right-Azure-icon.png'
},
green: {
normal: url + 'Map-Marker-Push-Pin-1-Chartreuse-icon.png',
selected: url + 'Map-Marker-Push-Pin-1-Right-Chartreuse-icon.png'
},
pink: {
normal: url + 'Map-Marker-Ball-Pink-icon.png',
selected: url + 'Map-Marker-Ball-Right-Pink-icon.png'
}
}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
지도 스타일 지정
지도 시각화에는 맞춤 스타일을 설정할 수 있는 기능이 포함되어 있으므로 하나 또는 여러 개의 맞춤 지도 유형을 만들 수 있습니다.
지도 스타일 객체를 만들고 지도 옵션의 식별자(mapTypeId) 아래에 배치하여 맞춤 지도 유형을 정의할 수 있습니다. 예를 들면 다음과 같습니다.
var options = {
maps: {
<map style ID>: <map style object>
}
};
나중에 이 맞춤 지도 유형을 할당한 지도 스타일 ID로 참조할 수 있습니다.
지도 스타일 객체에는 지도 유형 컨트롤의 표시 이름인 name (mapTypeId와 일치하지 않아도 됨)와 스타일을 지정하려는 각 요소의 스타일 객체가 포함된 styles 배열이 포함됩니다. Google 지도 API 참조에는 맞춤 지도 유형을 만들 수 있는 다양한 요소, 지형지물 및 스타일 유형 목록이 포함되어 있습니다.
참고: 맞춤 mapTypeId는 maps 옵션 아래에 있어야 합니다.
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
<html>
<head>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {
'packages': ['map'],
// 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 = new google.visualization.DataTable();
data.addColumn('string', 'Address');
data.addColumn('string', 'Location');
data.addRows([
['Lake Buena Vista, FL 32830, United States', 'Walt Disney World'],
['6000 Universal Boulevard, Orlando, FL 32819, United States', 'Universal Studios'],
['7007 Sea World Drive, Orlando, FL 32821, United States', 'Seaworld Orlando' ]
]);
var options = {
mapType: 'styledMap',
zoomLevel: 12,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
maps: {
// Your custom mapTypeId holding custom map styles.
styledMap: {
name: 'Styled Map', // This name will be displayed in the map type control.
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]
},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]
},
{featureType: 'road.highway',
elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]
},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10}, {lightness: -22}]
}
]}}
};
var map = new google.visualization.Map(document.getElementById('map_div'));
map.draw(data, options);
}
</script>
</head>
<body>
<div id="map_div" style="height: 500px; width: 900px"></div>
</body>
</html>
맞춤 지도 유형을 만드는 것 외에도 mapTypeIds 옵션을 사용하여 사용자가 지도 유형 컨트롤에서 볼 수 있는 지도를 지정할 수도 있습니다. 기본적으로 맞춤 지도 유형을 포함한 모든 지도 유형이 지도 유형 컨트롤에 표시됩니다. mapTypeIds 옵션은 사용자가 볼 수 있도록 하려는 지도 유형의 문자열 배열을 허용합니다. 이러한 문자열은 기본 지도 스타일에 대해 사전 정의된 이름 (예: 일반, 위성, 지형, 하이브리드) 또는 정의한 맞춤 지도 유형의 지도 스타일 ID를 참조해야 합니다. mapTypeIds 옵션을 설정하면 이 배열에서 지정한 지도 유형만 지도에서 사용할 수 있습니다.
mapType 옵션과 함께 사용하여 지도 스타일을 기본값으로 설정할 수 있지만
mapTypeIds 배열에 포함하지는 않습니다. 그러면 지도가 초기 로드 시에만 표시됩니다.
var options = {
mapType: 'styledMap',
zoomLevel: 7,
showTooltip: true,
showInfoWindow: true,
useMapTypeControl: true,
// User will only be able to view/select custom styled maps.
mapTypeIds: ['styledMap', 'redEverything', 'imBlue'],
maps: {
styledMap: {
name: 'Styled Map',
styles: [
{featureType: 'poi.attraction',
stylers: [{color: '#fce8b2'}]},
{featureType: 'road.highway',
stylers: [{hue: '#0277bd'}, {saturation: -50}]},
{featureType: 'road.highway', elementType: 'labels.icon',
stylers: [{hue: '#000'}, {saturation: 100}, {lightness: 50}]},
{featureType: 'landscape',
stylers: [{hue: '#259b24'}, {saturation: 10},{lightness: -22}]}
]},
redEverything: {
name: 'Redden All The Things',
styles: [
{featureType: 'landscape',
stylers: [{color: '#fde0dd'}]},
{featureType: 'road.highway',
stylers: [{color: '#67000d'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#ff0000'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#67000d'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#ff0000'}, {saturation: 50}, {lightness: -50}]}
]},
imBlue: {
name: 'All Your Blues are Belong to Us',
styles: [
{featureType: 'landscape',
stylers: [{color: '#c5cae9'}]},
{featureType: 'road.highway',
stylers: [{color: '#023858'}]},
{featureType: 'road.highway', elementType: 'labels',
stylers: [{visibility: 'off'}]},
{featureType: 'poi',
stylers: [{hue: '#0000ff'}, {saturation: 50}, {lightness: 0}]},
{featureType: 'water',
stylers: [{color: '#0288d1'}]},
{featureType: 'transit.station.airport',
stylers: [{color: '#0000ff'}, {saturation: 50}, {lightness: -50}]}
]}
}
};
로드 중
google.charts.load 패키지 이름은 "map"입니다.
사용자의 지도 데이터 서비스가 축소되지 않도록 하려면 여기에 사용된 예시를 복사하기보다는 프로젝트에 자체 mapsApiKey를 사용해야 합니다. 자세한 내용은 로드 설정을 참조하세요.
google.charts.load("current", {
"packages":["map"],
// 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.visualization.Map입니다.
축약된 이름 Map는 자바스크립트 Map 클래스와 충돌하므로 ChartWrapper는 chartType: 'Map'를 지정할 때 이 패키지를 자동으로 로드하지 않습니다. 대신 chartType: 'google.visualization.Map'를 지정할 수 있습니다.
var visualization = new google.visualization.Map(container);
데이터 형식
다음과 같은 두 가지 대체 데이터 형식이 지원됩니다.
- 위도-경도 쌍 - 처음 두 열은 각각 위도와 경도를 지정하는 숫자여야 합니다. 선택사항인 세 번째 열에는 처음 두 열에 지정된 위치를 설명하는 문자열이 포함됩니다.
- 문자열 주소 - 첫 번째 열은 주소가 포함된 문자열이어야 합니다. 이 주소는 최대한 완전해야 합니다. 선택사항인 두 번째 열에는 첫 번째 열의 위치를 설명하는 문자열이 포함됩니다. 특히 10개가 넘는 주소가 있는 경우 문자열 주소가 더 느리게 로드됩니다.
참고: 위도-경도 쌍 옵션은 특히 대용량 데이터의 경우 지도를 훨씬 더 빠르게 로드합니다. 대규모 데이터 세트에 이 옵션을 사용하는 것이 좋습니다. Google 지도 API에서 주소를 경도가 높은 지점으로 변환하는 방법을 알아보세요. 맵에는 최대 400개의 항목이 표시될 수 있습니다. 데이터의 행이 400개를 초과하면 처음 400개만 표시됩니다.
구성 옵션
| 이름 | |
|---|---|
| ScrollWheel 사용 설정 |
true로 설정하면 마우스 스크롤 휠을 사용하여 확대 및 축소를 사용 설정합니다. 유형: 부울
기본값: false
|
| 아이콘 |
맞춤 마커 세트를 보관합니다. 각 마커 집합은 var options = {
icons: {
default: {
normal: '/path/to/marker/image',
selected: '/path/to/marker/image'
},
customMarker: {
normal: '/path/to/other/marker/image',
selected: '/path/to/other/marker/image'
}
}
};
유형: 객체
기본값: null
|
| 선 색상 |
ShowLine이 true인 경우 선 색상을 정의합니다. 예: '#800000'. 유형: 문자열
기본값: 기본 색상
|
| 선 너비 |
ShowLine이 true인 경우 선 너비 (픽셀)를 정의합니다. 유형: 숫자
기본값: 10
|
| maps.<mapTypeId> |
맞춤 지도 유형의 속성이 포함된 객체입니다. 이 맞춤 지도 유형은 맞춤 지도 유형으로 지정한
유형: 객체
기본값: null
|
| maps.<mapTypeId>.name |
유형: 문자열
기본값: null
|
| maps.<mapTypeId>.styles |
맞춤 지도 유형의 다양한 요소에 대한 스타일 객체를 보유합니다.
각 스타일 객체에는 1~3개의 속성( {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
다양한 기능, 요소, 스타일러에 대한 자세한 내용은 지도 문서를 참고하세요. 유형: 배열
기본값: null
|
| mapType |
표시할 지도 유형입니다. 가능한 값은 'normal', 'terrain', 'satellite', 'hybrid' 또는 맞춤 지도 유형의 ID입니다(만든 경우). 유형: 문자열
기본값: '하이브리드'
|
| 지도 유형 ID |
지도 유형 컨트롤( 유형: 배열
기본값: null
|
| ShowInfoWindow |
true로 설정하면 사용자가 지점 마커를 선택할 때 별도의 창에 위치 설명이 표시됩니다. 이 옵션은 버전 45까지 유형: 부울
기본값: false
|
| 쇼라인 |
true로 설정하면 모든 점을 통해 Google 지도 다중선이 표시됩니다. 유형: 부울
기본값: false
|
| 도움말 보기 |
true로 설정하면 마우스가 점 마커 위에 위치할 때 위치 설명이 도움말로 표시됩니다. 이 옵션은 버전 45까지 유형: 부울
기본값: false
|
| 지도 컨트롤 사용 |
뷰어가 [지도, 위성, 하이브리드, 지형] 간에 전환할 수 있는 지도 유형 선택기를 표시합니다. useMapTypeControl이 false (기본값)인 경우 선택기가 표시되지 않고 유형은 mapType 옵션에 따라 결정됩니다. 유형: 부울
기본값: false
|
| zoomLevel |
지도의 초기 확대/축소 수준을 나타내는 정수로, 여기서 0은 완전히 축소(전 세계)이고 19는 최대 확대/축소 수준입니다. Google 지도 API의 '확대/축소 수준'을 참고하세요. 유형: 숫자
기본값: 자동
|
방법
| 메서드 | |
|---|---|
draw(data, options) |
지도를 그립니다. 반환 유형: 없음
|
getSelection() |
표준 반환 유형: 선택 요소의 배열
|
setSelection(selection) |
표준 반환 유형: 없음
|
이벤트
| 이름 | |
|---|---|
error |
차트를 렌더링하려고 할 때 오류가 발생하면 실행됩니다. 속성: ID, 메시지
|
select |
표준 선택 이벤트 속성: 없음
|
데이터 정책
지도는 Google 지도에 표시됩니다. 데이터 정책에 대한 자세한 내용은 Google 지도 서비스 약관을 참고하세요.