Схема проезда с помощью карт от Google

Опубликовано 13.03.10 / Автор: Артём Вечеров

Для создания простейшей схемы проезда с помощью GoogleMaps вам необходимо следующее:

1. Создать аккаунт Google - https://www.google.com/accounts/NewAccount

2. Получить так называемый Maps API key (он индивидуален для каждого домена, на котором вы намереваетесь использовать карту Google) - http://www.google.com/apis/maps/signup.html (примечание: пока вы пробуете создать карту на локальном компьютере, ключ не нужен).

3. Теперь вставьте в <head> страницы вашего сайтаMaps API JavaScript:

<script  src="http://maps.google.com/maps?file=api&v=2&key=_your_Maps_API_key_"
type="text/javascript">
</script>

где “__your_Maps_API_key_” означает тот самый ключик, который вы получили на странице получения ключа к API Карт Google.

4. Теперь добавьте функцию, чтобы создать объект карты и задать её центр:

<script  type="text/javascript">
function  initialize() {
  if  (GBrowserIsCompatible()) {
      var  map = new GMap2(document.getElementById("map_canvas"));
      map.setCenter(newGLatLng(55.752,37.609), 16);
      // а вот здесь, если нужно, задаются дополнительные элементы  управления
      }
  }
</script>

где 55.752,37.609- координаты центра, а 16 – коэффициент масштабирования карты.

5. Теперь необходимо задать инициализацию объекта карты в теге body на событии onload и очистку памяти на onunload. Для этого добавляем:

<body  onload="initialize()" onunload="GUnload()">

6. Вставляем в страницу элемент, который и будет содержать нашу карту, параметрами widthиheightзадаём его размеры:

<div id="map_canvas" style="width: 500px; height: 300px"></div>

Вуаля, вот она, наша карта. Но пока она мало функциональна. Подумаем, что нам ещё необходимо?

Добавление элементов управления

Для добавления элементов управления вызываем метод:

map.setUIToDefault();

Он устанавливает пользовательский интерфейс карты (обработку ввода и набор элементов управления) в конфигурацию по умолчанию, включая элементы панорамирования и масштабирования, выбор типов карты, и т. д.Если карта равна или больше 400 на 300 пикселей, то добавляются следующие элементы управления:

GMapTypeControl, содержащий набор типов карт G_DEFAULT_MAP_TYPES;
GLargeMapControl3D, обеспечивающий полнофункциональное масштабирование/панорамирование;
GScaleControl, отображающий масштаб карты

Если же ширина карты менее 400 пикселей или высота менее 300 пикселей, то добавятся нижеуказанные элементы управления:

GMenuMapTypeControl с раскрывающимся меню типов карт G_DEFAULT_MAP_TYPES;
GSmallZoomControl3D, обеспечивающий функцию масштабирования (элемент панорамирования не добавляется).

Такой набор элементов управления занимает меньше места на экране, что весьма удобно при использовании карт малого размера.

Итак, теперь наша карта выглядит следующим образом:

Добавление маркера с окном-подсказкой

1. Создать маркер с координатами метки (в нашем примере это будет Российская Государственная библиотека)

var marker = newGMarker(newGLatLng(55.752,37.609));

2. Отобразить маркер

map.addOverlay(marker);

Теперь карта будет содержать маркер, указывающий на выбранный нами объект, а именно – библиотеку.

3. Добавление окна-подсказки

map.openInfoWindow(newGLatLng(55.752,37.609), document.createTextNode("Российская Государственная библиотека"));

Теперь на карте для указателя появляется окно-подсказка с надписью «Российская Государственная библиотека».

Панель поиска Google

Чтобы пользователь, используя нашу карту, мог легко найти другие интересующие его объекты, разместим на карте панель поиска Google:

map.enableGoogleBar();

Карта будет выглядеть следующим образом:

Создание схемы проезда

Для того, чтобы нарисовать схему проезда, нам потребуется программа интерактивного кодирования ломаных линий. Идём на http://code.google.com/intl/ru-RU/apis/maps/documentation/polylineutility.html Находим нужное нам место на карте:

Начинаем выстраивать схему проезда, выставляя точки. Выставленная точка подтверждается либо кнопкой «Добавить точку», либо просто нажатием клавиши “Enter”.

Обратите внимание, что сбоку автоматически заполняется поле «Список точек», а внизу - «Закодированная ломаная линия» и «Закодированные коэффициенты».

Нарисуем путь от ст. метро «Библиотека им. Ленина».

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

varencodedPolyline  = new GPolyline.fromEncoded({
	color: "#FF0000",
	weight: 10,
	points: "cxgsIqppdFsAs@mBaAy@Be@~A",
	levels: "BBBBB",
	zoomFactor: 32,
	numLevels: 4
});
map.addOverlay(encodedPolyline);

где color – цвет линии, а weight - толщина линии.

А теперь начертим путь от ст. метро «Александровский сад».

На нашей карте, как мы видим в браузере, станция метро не отображается, поэтому увеличим коэффициент масштабирования:

Теперь с помощью программы интерактивного кодирования ломаных линий нарисуем путь:

Добавим полученные данные в код страницы:

varencodedPolyline  = new GPolyline.fromEncoded({
    color: "#0106eb",
    weight: 10,
    points: "eahsIgwpdFQ|E",
    levels: "BB",
    zoomFactor: 32,
    numLevels: 4
});
map.addOverlay(encodedPolyline);

Готово: