Новая библиотека Drawing в Google Maps API V3

Недавно в Google Maps API V3 появилась новая библиотека Drawing. Она предоставляет набор инструментов, с помощью которых пользователи могут ставить маркеры, рисовать на карте линии, круги, прямоугольники, многоугольники, чтобы выделить различные места на карте.



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

Чтобы работать с библиотекой Drawing, нужно при подключении js Google Maps, добавить параметр libraries=drawing:

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=drawing"></script>

DrawingManager:

Класс DrawingManager из этой библиотеки предоставляет графический интерфейс для пользователей. Он включает в себя многоугольники, прямоугольники, ломаные линии, круги и маркеры на карте.

Объект DrawingManager создается следующим образом:

var drawingManager = new google.maps.drawing.DrawingManager();
drawingManager.setMap(map);

Теперь на карте появились пользовательские инструменты для рисования.

Опции:

Мы можем настроить, какие именно инструменты мы хотим предоставить пользователю, а также их положение на карте и вид:
drawingControl — определяет видимость инструментов на карте. Он принимает логическое значение true/false.

drawingControlOptions — определяет позицию инструментов на карте, а также список инструментов, которые вы хотите включить.
— position — позиция инструментов рисования. По умолчанию TOP_LEFT.
— drawingModes — инструменты для отображения и их порядок. Значок руки всегда доступен и он не указывается в этом массиве. По умолчанию [MARKER, POLYLINE, RECTANGLE, CIRCLE, POLYGON].

drawingMode — определяет, какой инструмент будет выделен по умолчанию.

circleOptions {}
markerOptions {}
polygonOptions {}
polylineOptions {}
rectangleOptions {}
Для каждого инструмента можно указать свои специфические опции. К примеру, иконку маркера, цвет заливки фигуры, zindex, кликабельность и т.п. Полную информацию по каждой опции можно узнать в документации API.

Также можно указать будет ли у пользователей возможность редактировать фигуру после создания. Для этого установите опцию editable в true.

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

var drawingManager = new google.maps.drawing.DrawingManager({
	  drawingControl: true,
	  drawingControlOptions: {
	  position: google.maps.ControlPosition.TOP_CENTER,
	  drawingModes: [google.maps.drawing.OverlayType.MARKER, google.maps.drawing.OverlayType.CIRCLE, google.maps.drawing.OverlayType.POLYGON]
	  },
	  drawingMode: google.maps.drawing.OverlayType.MARKER,
	  markerOptions: {
	  	  icon: new google.maps.MarkerImage('http://www.example.com/icon.png')
	  },
	  circleOptions: {
	  	  fillColor: '#ffffff',
	  	  fillOpacity: 1,
	  	  strokeWeight: 5,
	  	  clickable: false,
	  	  zIndex: 1,
	  	   editable: true
	  }
});

Изменение опций:

Когда объект DrawingManager создан, его можно обновить с помощью функции setOptions().
К примеру, можно задать новое положение для инструментов:

drawingManager.setOptions({
	  drawingControlOptions: {
	  	  position: google.maps.ControlPosition.BOTTOM_LEFT
	  }
});

Или изменить цвет заливки кругов:

drawingManager.setOptions({
	  circleOptions: {
	  	  fillColor: '#000000'
	  }
}); 

Либо, например, по клику на кнопке, спрятать или показать панель инструментов:

// To hide:
drawingManager.setOptions({
	  drawingControl: false
});

// To show:
drawingManager.setOptions({
	  drawingControl: true
});

После появления панели инструментов, все опции, которые вы задавали для нее сохраняются.

Если же вы хотите совсем удалить панель инструментов, то нужно вызвать:

drawingManager.setMap(null);

События:

Когда пользователь рисует на карте, устанавливает маркер, то вызываются два события:
1) {overlay}complete — где {overlay} это тип объекта, который создал пользователь, например circlecomplete, polygoncomplete и т.д.). Ссылка на этот объект передается в качестве аргумента.
2) overlaycomplete — в качестве аргумента передается OverlayType и ссылка на созданный объект.

К примеру, при установке маркера пользователем, мы можем получить координаты и вывести их или сохранить в базе данных.

google.maps.event.addListener(drawingManager, 'markercomplete', function(marker) {
	  console.log(marker.getPosition().toString())
});

google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
	  if (event.type == google.maps.drawing.OverlayType.MARKER) {
	  	  console.log('Установлен маркер')
	  }
});

Ссылки:

Пример работы библиотеки
Документация