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

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

В этой заметке мы разберем данный пример подробно и добавим к нему элементы управления картой.

Привожу код примера:

<!DOCTYPE html “-//W3C//DTD XHTML 1.0 Strict//EN”“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

<html xmlns=”http://www.w3.org/1999/xhtml”>

<head>

<meta http-equiv=”content-type” content=”text/html; charset=utf-8?/>

<title>Пример API Карт Google на языке JavaScript </title>

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ”
type=”text/javascript”></script>

<script type=”text/javascript”>function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(”map_canvas”));

map.setCenter(new GLatLng(56.32811,44.0), 10);

}

}

</script></head>

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

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

</body>

</html>

Если загрузить страницу с примером в браузере, то мы увидим следующее

Простой пример карты Google

Давайте рассмотрим исходный код.

Фрагмент кода:

<script src=”http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ”
type=”text/javascript”></script>

содержит URL-адрес расположения  файла JavaScript, содержащего все символы и определения, необходимые для работы с API Карт Google.

В нем также содержится ключ к API, полученный вами во время регистрации.

Для отображения карты на странице для неё необходимо зарезервировать место, это делает строка <div id=”map_canvas” style=”width: 500px; height: 300px”></div> в разделе BODY страницы.

Мы создаем элемент div с именем map_canvas и тут же с помощью стилей задаем его размер.

Для представления карты используется класс GMap2.

Объекты этого класса определяют единственную карту на странице. (Можно создать несколько экземпляров этого класса — каждый объект будет определять отдельную карту на странице.)

В нашем примере за это отвечает строка

var map = new GMap2(document.getElementById(”map_canvas”));

Создавая новый экземпляр карты, вы указываете DOM-узел на странице (обычно это элемент div) в качестве контейнера для карты. Узлы HTML являются дочерними для объекта document JavaScript, и мы получили ссылку на этот элемент с помощью метода document.getElementById().

Данный код определяет переменную (с именем map) и назначает ее новому объекту GMap2.

После создания карты мы должны её инициализировать.

Это делается в следующей строке

map.setCenter(new GLatLng(56.32811,44.0), 10);

Инициализация осуществляется с помощью метода setCenter() для карт. Для метода setCenter() необходимо указать координату GLatLng и коэффициент масштаба, а сам метод должен быть вызван до выполнения каких-либо операций с картой, в том числе до настройки атрибутов самой карты.

Загрузка карты выполняется в строке <body onload=”initialize()” onunload=”GUnload()”>

В процессе обработки HTML-страницы строится объектная модель документа (DOM), а все внешние изображения и сценарии встраиваются в объект document. Чтобы карта появлялась на странице лишь после полной загрузки последней, необходимо выполнить функцию, которая формирует объект GMap2, как только элемент <body> получит сообщение onload. Таким образом можно избежать непредсказуемого поведения и улучшить контроль над построением карты.

Атрибут onload — это пример обработчика событий.

Теперь рассмотрим какие элементы управления можно добавлять на карту.

API Карт поставляется вместе с набором встроенных элементов управления, которые можно использовать для карт:

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

GLargeMapControl

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

GSmallMapControl

GSmallZoomControl — небольшой элемент управления масштабом (без панорамирования), который применяется, например, в небольших окнах с увеличенным изображением карты, показывающих этапы маршрутов проезда на Картах Google.

GSmallZoomControl

GScaleControl — масштабная линейка

GScaleControl

GMapTypeControl — кнопки для переключения между типами карты (например, «Карта» и «Спутник»).

GMapTypeControl

GHierarchicalMapTypeControl — вложенные кнопки и элементы меню для размещения средств выбора различных типов карт.

GHierarchicalMapTypeControl - 1GHierarchicalMapTypeControl-2

GOverviewMapControl — свертываемая обзорная карта в углу экрана.

GOverviewMapControl

Все эти элементы управления созданы на основе объекта GControl.

Карты Google поддерживают следующие типы карт:

G_NORMAL_MAP — обычная двумерная карта.

G_SATELLITE_MAP —карта со снимками со спутника.

G_HYBRID_MAP — комбинация снимков со спутника  и слоя обычной карты с наиболее важными объектами (дорогами, названиями городов).

G_PHYSICAL_MAP — физическая карта с информацией о рельефе местности.

Вы можете определить собственные настраиваемые типы карт, если у вас есть набор снимков или наложений.

По умолчанию API Карт Google поддерживает три типа карт: G_NORMAL_MAP, G_SATELLITE_MAP и G_HYBRID_MAP.

Для добавления элементов управления на карту используется метод addControl() объекта GMap2.

Давайте добавим на нашу карту следующие элементы управления: GLargeMapControl и GMapTypeControl.

Для этого необходимо добавить две строчки:

map.addControl(new GLargeMapControl());map.addControl(new GMapTypeControl());

после строки map.setCenter(new GLatLng(56.32811,44.0), 10);

Загружаем страницу в браузере и наблюдаем следующее

Пример карты Google с элементами управления

Привожу полный текст кода:

<!DOCTYPE html «-//W3C//DTD XHTML 1.0 Strict//EN»»http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<html xmlns=»http://www.w3.org/1999/xhtml»>

<head>

<meta http-equiv=»content-type» content=»text/html; charset=utf-8″/>

<title>Пример API Карт Google на языке JavaScript </title>

<script src=»http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAACHCJdlgAEGcD_flKUFEmVhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTeukKcKHF3ezmjTB0q6gzSBmoIUQ»

type=»text/javascript»></script>

<script type=»text/javascript»>

function initialize() {if (GBrowserIsCompatible()) {

var map = new GMap2(document.getElementById(«map_canvas»));

map.setCenter(new GLatLng(56.32811,44.0), 10);map.addControl(new GLargeMapControl());

map.addControl(new GMapTypeControl());

}}

</script></head>

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

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

</body>

</html>

Более подробную информацию по работе с элементами управления Вы можете получить по адресу http://code.google.com/intl/ru/apis/maps/documentation/controls.html

  • Гость: Скажите, а у вас есть RSS поток в этом блоге?
  • Гость: Да <a href="http://webmap-blog.ru/?feed=rss2" rel="nofollow">http://webmap-blog.ru/?feed=rss2</a>
  • Гость: Видела что-то похожее в англоязычных блогах, в Рунете про такое как-то не особо часто посты увидишь.
  • Гость: Скажите, а у вас есть RSS поток в этом блоге?