В этой заметке мы разберем данный пример подробно и добавим к нему элементы управления картой.
Привожу код примера:
<!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&v=2&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>
Если загрузить страницу с примером в браузере, то мы увидим следующее
Давайте рассмотрим исходный код.
Фрагмент кода:
<script src=”http://maps.google.com/maps?file=api&v=2&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. По умолчанию этот элемент располагается в левом верхнем углу карты.
GSmallMapControl — более мелкий элемент панорамирования и масштабирования Карт Google. По умолчанию этот элемент располагается в левом верхнем углу карты.
GSmallZoomControl — небольшой элемент управления масштабом (без панорамирования), который применяется, например, в небольших окнах с увеличенным изображением карты, показывающих этапы маршрутов проезда на Картах Google.
GScaleControl — масштабная линейка
GMapTypeControl — кнопки для переключения между типами карты (например, "Карта" и "Спутник").
GHierarchicalMapTypeControl — вложенные кнопки и элементы меню для размещения средств выбора различных типов карт.
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);
Загружаем страницу в браузере и наблюдаем следующее
Привожу полный текст кода:
<!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&v=2&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 поток в этом блоге?
ОтветитьУдалитьВидела что-то похожее в англоязычных блогах, в Рунете про такое как-то не особо часто посты увидишь.
ОтветитьУдалитьДа http://webmap-blog.ru/?feed=rss2
ОтветитьУдалитьСкажите, а у вас есть RSS поток в этом блоге?
ОтветитьУдалить