На прошедшей недавно ежегодная конференции 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
В API этого нет, тут вероятно проблема с авторскими правами. Google может показывать эту информацию на своей карте на их сайте, но давать доступ для использования остальным не может.