Все готово!

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

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

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

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

Фигуры

Вы можете добавлять на свою карту различные фигуры. Фигура – это объект на карте, привязанный к координатам широты и долготы. Доступны следующие фигуры: линии, многоугольники, круги и прямоугольники. Вы также можете настроить свои фигуры так, чтобы пользователи могли редактировать или перетаскивать их.

Ломаные линии

Чтобы начертить линию на карте, используйте ломаную линию. Класс Polyline определяет линейное наложение соединенных сегментов линии на карте. Объект Polyline состоит из массива точек LatLng и создает набор сегментов, соединяющих эти точки в упорядоченной последовательности.

Добавление ломаной линии

Конструктор Polyline принимает набор PolylineOptions, указывающий координаты LatLng для линии и набор стилей, регулирующих визуальное поведение.

Объекты Polyline отображаются в виде последовательности прямых отрезков на карте. При создании линии вы можете указать для нее собственные цвета, толщину и прозрачность штриха в параметрах PolylineOptions или изменить эти свойства после ее создания. Ломаная линия поддерживает следующие стили штрихов:

  • strokeColor указывает цвет в шестнадцатеричном формате HTML "#FFFFFF". Класс Polyline не поддерживает именованные цвета.
  • strokeOpacity указывает числовое значение от 0,0 до 1,0, определяющее прозрачность цвета линии. Значение по умолчанию 1,0.
  • strokeWeight указывает ширину линии в пикселях.

Свойство editable ломаной линии указывает, могут ли пользователи изменять ее форму. Дополнительную информацию можно найти ниже в описании фигур, редактируемых пользователем. Аналогичным образом можно установить свойство draggable, позволяющее пользователям перетаскивать линию.

// This example creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}
<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 creates a 2-pixel-wide red polyline showing the path of William
// Kingsford Smith's first trans-Pacific flight between Oakland, CA, and
// Brisbane, Australia.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 3,
    center: {lat: 0, lng: -180},
    mapTypeId: 'terrain'
  });

  var flightPlanCoordinates = [
    {lat: 37.772, lng: -122.214},
    {lat: 21.291, lng: -157.821},
    {lat: -18.142, lng: 178.431},
    {lat: -27.467, lng: 153.027}
  ];
  var flightPath = new google.maps.Polyline({
    path: flightPlanCoordinates,
    geodesic: true,
    strokeColor: '#FF0000',
    strokeOpacity: 1.0,
    strokeWeight: 2
  });

  flightPath.setMap(map);
}

Просмотр примера (polyline-simple.html).

Удаление ломаной линии

Для удаления ломаной линии с карты нужно вызвать метод setMap() и передать ему значение null в качестве аргумента. В следующем примере flightPath является объектом ломаной линии:

flightPath.setMap(null);

Следует отметить, что вышеуказанный метод не удаляет ломаную линию окончательно. Он просто убирает ее с карты. Если вы хотите удалить ломаную линию полностью, ее нужно убрать с карты, а затем установить для нее значение null.

Просмотр примера (polyline-remove.html).

Проверка ломаной линии

Ломаная линия указывает набор координат в виде массива объектов LatLng. Эти координаты определяют путь линии. Чтобы получить эти координаты, нужно вызвать метод getPath(), возвращающий массив типа MVCArray. Вы можете использовать следующие операции для управления массивом и его проверки:

  • getAt() – возвращает значение LatLng для указанного значения индекса, начинаемого с нуля.
  • insertAt() – вставляет переданное значение LatLng для указанного значения индекса, начинаемого с нуля. Любые существующие координаты для этого значения индекса перемещаются вперед.
  • removeAt() – удаляет значение LatLng для указанного значения индекса, начинаемого с нуля.
// This example creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}
<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 creates an interactive map which constructs a polyline based on
// user clicks. Note that the polyline only appears once its path property
// contains two LatLng coordinates.

var poly;
var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 7,
    center: {lat: 41.879, lng: -87.624}  // Center the map on Chicago, USA.
  });

  poly = new google.maps.Polyline({
    strokeColor: '#000000',
    strokeOpacity: 1.0,
    strokeWeight: 3
  });
  poly.setMap(map);

  // Add a listener for the click event
  map.addListener('click', addLatLng);
}

// Handles click events on a map, and adds a new point to the Polyline.
function addLatLng(event) {
  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear.
  path.push(event.latLng);

  // Add a new marker at the new plotted point on the polyline.
  var marker = new google.maps.Marker({
    position: event.latLng,
    title: '#' + path.getLength(),
    map: map
  });
}

Просмотр примера (polyline-complex.html).

Настройка ломаной линии

Вы можете добавлять к ломаной линии векторные изображения в виде символов. Сочетание символов и класса PolylineOptions дает значительную степень контроля над внешним видом ломаных линий на карте. Более подробную информацию о стрелках, пунктирных линиях, собственных ианимированных символах можно найти в разделе Символы.

Многоугольники

Многоугольник – это область, ограниченная замкнутым путем (или контуром), который определяется последовательностью координат. Объекты Polygon похожи на объекты Polyline тем, что состоят из серии координат в упорядоченной последовательности. Многоугольники рисуются линиями и заливкой. Вы можете определять собственные цвета, толщину и прозрачность границ многоугольника (линий) и собственные цвета и прозрачность внутренней области (заливки). Цвета следует указывать в шестнадцатеричном формате HTML. Названия цветов не поддерживаются.

Объекты Polygon могут описывать сложные фигуры, включая:

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

Для определения сложных фигур используется многоугольник с несколькими путями.

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

Добавление многоугольника

Поскольку многоугольная область может содержать несколько отдельных путей, свойство paths объекта Polygon определяет массив из массивов, каждый из которых имеет тип MVCArray. Каждый из этих массивов определяет отдельную последовательность упорядоченных координат LatLng.

Для простых многоугольников, содержащих только один путь, можно построить объект Polygon, используя один массив координат LatLng. Google Maps JavaScript API преобразует простой массив в массив массивов после создания при его сохранении в свойстве paths. API предоставляет простой метод getPath() для многоугольников, состоящих из одного пути.

Свойство editable многоугольника определяет, могут ли пользователи изменять его форму. Дополнительную информацию можно найти ниже в описании фигур, редактируемых пользователем. Аналогичным образом можно установить свойство draggable, позволяющее пользователям перетаскивать фигуру.

// This example creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<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 creates a simple polygon representing the Bermuda Triangle.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon's path.
  var triangleCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757},
    {lat: 25.774, lng: -80.190}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Просмотр примера (polygon-simple.html).

Автозавершение многоугольников

В примере выше объект Polygon состоит из четырех наборов координат LatLng, однако первый и последний наборы определяют одну и ту же точку, которая замыкает контур. Однако на практике, поскольку многоугольники определяют замкнутые области, вы можете не указывать последний набор координат. Google Maps JavaScript API автоматически замыкает многоугольник, рисуя линию, соединяющую последнюю и первую точки для любого указанного пути.

Следующий пример идентичен предыдущему примеру за исключением того, что последнее значение LatLng опускается: Просмотр примера (polygon-autoclose.html).

Удаление многоугольника

Для удаления многоугольника с карты нужно вызвать метод setMap() и передать ему значение null в качестве аргумента. В следующем примере используется объект многоугольника bermudaTriangle:

bermudaTriangle.setMap(null);

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

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

Многоугольник определяет свой набор координат как массив из массивов типа MVCArray. Каждый массив нижнего уровня содержит координаты LatLng, определяющие отдельный путь. Для получения этих координат нужно вызвать метод getPaths() для объекта Polygon. Вы можете использовать следующие операции для управления массивами типа MVCArray и их проверки:

  • getAt() – возвращает значение LatLng для указанного значения индекса, начинаемого с нуля.
  • insertAt() – вставляет переданное значение LatLng для указанного значения индекса, начинаемого с нуля. Любые существующие координаты для этого значения индекса перемещаются вперед.
  • removeAt() – удаляет значение LatLng для указанного значения индекса, начинаемого с нуля.
// This example creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}
<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 creates a simple polygon representing the Bermuda Triangle.
// When the user clicks on the polygon an info window opens, showing
// information about the polygon's coordinates.

var map;
var infoWindow;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 5,
    center: {lat: 24.886, lng: -70.268},
    mapTypeId: 'terrain'
  });

  // Define the LatLng coordinates for the polygon.
  var triangleCoords = [
      {lat: 25.774, lng: -80.190},
      {lat: 18.466, lng: -66.118},
      {lat: 32.321, lng: -64.757}
  ];

  // Construct the polygon.
  var bermudaTriangle = new google.maps.Polygon({
    paths: triangleCoords,
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 3,
    fillColor: '#FF0000',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);

  // Add a listener for the click event.
  bermudaTriangle.addListener('click', showArrays);

  infoWindow = new google.maps.InfoWindow;
}

/** @this {google.maps.Polygon} */
function showArrays(event) {
  // Since this polygon has only one path, we can call getPath() to return the
  // MVCArray of LatLngs.
  var vertices = this.getPath();

  var contentString = '<b>Bermuda Triangle polygon</b><br>' +
      'Clicked location: <br>' + event.latLng.lat() + ',' + event.latLng.lng() +
      '<br>';

  // Iterate over the vertices.
  for (var i =0; i < vertices.getLength(); i++) {
    var xy = vertices.getAt(i);
    contentString += '<br>' + 'Coordinate ' + i + ':<br>' + xy.lat() + ',' +
        xy.lng();
  }

  // Replace the info window's content and position.
  infoWindow.setContent(contentString);
  infoWindow.setPosition(event.latLng);

  infoWindow.open(map);
}

