Обзор
Google Map Chart отображает карту с использованием Google Maps API . Значения данных отображаются в виде маркеров на карте. Значения данных могут быть координатами (пары широта-долгота) или адресами. Карта будет масштабирована таким образом, чтобы она включала все идентифицированные точки.
Если вы хотите, чтобы ваши карты представляли собой линейные рисунки, а не спутниковые изображения, используйте вместо них геокарты .
Именованные локации
Вы можете определить места для размещения маркеров по названию, как показано ниже на этой карте десяти стран с наибольшим населением.
Когда пользователь выбирает один из маркеров, отображается всплывающая подсказка с названием и населением страны, потому что мы использовали опцию 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>
Геокодированные местоположения
Вы также можете указать местоположения по широте и долготе, которые загружаются быстрее, чем именованные местоположения:
На приведенной выше диаграмме указаны четыре местоположения по широте и долготе.
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 и установите изображения маркеров. Затем добавьте столбец в таблицу данных и установите идентификатор набора маркеров, который вы хотите использовать для каждой строки в таблице данных (вы также можете использовать '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>
}
};
Позднее вы сможете ссылаться на этот пользовательский тип карты по присвоенному ему идентификатору стиля карты.
Ваш объект стиля карты содержит name , которое будет отображаемым именем в элементе управления типа карты (оно не обязательно должно совпадать с его mapTypeId ), и массив styles , который будет содержать объекты стилей для каждого элемента, который вы хотите стилизовать. Справочник по API Карт Google содержит список различных типов элементов, функций и стилей, с помощью которых можно создать собственный тип карты.
Примечание. Ваш пользовательский 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 принимает массив строк типов карт, которые вы хотите разрешить пользователю просматривать. Эти строки должны относиться либо к предопределенным именам для стилей карты по умолчанию (т. е. обычный, спутниковый, ландшафтный, гибридный), либо к идентификатору стиля карты определенного вами пользовательского типа карты. Установив параметр 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 JavaScript, ChartWrapper не будет автоматически загружать этот пакет, если вы укажете chartType: 'Map' . Но вы можете вместо этого указать chartType: 'google.visualization.Map' .
var visualization = new google.visualization.Map(container);
Формат данных
Поддерживаются два альтернативных формата данных:
- Пары широта-долгота. Первые два столбца должны быть числами, обозначающими широту и долготу соответственно. Необязательный третий столбец содержит строку, описывающую местоположение, указанное в первых двух столбцах.
- Строковый адрес . Первый столбец должен быть строкой, содержащей адрес. Этот адрес должен быть максимально полным. Необязательный второй столбец содержит строку, описывающую расположение в первом столбце. Строковые адреса загружаются медленнее, особенно если у вас более 10 адресов.
Примечание. Параметр «Пары широта-долгота» загружает карты намного быстрее, особенно с большими данными. Мы рекомендуем использовать этот параметр для больших наборов данных. Посетите Google Maps API , чтобы узнать, как преобразовать ваши адреса в точки долготы. Карта может отображать максимум 400 записей; если ваши данные содержат более 400 строк, будут показаны только первые 400.
Параметры конфигурации
| Имя | |
|---|---|
| включитьScrollWheel | Если установлено значение true, позволяет увеличивать и уменьшать масштаб с помощью колеса прокрутки мыши. Тип: логический По умолчанию: ложь |
| иконки | Содержит набор(ы) пользовательских маркеров. Каждый набор маркеров может указывать 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'
}
}
}; Тип: объект По умолчанию: ноль |
| линияЦвет | Если showLine имеет значение true, определяет цвет линии. Например: «#800000». Тип: строка По умолчанию: цвет по умолчанию |
| ширина линии | Если showLine имеет значение true, определяет ширину линии (в пикселях). Тип: номер По умолчанию: 10 |
| карты.<mapTypeId> | Объект, содержащий свойства пользовательского типа карты. Доступ к этому пользовательскому типу карты будет осуществляться с помощью
Тип: объект По умолчанию: ноль |
| карты.<mapTypeId>.name | Имя карты, которое будет отображаться в элементе управления картой, если Тип: строка По умолчанию: ноль |
| карты.<mapTypeId>.styles | Содержит объекты стиля для различных элементов пользовательского типа карты. Каждый объект стиля может содержать от 1 до 3 свойств: {
featureType: 'roadway.highway',
elementType: 'labels.text.fill',
stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}Дополнительную информацию о различных функциях, элементах и стилях см. в документации по Картам . Тип: массив По умолчанию: ноль |
| тип карты | Тип отображаемой карты. Возможные значения: «нормальный», «территория», «спутник», «гибрид» или идентификатор пользовательского типа карты, если таковые были созданы. Тип: строка По умолчанию: «гибрид» |
| mapTypeIds | При использовании элемента управления типа карты ( Тип: массив По умолчанию: ноль |
| показатьинформационное окно | Если установлено значение true, показывает описание местоположения в отдельном окне, когда пользователь выбирает точечный маркер. До версии 45 эта опция называлась Тип: логический По умолчанию: ложь |
| показатьЛайн | Если установлено значение true, показывает полилинию Google Maps через все точки. Тип: логический По умолчанию: ложь |
| показатьПодсказка | Если установлено значение true, описание местоположения отображается в виде всплывающей подсказки, когда указатель мыши находится над маркером точки. До версии 45 этот параметр назывался Тип: логический По умолчанию: ложь |
| использованиеMapTypeControl | Показать селектор типа карты, который позволяет зрителю переключаться между [картой, спутником, гибридом, местностью]. Когда useMapTypeControl имеет значение false (по умолчанию), селектор не представлен, а тип определяется параметром mapType. Тип: логический По умолчанию: ложь |
| уровень масштабирования | Целое число, указывающее начальный уровень масштабирования карты, где 0 означает полное уменьшение масштаба (весь мир), а 19 — максимальный уровень масштабирования. (См. «Уровни масштабирования» в Google Maps API .) Тип: номер По умолчанию: автоматически |
Методы
| Метод | |
|---|---|
draw(data, options) | Рисует карту. Тип возврата: нет |
getSelection() | Стандартная Тип возвращаемого значения: Массив элементов выбора |
setSelection(selection) | Стандартная Тип возврата: нет |
События
| Имя | |
|---|---|
error | Запускается, когда возникает ошибка при попытке отобразить диаграмму. Свойства: идентификатор, сообщение |
select | Стандартное событие выбора Свойства: Нет |
Политика данных
Карта отображается Google Maps. Дополнительную информацию о политике в отношении данных см. в Условиях использования Google Maps .