Создание интерактивных карт с помощью API Google Charts
Переходим по ссылке:
https://developers.google.com/chart/interactive/docs/gallery/geochart
Выбираем подходящий тип диаграммы.
Копируем html-код под выбранной диаграммой.
Вставляем скопированный код в программу блокнот (или в любую аналогичную программу, например, notepad++)
var data = google.visualization.arrayToDataTable([
['Country', 'Popularity'],
['Germany', 200],
['United States', 300],
['Brazil', 400],
['Canada', 500],
['France', 600],
['RU', 700]
]);
Редактируем в тексте массив стран. Можно использовать русские названия стран.
var data = google.visualization.arrayToDataTable([
['Страны', 'Площадь территории, млн. км. кв.'],
['Россия', 17.1],
['Канада', 10],
['Китай', 9.6],
['США', 9.5],
['Бразилия', 8.5],
['Австралия', 7.7],
['Индия', 3.3]
]);
Так, например, чтобы создать карту крупнейших по площади стран, необходимо изменить код следующим образом:
Сохраняем отредактированный документ как web-страницу. Для этого в меню «файл» выбираем пункт «сохранить как»
В появившемся диалоговом окне пишем имя файла с указанием расширения html (например, 1.html), меняем тип файла на «Все файлы» и выбираем кодировка UTF-8. Затем выбираем место сохранения и нажимаем кнопку сохранить.
Открываем полученный файл – карта готова. Важно помнить, что данная карта будет отображаться только при наличии Интерне-соединения.
Чтобы получить версию для работы в offline режиме сохраняем открытую web-страницу (сочетание клавиш Ctrl+S) в новое место или под новым именем.
Выбираем тип сохранения «Веб-страница полностью». Вместе с новым сохраненным файлом появится папка с скриптами и таблицами стилей, которые будут использоваться при отсутствии Интернет соединения.
Для вставки карты в запись блога необходимо скопировать полученный код, предварительно удалив парные теги <html></html> <head> </head> <body> </body> и вставить в режиме «html» (может быть другое названия в зависимости от CMS блога.
<div id="regions_div" style="width: 900px; height: 500px;"></div>
Размер карты можно варьировать. Для этого необходимо поменять часть кода.
width: 900px задает длину карты, равную 900 пикселей height: 500px задает высоту карты равную 500 пикселей
var options = {
colorAxis: {colors: ['#FF6A00', 'purple']},
};
При редактировании кода можно поменять некоторые настройки визуализации в разделе var options = {};
Так, например, для смены бело-зеленной схемы карты, необходимо добавить функцию colorAxis.
Цвет задается также как в HTML.
В итоге получаем следующее изображение:
var options = {
region: '142',
};
Для того чтобы отображать не карту мира а отдельного региона добавляем функцию region.
В данном случае код региона 142 обозначает Азию. Полный список регионов можно просмотреть на странице https://developers.google.com/chart/interactive/docs/gallery/geochart в разделе справочной информации.
В итоге получаем следующее изображение:
Полный список функций представлен на странице https://developers.google.com/chart/interactive/docs/gallery/geochart в разделе справочной информации.