Просмотр примера (polygon-arrays.html).

Размещение отверстия в многоугольнике

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

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

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

// This example creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}
<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 creates a triangular polygon with a hole in it.

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

  // Define the LatLng coordinates for the polygon's  outer path.
  var outerCoords = [
    {lat: 25.774, lng: -80.190},
    {lat: 18.466, lng: -66.118},
    {lat: 32.321, lng: -64.757}
  ];

  // Define the LatLng coordinates for the polygon's inner path.
  // Note that the points forming the inner path are wound in the
  // opposite direction to those in the outer path, to form the hole.
  var innerCoords = [
    {lat: 28.745, lng: -70.579},
    {lat: 29.570, lng: -67.514},
    {lat: 27.339, lng: -66.668}
  ];

  // Construct the polygon, including both paths.
  var bermudaTriangle = new google.maps.Polygon({
    paths: [outerCoords, innerCoords],
    strokeColor: '#FFC107',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FFC107',
    fillOpacity: 0.35
  });
  bermudaTriangle.setMap(map);
}

Просмотр примера (polygon-hole.html).

Прямоугольники

В дополнение к общему классу Polygon Google Maps JavaScript API включает отдельный класс для объектов Rectangle, упрощающий их создание.

Добавление прямоугольника

Объект Rectangle похож на объект Polygon тем, что для него вы можете определять собственные цвета, толщину и прозрачность границ прямоугольника (линий), а также собственные цвета и прозрачность внутренней области (заливки). Цвета следует указывать в шестнадцатеричном числовом формате HTML.

В отличие от объектов типа Polygon, для объектов типа Rectangle не требуется определять свойство path. Вместо этого, у прямоугольников есть свойство bounds, которое определяет его форму, задавая значение google.maps.LatLngBounds для прямоугольника.

Свойство editable прямоугольника определяет, могут ли пользователи изменять его форму. Дополнительную информацию можно найти ниже в описании фигур, редактируемых пользователем. Аналогичным образом можно установить свойство draggable, позволяющее пользователям перетаскивать прямоугольник.

// This example adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}
<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 adds a red rectangle to a map.

function initMap() {
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 33.678, lng: -116.243},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle({
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    map: map,
    bounds: {
      north: 33.685,
      south: 33.671,
      east: -116.234,
      west: -116.251
    }
  });
}

Просмотр примера (rectangle-simple.html).

Следующий код создает прямоугольник каждый раз, когда пользователь изменяет масштабирование карты. Размер прямоугольника определяется областью просмотра.

// This example creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}
<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 creates a rectangle based on the viewport
// on any 'zoom-changed' event.

function initMap() {

  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 11,
    center: {lat: 40.748520, lng: -73.981687},
    mapTypeId: 'terrain'
  });

  var rectangle = new google.maps.Rectangle();

  map.addListener('zoom_changed', function() {

    // Get the current bounds, which reflect the bounds before the zoom.
    rectangle.setOptions({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      bounds: map.getBounds()
    });
  });
}

Просмотр примера (rectangle-zoom.html).

Удаление прямоугольника

Для удаления прямоугольника с карты нужно вызвать метод setMap() и передать ему значение null в качестве аргумента.

rectangle.setMap(null);

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

Круги

В дополнение к общему классу Polygon Google Maps JavaScript API включает отдельный класс для объектов Circle, упрощающий их создание.

Добавление круга

Объект Circle похож на объект Polygon тем, что для него вы можете определять собственные цвета, толщину и прозрачность границы круга (линии), а также собственные цвета и прозрачность внутренней области круга (заливки). Цвета следует указывать в шестнадцатеричном числовом формате HTML.

В отличие от объектов типа Polygon, для объектов типа Circle не требуется определять свойство path. Вместо него форму круга определяют два дополнительных свойства:

  • center – указывает координаты google.maps.LatLng центра круга.
  • radius – указывает радиус круга в метрах.

Свойство editable круга указывает, могут ли пользователи изменять его форму. Дополнительную информацию можно найти ниже в описании фигур, редактируемых пользователем. Аналогичным образом можно установить свойство draggable, позволяющее пользователям перетаскивать круг.

// This example creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}
<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 creates circles on the map, representing populations in North
// America.

