Все готово!

Прежде чем приступить к разработке, ознакомьтесь с документацией для разработчиков.

Активация Google Maps JavaScript API

Чтобы помочь вам освоиться, мы покажем, как выполнить некоторые необходимые действия в консоли разработчика Google:

  1. Создание или выбор проекта
  2. Активация Google Maps JavaScript API и связанных служб
  3. Создание соответствующих ключей

Слой данных

Слой данных Google Maps обеспечивает контейнер для произвольных геопространственных данных. Этот слой можно использовать для хранения собственных данных или для отображения данных GeoJSON на карте Google.

Обзор

Посмотрите этот видеоматериал DevBytes, чтобы узнать больше о слое данных.

С помощью Google Maps JavaScript API можно использовать на карте различные наложения, например, маркеры, ломаные линии, многоугольники и т. д. Каждая из этих аннотаций сочетает данные стиля с данными о местоположении. Класс google.maps.Data представляет собой контейнер произвольных геопространственных данных. Вместо добавления этих наложений можно использовать слой данных для добавления на карту произвольных географических данных. Если эти данные содержат геометрические элементы (например, точки, линии или многоугольники), API будет выполнять их прорисовку по умолчанию в виде маркеров, ломаных линий и многоугольников. Вы можете использовать стиль для этих элементов, как и для обычного наложения, или применить правила стилей, основанные на других свойствах, содержащихся в вашем наборе данных.

Класс google.maps.Data позволяет:

  • Прорисовывать многоугольники на карте.
  • Добавлять данные GeoJSON на карту.
    GeoJSON – это стандарт геопространственных данных в Интернете. Класс Data представляет данные в соответствии со структурой GeoJSON, что упрощает их отображение. Вы можете использовать метод loadGeoJson() для удобного импорта данных GeoJSON и отображения точек, ломаных линий и многоугольников.
  • Использовать google.maps.Data для моделирования произвольных данных.
    С большинством объектов окружающего мира связаны и другие свойства. Например, у магазинов есть часы работы, у дорог есть разрешенная скорость движения, а в каждом летнем лагере есть общий костер. С помощью google.maps.Data эти свойства можно моделировать и применять к данным соответствующий стиль.
  • Выбирать способ представления ваших данных и легко изменять его.
    Слой данных позволяет принимать решения относительно прорисовки объектов и взаимодействия с ними. Например, при отображении на карте магазинов можно отображать только те, где продаются билеты на общественный транспорт.

Прорисовка многоугольника

Класс Data.Polygon позволяет обрабатывать изгибы многоугольника. Ему можно передать массив из одного или нескольких линейных колец, определенных как координаты широты и долготы. Первое линейное кольцо определяет наружную границу многоугольника. Если вы передаете более одного линейного кольца, второе и последующие линейные кольца используются для определения внутренних путей (отверстий) в многоугольнике.

В следующем примере показано создание прямоугольного многоугольника, содержащего два отверстия.

// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
// This example uses the Google Maps JavaScript API's Data layer
// to create a rectangular polygon with 2 holes in it.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 6,
    center: {lat: -33.872, lng: 151.252},
  });

  // Define the LatLng coordinates for the outer path.
  var outerCoords = [
    {lat: -32.364, lng: 153.207}, // north west
    {lat: -35.364, lng: 153.207}, // south west
    {lat: -35.364, lng: 158.207}, // south east
    {lat: -32.364, lng: 158.207}  // north east
  ];

  // Define the LatLng coordinates for an inner path.
  var innerCoords1 = [
    {lat: -33.364, lng: 154.207},
    {lat: -34.364, lng: 154.207},
    {lat: -34.364, lng: 155.207},
    {lat: -33.364, lng: 155.207}
  ];

  // Define the LatLng coordinates for another inner path.
  var innerCoords2 = [
    {lat: -33.364, lng: 156.207},
    {lat: -34.364, lng: 156.207},
    {lat: -34.364, lng: 157.207},
    {lat: -33.364, lng: 157.207}
  ];

  map.data.add({geometry: new google.maps.Data.Polygon([outerCoords,
                                                        innerCoords1,
                                                        innerCoords2])})
}

Просмотр примера.

Загрузка данных GeoJSON

