Google Maps API. Установка и определение маршрутов

В этой статье я опишу два вида работы с маршрутами. 1 - автоматическая прокладка маршрута между двумя точками на карте. 2 - ручная прокладка маршрута с помощью линии.

Автоматический маршрут

Сперва нужно подключить функции маршрутов. Вставьте этот код в функцию инициализации карты:

var directionsDisplay = new google.maps.DirectionsRenderer();
var directionsService = new google.maps.DirectionsService();
directionsDisplay.setMap(map);
directionsDisplay.setOptions( { suppressMarkers: true, suppressInfoWindows: true } );

Теперь можно использовать эти функции. Как именно и с какими координатами их запускать - на ваше усмотрение.

var request = {
 origin: LatLng,
 destination: LatLng,
 travelMode: google.maps.TravelMode.DRIVING,
 unitSystem: google.maps.UnitSystem.METRIC,
 waypoints: [
  {
   location: LatLng,
   stopover:false
  },{
   location: LatLng,
   stopover:true
  }
 ],
 optimizeWaypoints: true,
 provideRouteAlternatives: true,
 avoidHighways: true,
 avoidTolls: true
};
directionsService.route(request, function(result, status) {
 if (status == google.maps.DirectionsStatus.OK) {
  directionsDisplay.setDirections(result);
  var routes = result.routes;
  var leg = routes[0].legs;
  var lenght = leg[0].distance.text;
  var duration = leg[0].duration.text;
 }
});

origin - (Обязательный параметр) координаты или адрес точки начала маршрута
destination - (Обязательный параметр) координаты или адрес точки конца маршрута
travelMode - (Обязательный параметр) способ перемещения (DRIVING - на автомобиле, BICYCLING - на велосипеде, TRANSIT - на общественном транспорте, WALKING - пешком)
unitSystem - система измерения (METRIC - метрическая, IMPERIAL - британская)
waypoints - массив с точками, через которые обязательно должен проходить маршрут
waypoints -> location - координаты или адрес точки
waypoints -> stopover - разделять ли маршрут на части в этой точке (true или false)
optimizeWaypoints - включает оптимизацию маршрута с помощью точек в waypoints (true или false)
provideRouteAlternatives – включает поиск нескольких альтернативных маршрутов (true или false)
avoidHighways – пытаться ли избегать автомагистралей (true или false)
avoidTolls – пытаться ли избегать платных дорого (true или false)
routes - массив с вариантами маршрутов
leg - массив с отрезками маршрута
lenght - дистанция первого отрезка (или всего маршрута, если отрезок всего один)
duration - продолжительность первого отрезка (или всего маршрута, если отрезок всего один)

Посмотреть пример

Ручной маршрут

Свой маршрут можно проложить с помощью линии (polyline), но учтите, что линия не будет обращать внимания на дороги и вообще возможность пройти по указанному маршруту.
Подключим функцию линии к карте:

var lineSymbol = {
 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
};
var polyOptions = {
 editable:true,
 strokeColor: '#000000',
 strokeOpacity: 0.8,
 strokeWeight: 5,
 icons: [{
  icon: lineSymbol,
  offset : '10%',
  repeat : '200px'
 }]
}

poly = new google.maps.Polyline(polyOptions);
poly.setMap(map);
var path = poly.getPath();

lineSymbol - добавляет на линию стрелки в сторону движения маршрута
editable - включает возможность редактирования (перетаскивания) уже проложенной линии
strokeColor - цвет линии
strokeOpacity - прозрачность линии (1 - не прозрачная, 0 - прозрачная)
strokeWeight - ширина линии (жирность)
icons -> offset - сдвиг стрелок от старта маршрута
icons -> repeat - расстановка стрелок через каждые n пикселей марштура

Чтобы добавить точки в маршрут достаточно добавить новую координату в массив path:

path.push(latLng);

Функция сама прорисует линию до указанной точки и отредактирует соответствующие координаты при перетаскивании точки.
Чтобы получить актуальный массив с координатами всего маршрута воспользуйтесь этим кодом:

var points = poly.getPath().getArray();

Посмотреть пример

На этом я закончу статьи по Google Maps. До тех пор пока не появятся запросы на описание каких-либо пропущенных мною функций.

Список статей о Google Maps API смотрите здесь

Google Maps API. Маркеры, кластеры и геокодирование

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

