Новые возможности API Google Maps v3

На прошедшей недавно ежегодная конференции Google I/O компанией Google было объявлено о новых возможностях API Google Maps v3.

Это Heatmap Layer — слой для отображения тематической карты (переходов интенсивности от красного цвета к зеленому), Public transit routing and layer — слой общественного транспорта с возможностью маршрутизации для 475 регионов по всему миру, Symbols — возможность добавления на карту векторных изображений специальных символов, используя их как маркеры или добавляя их к полилиниям.

Рассмотрим их более подробно.

Heatmap Layer

В документации есть пример использования Heatmap Layer

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

Toggle Heatmap — позволяет включать и отключать отображение слоя Heatmap на карте;
Change gradient — изменяет цвет градиента для изображения;
Change radius — изменяет радиус для точек;
Change opacity — изменяет уровень интенсивности (контрастности) для изображения слоя.

Для использования Heatmap Layer нам необходимо в самом начале подключить библиотеку для визуализации — visualization.

Делается это в строке подключения API Google Maps добавлением параметра libraries=visualization.

Далее определяется массив геоточек taxiData (всего 500 точек).

После определения параметров карты, мы передаем массив точек функции new google.maps.MVCArray в качестве параметра.

Затем определяем слой heatmap и добавляем его на карту строкой heatmap.setMap(map);

Ниже расположенные функции выполняют изменение свойств слоя Heatmap в зависимости от нажатой кнопки.

И еще один интересный пример использования Heatmap — анимированная карта роста числа магазинов компании Walmart.

Наведите указатель мыши на карту и Вы увидите как менялось количество магазинов Walmart в Америке с 1962 года по 2006.

The Transit Layer

Отображает слой общественного транспорта на картах Google для некоторых городов, список можно посмотреть здесь.

Пример из документации: Слой транспорта для Лондона.

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

var transitLayer = new google.maps.TransitLayer();
transitLayer.setMap(map);

В первой мы определяем новый слой transitLayer , а во второй добавляем его на карту.

Мой пример слой транспорта для Москвы (метро, автобусы, троллейбусы и трамваи)

Symbols

Символы являются векторными изображениями в формате SVG.

Некоторые символы определены в классе SymbolPath.

Примеры использования символов:

пример размещения собственного символа

В этом примере мы после определения параметров карты, создаем наш символ goldStar.

Перечислю его основные свойства:

path (путь) — является обязательным параметром, определяет форму символа, мы можем использовать стандартные пути из класса SymbolPath, либо определить свой, используя обозначения из формата SVG;

anchor — позицию символа относительно к точке или полилинии (в нашем примере не используется), по умолчанию имеет координаты 0,0 и определяется в той же ситеме координат что и путь символа;

fillColor — цвет заливки символа, поддерживаются все цвета CSS3 за исключением расширенных наименований цветов;

fillOpacity — степень прозрачности заливки от 0 до 1, по умолчанию 0;

rotation — угол вращения символа в градусах по часовой стрелке, по умолчанию 0;

scale — масштаб, значение на которое символ масштабируется по размеру;

strokeColor — цвет обводки;

strokeOpacity — прозрачность обводки от 0 до 1;

strokeWeight — толщина обводки

После этого добавляем наш символ на карту в точку с координатами 55.755786, 37.617633

Пример анимации движения символа по прямой

Пример совмещающий анимацию символов и слой транспорта

Нажмите на кнопки ниже карты для того, чтобы заставить двигаться символы.

Видео полной презентации Google Maps на Google I/O можно посмотреть ниже