Стандартные элементы управления веб-картой

В предыдущей статье «Начинаем использование API Google карт» я рассказал о добавлении веб-карты Google на вашей странице.

Сейчас мы рассмотрим предыдущий пример более подробно и я расскажу вам о добавлении элементов управления этой картой. А именно:

1. Увеличение и уменьшение области просмотра.
2. Масштабная линейка.
3. Переключение типов карты.
4. Свертываемая обзорная карта в углу экрана.

0. Предыдущий пример.










Рассмотрим все по порядку.
— содержит url файла, который включает в себя API Google map.

— объявляем место отображения карты.

— при загрузке страницы, запускаем функцию показа нашей карты.
О самом javascript коде я показал в комментариях к коду.

Далее будем использовать только этот javascript код, для добавления элементов управления.

Для добавления всех функций управления используется:
{объект карты}.addControl({функция});

1. Увеличение и уменьшение области просмотра.
Имеется три вида функции увеличения и уменьшения масштаба:
new GLargeMapControl() — крупный элемент масштабирования Карт Google. По умолчанию этот элемент располагается в левом верхнем углу карты.

new GSmallMapControl() — более мелкий элемент масштабирования Карт Google. По умолчанию этот элемент располагается в левом верхнем углу карты.

new GSmallZoomControl() — небольшой элемент управления масштабом.

Вот, как могут быть применены эти функции:

function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GLargeMapControl());
}
}


Еще есть два варианта, внешне измененных, вывода элементов управления. Это GLargeMapControl3D и GSmallZoomControl3D.

2. Масштабная линейка.
Для добавления масштабной линейки используют функцию GScaleControl().


function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GScaleControl());
}
}


3. Переключение типов карты.
Для переключения типов карт используют функцию GMapTypeControl(). Она выглядит примерно вот так:

Предусмотрен еще один вариант, GHierarchicalMapTypeControl(). Он заменяет «спутник» и «гибрид» одним пунктом «спутник». Который, при выборе, дает возможность выбора.
function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GMapTypeControl());
}
}

4. Свертываемая обзорная карта в углу экрана.
Для отображения краткой обзорной карты в углу экрана используется функция
OverviewMapControl().

function initialize(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(52.424198,30.962219), 10);
map.addControl(new GOverviewMapControl());
}
}

Использование данных функций не является обязательным. Вы можете выбирать, что отображать поверх вашей карты.

Посмотреть пример всех, выше перечисленных функций

Дополнительную информацию об элементах смотрите в API документации:
http://code.google.com/intl/ru/apis/maps/documentation/controls.html