Обычный маркер добавить очень просто. Достаточно коротенького кода:

var marker = new google.maps.Marker({    
 position: new google.maps.LatLng('56', '37'),
 map: map
});

и маркер будет установлен. Однако это будет пустой и стандартный маркер.
Сделаем его более уникальным, заменив изображение маркера:

var image = new google.maps.MarkerImage('marker_image.png',
 new google.maps.Size(32, 37),
 new google.maps.Point(0,0),
 new google.maps.Point(16, 35)
);

var marker = new google.maps.Marker({
 position: new google.maps.LatLng('56', '37'),
 map: map,
 title: 'Marker Title',
 icon: image
});

marker_image.png - замените на свое изображение маркера
Size - размер изображения
Point - смещение изображения (чтобы якорь маркера был в нужной точке)

Изображение маркера изменили, теперь нужно установить на маркер балун (всплывающее окошко при клике на маркер).

Создаем балун:

var infowindow = new google.maps.InfoWindow({
 content: 'Marker content'
});

Создаем событие, которое откроет балун на карте при клике на наш маркер:

google.maps.event.addListener(marker, 'click', function() {
 infowindow.open(map, this);
});

Вам могут пригодиться эти функции балунов:

infowindow.setContent('Marker content');
infowindow.close();

setContent - изменяет наполнение балуна не изменяя его статус (открыт\закрыт).
close - закрывает балун.

Посмотреть пример

Кластеризация маркеров

К сожалению, в картах гугла нет встроенной кластеризации. Однако есть несколько сторонних функций.
Одну из них можно скачать здесь

Выглядит это так:
Без кластеризации:

С кластеризацией:

Подключаем этот скрипт к странице и делаем изменения в коде карты:

var markers = []; 
var marker = new google.maps.Marker({    
    position: new google.maps.LatLng('56', '37')
});
markers.push(marker);
markerClusterer = new MarkerClusterer(map, markers, 
{ 
    maxZoom: 13,
    gridSize: 50,
    styles: null 
});

maxZoom – максимальный зум, при котором маркеры будут группироваться в кластеры
gridSize – размер ячеек сетки. Чем меньше значение, тем меньше сетка группировки
styles – дополнительные стили

Обратите внимание - из функции создания маркера была удалена строка map: map. Это очень важно, т.к. теперь маркеры не будут добавляться на карту напрямую, они будут добавляться в кластер, а кластер уже будет добавлен на карту.

Функция очистки кластера может быть полезна:

markerClusterer.clearMarkers();

Посмотреть пример

Геокодирование

Геокодирование бывает двух видов:
1) Поиск адреса по координатам
2) Поиск координат по адресу

Поиска по адресу:

var geocoder = new google.maps.Geocoder();
geocoder.geocode({'address': 'Адрес','partialmatch': true}, function (results, status) {
 if (status == 'OK' && results.length > 0) {
  var location = results[0].geometry.location;
 }else{
  // Адрес не найден
 }
});

Массив results может содержать не одну запись, если похожий адрес был найден в нескольких разных точках. Но обычно самый точный из них идет первым (results[0]).
В переменную location были записаны координаты в виде объекта. Для их использования не нужно создавать координату через google.maps.LatLng, она уже готова, просто используйте эту переменную.

partialmatch - искать ли адреса с частичным совпадением

Поиска по координатам:

var geocoder = new google.maps.Geocoder();
geocoder.geocode({latLng:location}, function (results, status) {
 if (status == 'OK' && results.length > 0) {
  var address = results[0].formatted_address;
 }else{
  // Адрес не найден
 }
});

Переменная address будет содержать адрес в текстовом виде.


Пример с установкой маркеров и получение их адреса с помощью геокодера. Для установки маркера - кликните на карту.

Посмотреть пример

Список статей о Google Maps API смотрите здесь

Google Maps API. Элементы управления и свой интерфейс карты

В этой статье будут описаны все настройки интерфейса карты и примеры установки в карту своих элементов интерфейса

Пример функции загрузки карты с расширенными настройками:

