Tổng quan
Biểu đồ của Google Maps hiển thị bản đồ bằng cách sử dụng Google Maps API. Giá trị dữ liệu được hiển thị dưới dạng điểm đánh dấu trên bản đồ. Giá trị dữ liệu có thể là toạ độ (cặp dài) hoặc địa chỉ. Bản đồ sẽ được điều chỉnh theo tỷ lệ để bao gồm tất cả các điểm được xác định.
Nếu bạn muốn bản đồ của mình là bản vẽ đường kẻ thay vì hình ảnh vệ tinh, hãy sử dụng biểu đồ địa lý.
Địa điểm được đặt tên
Bạn có thể xác định các địa điểm cần đặt điểm đánh dấu theo tên, như minh họa dưới đây trong bản đồ về 10 quốc gia hàng đầu theo dân số.
Khi người dùng chọn một trong các điểm đánh dấu, chú giải công cụ có tên và dân số của quốc gia sẽ được hiển thị vì chúng tôi đã sử dụng tùy chọn showInfoWindow. Ngoài ra, khi người dùng di chuột qua một trong các điểm đánh dấu trong một thời gian ngắn, mẹo 'tiêu đề' sẽ hiển thị cùng với thông tin đó, vì chúng tôi đã sử dụng tùy chọn showTooltip.
Sau đây là HTML đầy đủ:
<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>
Vị trí được mã hóa địa lý
Bạn cũng có thể chỉ định vị trí theo vĩ độ và kinh độ, tốc độ tải nhanh hơn so với vị trí được đặt tên:
Biểu đồ trên cho thấy 4 vị trí theo vĩ độ và kinh độ.
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>
Tuỳ chỉnh điểm đánh dấu
Bạn có thể sử dụng các hình dạng điểm đánh dấu nằm ở nơi khác trên web. Dưới đây là ví dụ về cách sử dụng ghim màu xanh dương trên iconrepository.com:
Nếu bạn chọn các ghim trong biểu đồ trên, thì các ghim sẽ nằm nghiêng. Có hỗ trợ PNG, GIF và 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>
Thêm nhiều bộ đánh dấu
Ngoài việc tạo một tập hợp các điểm đánh dấu mặc định, bạn cũng có thể tạo nhiều tập hợp các điểm đánh dấu.
Để tạo một tập hợp điểm đánh dấu bổ sung, hãy thêm mã nhận dạng vào tuỳ chọn icons và đặt
hình ảnh điểm đánh dấu của bạn. Sau đó, hãy thêm một cột vào Bảng dữ liệu của bạn và đặt mã của tập hợp điểm đánh dấu mà bạn muốn
sử dụng cho mỗi hàng trong Bảng dữ liệu (bạn cũng có thể sử dụng 'default' hoặc
null để sử dụng các điểm đánh dấu mặc định).
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>
Tạo kiểu cho bản đồ
Hình ảnh bản đồ đi kèm với khả năng đặt kiểu tùy chỉnh, cho phép bạn tạo một hoặc nhiều loại bản đồ tùy chỉnh.
Bạn có thể xác định loại bản đồ tùy chỉnh bằng cách tạo đối tượng kiểu bản đồ và đặt đối tượng đó dưới giá trị nhận dạng (mapTypeId) trong tùy chọn bản đồ. Ví dụ:
var options = {
maps: {
<map style ID>: <map style object>
}
};
Sau đó, bạn có thể tham khảo loại bản đồ tùy chỉnh này theo mã kiểu bản đồ mà bạn đã chỉ định cho loại bản đồ đó.
Đối tượng kiểu bản đồ của bạn chứa name, sẽ là tên hiển thị trong thành phần điều khiển loại bản đồ (không cần phải khớp với mapTypeId) và một mảng styles chứa các đối tượng kiểu cho mỗi phần tử mà bạn muốn tạo kiểu. Tài liệu tham khảo API Google Maps chứa danh sách các phần tử, đối tượng và kiểu khác nhau mà bạn có thể tạo loại bản đồ tùy chỉnh.
Lưu ý: Bạn phải đặt mapTypeId tuỳ chỉnh trong
tùy chọn 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>
Ngoài việc tạo các loại bản đồ tùy chỉnh, bạn cũng có thể chỉ định bản đồ nào người dùng có thể xem trong tùy chọn kiểm soát loại bản đồ bằng tùy chọn mapTypeIds. Theo mặc định, tất cả các loại bản đồ,
bao gồm cả các loại bản đồ tùy chỉnh của bạn, sẽ xuất hiện trong tùy chọn kiểm soát loại bản đồ. Tùy chọn
mapTypeIds chấp nhận một loạt chuỗi các loại bản đồ mà bạn muốn cho phép người dùng xem. Các chuỗi này phải tham chiếu đến tên được xác định trước cho các kiểu bản đồ mặc định (tức là bình thường, vệ tinh, địa hình, kết hợp) hoặc mã kiểu bản đồ của một loại bản đồ tùy chỉnh mà bạn đã xác định. Bằng cách đặt tùy chọn mapTypeIds, bản đồ của bạn sẽ chỉ cung cấp những loại bản đồ
mà bạn chỉ định trong mảng này.
Bạn cũng có thể sử dụng tính năng này cùng với tùy chọn mapType để đặt kiểu bản đồ làm mặc định, nhưng không đưa kiểu này vào mảng mapTypeIds. Điều này sẽ khiến bản đồ đó chỉ hiển thị trong lần tải đầu tiên.
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}]}
]}
}
};
Đang tải
Tên gói google.charts.load là "map".
Xin lưu ý rằng bạn sẽ cần lấy mapsApiKey của riêng mình cho dự án thay vì chỉ sao chép dịch vụ được sử dụng trong các ví dụ ở đây để tránh gây gián đoạn dịch vụ dữ liệu bản đồ cho người dùng. Để biết thêm thông tin chi tiết, vui lòng xem phần Cài đặt tải.
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"
});
Tên lớp của hình ảnh trực quan là google.visualization.Map.
Vì tên rút gọn (Map) xung đột với lớp Map của JavaScript, nên ChartWrapper sẽ không tự động tải gói này khi bạn chỉ định chartType: 'Map'. Tuy nhiên, bạn có thể chỉ định chartType: 'google.visualization.Map'.
var visualization = new google.visualization.Map(container);
Định dạng dữ liệu
Hỗ trợ hai định dạng dữ liệu thay thế:
- Cặp vĩ độ dài- – Hai cột đầu tiên phải là số chỉ định vĩ độ và kinh độ tương ứng. Cột thứ ba không bắt buộc chứa một chuỗi mô tả vị trí đã chỉ định trong hai cột đầu tiên.
- Địa chỉ chuỗi – Cột đầu tiên phải là một chuỗi có chứa địa chỉ. Địa chỉ này phải đầy đủ nhất có thể. Cột thứ hai không bắt buộc chứa một chuỗi mô tả vị trí trong cột đầu tiên. Địa chỉ chuỗi tải chậm hơn, đặc biệt khi bạn có hơn 10 địa chỉ.
Lưu ý: Tùy chọn cặp Lat-Long tải bản đồ nhanh hơn nhiều, đặc biệt là với dữ liệu lớn. Bạn nên dùng tùy chọn này cho các tập dữ liệu lớn. Vui lòng truy cập Google Maps API để tìm hiểu cách chuyển đổi địa chỉ của bạn thành điểm kinh độ. Bản đồ có thể hiển thị tối đa 400 mục nhập; nếu dữ liệu của bạn có hơn 400 hàng, thì chỉ 400 hàng đầu tiên được hiển thị.
Các lựa chọn về cấu hình
| Tên | |
|---|---|
| enableScrollWheel |
Nếu bạn đặt chính sách này thành đúng, hãy bật tính năng phóng to và thu nhỏ bằng con lăn chuột. Loại: Boolean
Mặc định: sai
|
| biểu tượng |
Lưu giữ(các) tập hợp điểm đánh dấu tuỳ chỉnh. Mỗi tập hợp điểm đánh dấu có thể chỉ định một hình ảnh đánh dấu 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'
}
}
};
Loại: đối tượng
Mặc định: rỗng
|
| Màu đường kẻ |
Nếu showLine là đúng, hãy xác định màu đường kẻ. Ví dụ: "#800000". Loại: chuỗi
Mặc định: màu mặc định
|
| chiều rộng dòng |
Nếu showLine là true, hãy xác định chiều rộng dòng (tính bằng pixel). Loại: số
Mặc định: 10
|
| bản đồ.<mapTypeId> |
Đối tượng chứa các thuộc tính của một loại bản đồ tùy chỉnh.
Loại: đối tượng
Mặc định: rỗng
|
| bản đồ.<mapTypeId>.name |
Tên của bản đồ sẽ hiển thị trong phần điều khiển bản đồ nếu bạn đặt Loại: chuỗi
Mặc định: rỗng
|
| map.<mapTypeId>.styles |
Lưu giữ các đối tượng kiểu cho các thành phần khác nhau của một loại bản đồ tùy chỉnh.
Mỗi đối tượng kiểu có thể chứa từ 1 đến 3 thuộc tính: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}
Xem tài liệu về Maps để biết thêm thông tin về các tính năng, phần tử và bộ tạo kiểu. Loại: mảng
Mặc định: rỗng
|
| mapType |
Loại bản đồ để hiển thị. Các giá trị có thể là "bình thường", " địa hình", "vệ tinh", "kết hợp" hoặc mã nhận dạng của một loại bản đồ tuỳ chỉnh (nếu có). Loại: chuỗi
Mặc định: "kết hợp"
|
| mapTypeIds |
Nếu bạn sử dụng chế độ kiểm soát loại bản đồ ( Loại: mảng
Mặc định: rỗng
|
| showInfoWindow |
Nếu bạn đặt giá trị này thành true (đúng), hãy hiển thị nội dung mô tả vị trí trong một cửa sổ riêng biệt khi người dùng chọn một điểm đánh dấu điểm. Trước đây, tùy chọn này có tên là Loại: Boolean
Mặc định: sai
|
| hiển thị dòng |
Nếu đặt thành đúng (true), hãy hiển thị một đa đường của Google Maps thông qua tất cả điểm. Loại: Boolean
Mặc định: sai
|
| chú giải công cụ chương trình |
Nếu bạn đặt giá trị này thành true (đúng), thì nội dung mô tả vị trí sẽ là một chú giải công cụ khi chuột được đặt ở vị trí phía trên một điểm đánh dấu điểm. Trước đây, tùy chọn này có tên là Loại: Boolean
Mặc định: sai
|
| sử dụngMapTypeControl |
Hiển thị bộ chọn loại bản đồ để người xem có thể chuyển đổi giữa [bản đồ, vệ tinh, kết hợp, địa hình]. Khi useMapTypeControl là false (mặc định), sẽ không có bộ chọn nào được hiển thị và loại sẽ được xác định bởi tuỳ chọn mapType. Loại: Boolean
Mặc định: sai
|
| Zoomlevel |
Số nguyên cho biết mức thu phóng ban đầu của bản đồ, trong đó số 0 được thu nhỏ hoàn toàn (cả thế giới) và 19 là mức thu phóng tối đa. (Xem "Mức thu phóng" trong API Google Maps.) Loại: số
Mặc định: tự động
|
Phương thức
| Phương thức | |
|---|---|
draw(data, options) |
Vẽ bản đồ. Loại dữ liệu trả về: không có
|
getSelection() |
Triển khai
Loại dữ liệu trả về: Một mảng các phần tử lựa chọn
|
setSelection(selection) |
Triển khai
Loại dữ liệu trả về: không có
|
Sự kiện
| Tên | |
|---|---|
error |
Được kích hoạt khi xảy ra lỗi khi cố gắng hiển thị biểu đồ. Thuộc tính: mã nhận dạng, thông báo
|
select |
Sự kiện chọn chuẩn Properties: Không có
|
Chính sách dữ liệu
Bản đồ được hiển thị trong Google Maps. Vui lòng tham khảo Điều khoản dịch vụ của Google Maps để biết thêm thông tin về chính sách dữ liệu.