GeoJSON – общий стандарт для обмена геопространственными данными в Интернете. Данные передаются в компактной форме и легко интерпретируются человеком, что делает этот формат идеальным для обмена информацией и совместной работы. Слой данных позволяет добавлять данные GeoJSON на карту Google всего одной строкой кода.

map.data.loadGeoJson('google.json');

Для каждой карты существует объект map.data, выступающий в качестве слоя для хранения произвольных геопространственных данных, в том числе данных GeoJSON. Файлы GeoJSON можно загружать и отображать с помощью метода loadGeoJSON() объекта data. В примере ниже показано, как добавить карту и загрузить внешние данные GeoJSON.

var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}
<div id="map"></div>
/* Always set the map height explicitly to define the size of the div
 * element that contains the map. */
#map {
  height: 100%;
}
/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
 <!-- Replace the value of the key parameter with your own API key. -->
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk&callback=initMap">
</script>
var map;
function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: -28, lng: 137}
  });

  // NOTE: This uses cross-domain XHR, and may not work on older browsers.
  map.data.loadGeoJson(
      'https://storage.googleapis.com/mapsdevsite/json/google.json');
}

Просмотр примера.

Образец данных GeoJSON

В большинстве примеров на этой странице используется общий файл GeoJSON. В этом файле шесть символов "Google" определены в виде многоугольников над Австралией. Вы можете копировать и изменять этот файл для тестирования слоя данных.

Примечание. Чтобы загрузить файл json из другого домена, для этого домена должен быть активирован общий доступ к ресурсам из разных источников.

Полный текст файла можно просмотреть ниже, нажав небольшую стрелку рядом с надписью "google.json".

Стиль данных GeoJSON

Используйте метод Data.setStyle(), чтобы указать, как должны выглядеть ваши данные. Метод setStyle() использует литерал объекта StyleOptions или функцию, рассчитывающую стиль для каждого элемента.

Простые правила стилей

Проще всего применять стили к элементам можно посредством передачи литерала объекта StyleOptions в метод setStyle(). При этом для всех элементов в вашей коллекции будет установлен единый стиль. Следует отметить, что каждый тип элемента поддерживает прорисовку лишь части доступных параметров. Это означает, что в одном литерале объекта можно объединять стили для разных типов элементов. Например, в приведенном ниже фрагменте кода устанавливается пользовательский элемент icon, влияющий только на геометрию точек, и свойство fillColor, влияющее только на многоугольники.

map.data.setStyle({
  icon: '//example.com/path/to/image.png',
  fillColor: 'green'
});

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

Ниже приведен пример установки цвета штрихов и цвета заливки для нескольких элементов с помощью литерала объекта StyleOptions. Обратите внимание, что все многоугольники имеют один и тот же стиль.

// Set the stroke width, and fill color for each polygon
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 1
});

Просмотр примера

Декларативные правила стилей

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

Например, в приведенном ниже примере кода устанавливается цвет каждого символа google.json в соответствии с его позицией в наборе символов ascii. В этом случае позиция символа кодируется вместе с данными.

// Color Capital letters blue, and lower case letters red.
// Capital letters are represented in ascii by values less than 91
map.data.setStyle(function(feature) {
    var ascii = feature.getProperty('ascii');
    var color = ascii > 91 ? 'red' : 'blue';
    return {
      fillColor: color,
      strokeWeight: 1
    };
});

Удаление стилей

Если вы хотите удалить какие-либо примененные стили, передайте пустой литерал объекта в метод setStyles().

// Remove custom styles.
map.data.setStyle({});

При этом все настраиваемые стили будут удалены, а для прорисовки будут использоваться стили по умолчанию. Если вы хотите отменить прорисовку этих элементов, установите для свойства visible в StyleOptions значение false.

// Hide the Data layer.
map.data.setStyle({visible: false});

Замена стилей по умолчанию

Правила стилей обычно применяются ко всем элементам слоя данных. Однако иногда требуется применить особые правила стилей для отдельных элементов. Например, можно добавить выделение элемента при щелчке.

Для применения специальных правил стилей используется метод overrideStyle(). Любые свойства, изменяемые с помощью метода overrideStyle(), применяются в дополнение к глобальным стилям, уже заданным с помощью setStyle(). Например, приведенный ниже образец кода изменяет цвет заливки многоугольника при щелчке по нему, но не устанавливает никакие другие стили.

// Set the global styles.
map.data.setStyle({
  fillColor: 'green',
  strokeWeight: 3
});