function initialize() {
 var Options = {
  center: new google.maps.LatLng(56, 37),
  zoom: 8,
  disableDefaultUI: false,
  scrollwheel: true,
  zoomControl: true,
  zoomControlOptions: {
   style: google.maps.ZoomControlStyle.LARGE,
   position: google.maps.ControlPosition.TOP_LEFT
  },
  panControl: true,
  mapTypeControl: true,
  scaleControl: true,
  streetViewControl: true,
  overviewMapControl: true,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 var map = new google.maps.Map(document.getElementById("map-canvas"), Options);
}

Описание всех использованных выше настроек:
center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота). Обязательная настройка.
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15). Обязательная настройка.
disableDefaultUI - будет ли отключен интерфейс карты (все последующие элементы).
scrollwheel - будет ли изменяться зум карты колесиком мыши (по-умолчанию - true).
zoomControl - будет ли выведен элемент управления масштабированием.
zoomControlOptions - настройки элемента управления масштабированием. Подобные настройки могут быть у всех элементов управления на карте. Подробнее о этих настройках - ниже.
panControl - будет ли выведен элемент управления панорамированием.
mapTypeControl - будет ли выведен элемент управления типом карты.
scaleControl - будет ли выведен элемент управления масштабом.
streetViewControl - будет ли выведен элемент управления street view.
overviewMapControl - будет ли выведен элемент управления обзорной картой.
mapTypeId - тип карты по-умолчанию (ROADMAP, SATELLITE, HYBRID, TERRAIN).

Так же можно установить дополнительные настройки для каждого элемента управления. В данном случае такие настройки есть у zoomControl. Для остальных элементов настройки нужно соответствующим образом назвать. Сами настройки у всех элементов не отличаются. Вот их описание:
style - размер элемента управления (LARGE, SMALL и DEFAULT (автоматически)).
position - расположение элемента управления (TOP_CENTER, TOP_LEFT, TOP_RIGHT, LEFT_TOP, RIGHT_TOP, LEFT_CENTER, RIGHT_CENTER, LEFT_BOTTOM, RIGHT_BOTTOM, BOTTOM_CENTER, BOTTOM_LEFT, BOTTOM_RIGHT).

С настройками разобрались, теперь добавим свой элемент в интерфейс карты.
Добавьте следующий код в конце функции initialize:

var UIDiv = document.createElement('DIV');
UIDiv.index = 1;
UIDiv.style.display = 'block';
UIDiv.style.padding = '5px';
UIDiv.style.backgroundColor = 'white';
UIDiv.style.borderStyle = 'solid';
UIDiv.style.borderWidth = '1px';
UIDiv.innerHTML = document.getElementById('userUI').innerHTML;
map.controls[google.maps.ControlPosition.TOP_CENTER].push(UIDiv);

Этот код вставит весь код из контейнера с id=userUI в верхнюю центральную часть карты. Добавить в этот контейнер можно все что угодно. Это может быть обычная кнопка, или же таблица (не забудьте добавить фон, т.к. по-умолчанию фон будет прозрачным и за вашим элементом интерфейса сразу начнется карта).
Все стили к элементу можно добавить как показано в примере (UIDiv.style и далее в точности как в коде выше. Используйте обычные переменные CSS).
Как изменять расположение элемента вы уже знаете.

Посмотреть пример

Список статей о Google Maps API смотрите здесь

Google Maps API. Подключение карты.

Начинаю серию статей о гугл картах. Будут описаны все основные функции этой api. Начнем с самого простого - подключить карту к своему сайту.

Для начала нужно загрузить скрипт самой карты. Установите этот код в любое место:

Контейнер, куда будет остановлена карта:

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

Теперь функция загрузки карты:

var map;
function initialize() {
 var Options = {
  center: new google.maps.LatLng(56, 37),
  zoom: 8,
  mapTypeId: google.maps.MapTypeId.ROADMAP
 };
 map = new google.maps.Map(document.getElementById("map_canvas"), Options);
}
google.maps.event.addDomListener(window, 'load', initialize);

center - координата, которая будет использована в качестве центра карты после ее загрузки (56 - широта, 37 - долгота).
zoom - зум над этой координатой (1 - максимальное отдаление, больше значение - сильнее увеличение. Максимальное значение зависит от точки (в городе может быть более 20, в лесу около 15).
mapTypeId - тип карты по-умолчанию (ROADMAP, SATELLITE, HYBRID, TERRAIN).

И все готово. Карта будет выведена на вашем сайте.

Посмотреть пример

В следующей статье вы сможете прочитать о настройках интерфейса карты и добавлении своих элементов в интерфейс.

Список статей о Google Maps API смотрите здесь