// First, create an object containing LatLng and population for each city.
var citymap = {
  chicago: {
    center: {lat: 41.878, lng: -87.629},
    population: 2714856
  },
  newyork: {
    center: {lat: 40.714, lng: -74.005},
    population: 8405837
  },
  losangeles: {
    center: {lat: 34.052, lng: -118.243},
    population: 3857799
  },
  vancouver: {
    center: {lat: 49.25, lng: -123.1},
    population: 603502
  }
};

function initMap() {
  // Create the map.
  var map = new google.maps.Map(document.getElementById('map'), {
    zoom: 4,
    center: {lat: 37.090, lng: -95.712},
    mapTypeId: 'terrain'
  });

  // Construct the circle for each value in citymap.
  // Note: We scale the area of the circle based on the population.
  for (var city in citymap) {
    // Add the circle for this city to the map.
    var cityCircle = new google.maps.Circle({
      strokeColor: '#FF0000',
      strokeOpacity: 0.8,
      strokeWeight: 2,
      fillColor: '#FF0000',
      fillOpacity: 0.35,
      map: map,
      center: citymap[city].center,
      radius: Math.sqrt(citymap[city].population) * 100
    });
  }
}

Просмотр примера (circle-simple.html).

Удаление круга

Для удаления круга с карты нужно вызвать метод setMap() и передать ему значение null в качестве аргумента.

circle.setMap(null);

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

Редактируемые и перетаскиваемые фигуры

Разрешение редактирования фигуры добавляет к ее отображению маркеры, с помощью которых пользователи могут изменять положение, форму и размеры фигуры непосредственно на карте. Также фигуру можно сделать перетаскиваемой, чтобы пользователи могли перемещать ее в другое место на карте.

Изменения объектов, выполненные пользователями, не сохраняются между сеансами. Если вы хотите сохранять пользовательские правки, ваше приложение должно самостоятельно записывать и сохранять информацию.

Как сделать фигуру редактируемой

Любую фигуру (ломаную линию, многоугольник, круг или прямоугольник) можно сделать редактируемой, установив в ее параметрах для свойства editable значение true.

var bounds = {
  north: 44.599,
  south: 44.490,
  east: -78.443,
  west: -78.649
};

// Define a rectangle and set its editable property to true.
var rectangle = new google.maps.Rectangle({
  bounds: bounds,
  editable: true
});

Просмотр примера (user-editable-shapes.html).

Как сделать фигуру перетаскиваемой

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

var redCoords = [
  {lat: 25.774, lng: -80.190},
  {lat: 18.466, lng: -66.118},
  {lat: 32.321, lng: -64.757}
];

// Construct a draggable red triangle with geodesic set to true.
new google.maps.Polygon({
  map: map,
  paths: redCoords,
  strokeColor: '#FF0000',
  strokeOpacity: 0.8,
  strokeWeight: 2,
  fillColor: '#FF0000',
  fillOpacity: 0.35,
  draggable: true,
  geodesic: true
});

При разрешении перетаскивания многоугольники и ломаные линии можно сделать геодезическими, установив для их свойства geodesic значение true.

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

Для геодезических ломаных линий сегменты рисуются, как кратчайший путь между двумя точками на поверхности земли (как сфероида), а не прямыми линиями на проекции Меркатора.

Дополнительную информацию о системах координат см. в документации по типам карт.

На следующей карте показаны два треугольника примерно одних и тех же размеров. Для красного треугольника свойство geodesic имеет значение true. Обратите внимание на изменение его формы при перемещении на север.

Просмотр примера (polygon-draggable.html).

Отслеживание событий редактирования

После завершения редактирования фигуры возникает событие. Ниже приведен список этих событий.

Фигура События
Круг radius_changed
center_changed
Многоугольник insert_at
remove_at
set_at

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

Ломаная линия insert_at
remove_at
set_at

Блок прослушивания событий должен быть установлен для пути ломаной линии.

Прямоугольник bounds_changed

Полезные фрагменты кода:

google.maps.event.addListener(circle, 'radius_changed', function() {
  console.log(circle.getRadius());
});

google.maps.event.addListener(outerPath, 'set_at', function() {
  console.log('Vertex moved on outer path.');
});

google.maps.event.addListener(innerPath, 'insert_at', function() {
  console.log('Vertex removed from inner path.');
});

google.maps.event.addListener(rectangle, 'bounds_changed', function() {
  console.log('Bounds changed.');
});

См. пример обработки события редактирования прямоугольника: Просмотр примера (rectangle-event.html).

Отслеживание событий перетаскивания

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

Событие Описание
dragstart Возникает, когда пользователь начинает перетаскивать фигуру.
drag Многократно возникает в процессе перетаскивания фигуры пользователем.
dragend Возникает, когда пользователь заканчивает перетаскивать фигуру.

Дополнительную информацию об обработке событий можно найти в документации по событиям.

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

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