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

Автор: | 01.07.2012

На прошедшей недавно ежегодная конференции 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 можно посмотреть ниже

Новые возможности API Google Maps v3: 4 комментария

  1. Кирилл

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

  2. Кирилл

    но на самих гугл картах это как то реализовано
    или просто нету в API

    1. admin Автор записи

      В API этого нет, тут вероятно проблема с авторскими правами. Google может показывать эту информацию на своей карте на их сайте, но давать доступ для использования остальным не может.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *