Визуализация: Карта

  1. Обзор
  2. Именованные локации
  3. Геокодированные местоположения
  4. Настройка маркеров
  5. Добавление нескольких наборов маркеров
  6. Стилизация карт
  7. Загрузка
  8. Формат данных
  9. Параметры конфигурации
  10. Методы
  11. События
  12. Политика данных

Обзор

Карта Google Map Chart отображает карту с использованием API Google Maps . Значения данных отображаются в виде маркеров на карте. Значениями данных могут быть координаты (пары широты и долготы) или адреса. Карта будет масштабирована таким образом, чтобы включать в себя все выявленные точки.

Если вы хотите, чтобы ваши карты представляли собой штриховые рисунки, а не спутниковые снимки, используйте вместо этого геодиаграмму .

Именованные локации

Вы можете определить места для размещения маркеров по названиям, как показано ниже на этой карте десяти стран с наибольшим населением.

Когда пользователь выбирает один из маркеров, отображается всплывающая подсказка с названием и населением страны, поскольку мы использовали опцию 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
<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
<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
<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
<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 конфликтует с классом JavaScript Map , ChartWrapper не будет автоматически загружать этот пакет, когда вы указываетеchartType chartType: 'Map' . Но вместо этого вы можете указатьchartType chartType: 'google.visualization.Map' .

  var visualization = new google.visualization.Map(container);

Формат данных

Поддерживаются два альтернативных формата данных:

  1. Пары широта-долгота . Первые два столбца должны быть числами, обозначающими широту и долготу соответственно. Необязательный третий столбец содержит строку, описывающую местоположение, указанное в первых двух столбцах.
  2. Строковый адрес . Первый столбец должен представлять собой строку, содержащую адрес. Этот адрес должен быть максимально полным. Необязательный второй столбец содержит строку, описывающую местоположение в первом столбце. Строковые адреса загружаются медленнее, особенно если у вас более 10 адресов.

Примечание. Параметр «Пары широты и долготы» загружает карты намного быстрее, особенно с большими данными. Мы рекомендуем использовать эту опцию для больших наборов данных. Посетите API Карт Google , чтобы узнать, как преобразовать ваши адреса в точки широты. На карте может отображаться максимум 400 записей; если ваши данные содержат более 400 строк, будут показаны только первые 400.

Параметры конфигурации

Имя
включитьScrollWheel

Если установлено значение true, позволяет увеличивать и уменьшать масштаб с помощью колеса прокрутки мыши.

Тип: логический
По умолчанию: ложь
значки

Содержит набор пользовательских маркеров. Каждый набор маркеров может указывать normal и selected изображение маркера. Можно установить набор по умолчанию, задав параметр default , или пользовательские наборы маркеров, задав уникальный идентификатор маркера.

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 , указанному для настраиваемого типа карты. Для каждого созданного типа пользовательской карты необходимо указать новый mapTypeId . Каждый тип пользовательской карты должен содержать два свойства:

  • name: отображаемое имя для стилизованного типа карты.
  • Стили: массив, содержащий объекты стилей для стилизованного типа карты.
Тип: объект
По умолчанию: ноль
карты.<mapTypeId>.name

Имя карты, которая будет отображаться в элементе управления картой, если для useMapTypeControl установлено значение true .

Тип: строка
По умолчанию: ноль
карты.<mapTypeId>.styles

Содержит объекты стиля для различных элементов пользовательского типа карты.

Каждый объект стиля может содержать от 1 до 3 свойств: featureType , elementType и stylers . Если featureType и elementType опущены, стили будут применены ко всем объектам/элементам карты.

{
  featureType: 'roadway.highway',
  elementType: 'labels.text.fill',
  stylers: [{hue: '#ff0000}, {saturation: 50}, {lightness: 100}]
}

Дополнительную информацию о различных функциях, элементах и ​​стилях см. в документации по Картам .

Тип: массив
По умолчанию: ноль
тип карты

Тип отображаемой карты. Возможные значения: «обычный», «рельеф», «спутник», «гибрид» или идентификатор пользовательского типа карты, если таковой был создан.

Тип: строка
По умолчанию: «гибрид»
идентификаторы типа карты

При использовании элемента управления типом карты ( useMapTypeControl: true ) идентификаторы, указанные в этом массиве, будут единственными типами карт, отображаемыми в элементе управления типом карты. Если этот параметр не установлен, для управления типом карты по умолчанию будут использоваться стандартные параметры управления типами карт Google Maps, а также любые пользовательские типы карт, которые могут быть доступны.

Тип: массив
По умолчанию: ноль
шоуинформационное окно

Если установлено значение true, описание местоположения отображается в отдельном окне, когда пользователь выбирает маркер точки. До версии 45 эта опция называлась showTip Также см. showTooltip

Тип: логический
По умолчанию: ложь
шоуЛайн

Если установлено значение true, отображается ломаная линия Карт Google, проходящая через все точки.

Тип: логический
По умолчанию: ложь
показатьПодсказка

Если установлено значение true, описание местоположения отображается в виде всплывающей подсказки, когда мышь находится над маркером точки. До версии 45 этот параметр назывался showTip Обратите внимание, что в настоящее время HTML не поддерживается, поэтому во всплывающей подсказке будут отображаться необработанные HTML-теги.

Тип: логический
По умолчанию: ложь
использоватьMapTypeControl

Покажите переключатель типа карты, который позволяет зрителю переключаться между [карта, спутник, гибрид, местность]. Если useMapTypeControl имеет значение false (по умолчанию), селектор не отображается, а тип определяется параметром mapType.

Тип: логический
По умолчанию: ложь
масштабированиеУровень

Целое число, указывающее начальный уровень масштабирования карты, где 0 — полное уменьшение масштаба (весь мир), а 19 — максимальный уровень масштабирования. (См. «Уровни масштабирования» в API Карт Google .)

Тип: номер
По умолчанию: автоматический

Методы

Метод
draw(data, options)

Рисует карту.

Тип возврата: нет
getSelection()

Стандартная реализация getSelection() . Все элементы выбора являются элементами строки. Может возвращать более одной выбранной строки.

Тип возвращаемого значения: Массив элементов выбора.
setSelection(selection)

Стандартная реализация setSelection() . Рассматривает каждую запись выбора как выбор строки. Поддерживает выбор нескольких строк.

Тип возврата: нет

События

Имя
error

Вызывается, когда возникает ошибка при попытке отобразить диаграмму.

Свойства: идентификатор, сообщение
select

Стандартное событие выбора

Свойства: Нет

Политика данных

Карта отображается с помощью Google Maps. Дополнительную информацию о политике использования данных можно найти в Условиях использования Карт Google .