// Set the fill color to red when the feature is clicked.
// Stroke weight remains 3.
map.data.addListener('click', function(event) {
   map.data.overrideStyle(event.feature, {fillColor: 'red'});
});

Чтобы удалить все замены стилей, вызовите метод revertStyles().

Параметры стилей

Доступные параметры для определения стиля каждого элемента зависят от типа элемента. Например, элемент fillColor выполняет прорисовку только геометрии многоугольников, а элемент icon действует только на геометрию точек. Более подробная информация доступна в справочной документации по StyleOptions.

Доступны для всех геометрий

  • clickable: если это свойство имеет значение true, для элемента поддерживаются события при нажатии мыши или прикосновении к сенсорному экрану.
  • visible: если это свойство имеет значение true, это означает, что элемент видимый.
  • zIndex: Все элементы отображаются на карте в порядке номера zIndex, более высокие значения отображаются поверх элементов с низкими значениями. Маркеры всегда отображаются поверх ломаных линий и многоугольников.

Доступно для геометрий точек

  • cursor: курсор мыши, показываемый при наведении на элемент.
  • icon: значок, отображаемый для геометрии точек.
  • shape: определяет форму области, используемой для обнаружения нажатия.
  • title: текст, выводимый при наведении курсора на элемент.

Доступны для геометрий линий

  • strokeColor: цвет штриха. Поддерживаются все цвета CSS3, кроме цветов с расширенными именами.
  • strokeOpacity: непрозрачность штриха от 0,0 до 1,0.
  • strokeWeight: ширина штриха в пикселях.

Доступны для геометрий многоугольников

  • fillColor: цвет заливки. Поддерживаются все цвета CSS3, кроме цветов с расширенными именами.
  • fillOpacity: непрозрачность заливки от 0,0 до 1,0.
  • strokeColor: цвет штриха. Поддерживаются все цвета CSS3, кроме цветов с расширенными именами.
  • strokeOpacity: непрозрачность штриха от 0,0 до 1,0.
  • strokeWeight: ширина штриха в пикселях.

Добавление обработчиков событий

Элементы реагируют на события, такие как mouseup или mousedown. Вы можете добавить блоки прослушивания событий, чтобы дать пользователям возможность взаимодействовать с данными на карте. В примере ниже мы добавляем событие наведения курсора мыши mouseover, в результате которого под курсором мыши отображается информация об элементе.

// Set mouseover event for each feature.
map.data.addListener('mouseover', function(event) {
  document.getElementById('info-box').textContent =
      event.feature.getProperty('letter');
});

События слоя данных

Следующие события используются для всех элементов, вне зависимости от типа их геометрии:

  • addfeature
  • click
  • dblclick
  • mousedown
  • mouseout
  • mouseover
  • mouseup
  • removefeature
  • removeproperty
  • rightclick
  • setgeometry
  • setproperty

Дополнительную информацию об этих событиях см. в справочной документации по классу google.maps.data.

Динамическое изменение внешнего вида

Чтобы установить стиль слоя данных, нужно передать методу google.maps.data.setStyle() функцию, рассчитывающую стиль для каждого элемента. Эта функция будет вызываться каждый раз при изменении свойств элемента.

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

// Color each letter gray. Change the color when the isColorful property
// is set to true.
map.data.setStyle(function(feature) {
  var color = 'gray';
  if (feature.getProperty('isColorful')) {
    color = feature.getProperty('color');
  }
  return /** @type {google.maps.Data.StyleOptions} */({
    fillColor: color,
    strokeColor: color,
    strokeWeight: 2
  });
});

// When the user clicks, set 'isColorful', changing the color of the letters.
map.data.addListener('click', function(event) {
  event.feature.setProperty('isColorful', true);
});

// When the user hovers, tempt them to click by outlining the letters.
// Call revertStyle() to remove all overrides. This will use the style rules
// defined in the function passed to setStyle()
map.data.addListener('mouseover', function(event) {
  map.data.revertStyle();
  map.data.overrideStyle(event.feature, {strokeWeight: 8});
});

map.data.addListener('mouseout', function(event) {
  map.data.revertStyle();
});

Просмотр примера

Оставить отзыв о...

Текущей странице
Google Maps JavaScript API
Google Maps JavaScript API
Нужна помощь? Обратитесь в службу поддержки.