Журнал «Компьютерра» N 37 от 10 октября 2006 года

Отправляемся на www.google.com/apis/maps/signup.html. Процедура регистрации необременительна, она не требует ни наличия аккаунта Gmail, ни утверждения сотрудниками Google. Просто в форме на странице задаем адрес вашего сайта, на котором будет располагаться карта путешествий, ставим галочку в пункте «Соглашение с условиями предоставления сервиса», жмем кнопку «Generate API Key» и получаем ключ, который вам понадобится для создания своих HTML-страниц с Google-картами.

1. ‹!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”›

2. ‹html xmlns=”http://www.w3.org/1999/xhtml”›

3. ‹head›

4. ‹meta http-equiv=”content-type” content=”text/html; charset=utf-8”/›

5. ‹title›Google Maps - Кругокремлевское путешествие. Вехи большого пути!‹/title›

6. ‹script src=”http://maps.google.com/maps?file=api amp; amp;v=2 amp;amp;key=КЛЮЧ”

type=”text/javascript”› ‹/script›

7. ‹/head›

8. ‹body onunload=”GUnload()”›

9. ‹div id=”kremlin” style=”width: 500px; height: 300px”›‹/div›

10. ‹script type=”text/javascript”›

11. //‹![CDATA[

12. if (GBrowserIsCompatible()) {

13. var map = new GMap2(document.getElementById (“kremlin”));

14. map.setCenter(new GLatLng(55.752,37.616), 13);

‹!- при желании здесь можно разместить элементы управления GMaps -›

15. }

16. //]]›

17. ‹/script›

18. ‹/body›

19. ‹/html› www.vkph.com/t2006/t2006_01.html

Шаг 2. Выбираем центр мира

Вследствие принципа относительности центром мира для нас будет именно то место планеты, с которого мы начинаем путешествие. Ниже приведен код страницы, отображающей определенную область карты вокруг него. Отметим самое важное:

• в 6-й строке вместо слова «КЛЮЧ» укажите конкретный код, полученный при регистрации в сервисе;

• в 14-й строке укажите географические координаты, определяющие положение центра карты (в нашем примере используются координаты центра Москвы);

• размеры карты в точках указаны в 9-й строке, там же задается и имя элемента страницы, в котором будет отображена карта (в примере kremlin), далее оно используется в 13-й строке при создании экземпляра карты.

Для удобства навигации добавим на страницу (после 14-й строки) стандартные элементы управления:

• панорамирование и масштабирование: map.add- Control(new GSmallMapControl());

• вид карты: map.addControl(new GMapTypeControl()).

И вообще, все дальнейшие строки с метками необходимо помещать в пространство между 14-й и 15-й строчками (перед фигурной скобкой). То, что должно получиться в результате, можно увидеть на рис. 1.

Напутствие начинающим картографам

Так как во время путешествий вычислительные ресурсы и возможности доступа в Интернет обычно ограничены, рекомендую подготовительную часть работы (регистрация в сервисе, создание HTML-страницы) проделать дома, а в пути лишь обновлять XML-файл. Тем самым значительно снижаются требования к аппаратно-программной части: вам понадобится лишь текстовый редактор и наличие возможности загружать обновленный XML-файл на свой сервер (обычно по ftp). Ну а я, чтя традиции программистского цеха, заложил в последнюю карту незамысловатое «пасхальное яйцо». Думаю, пытливый читатель его отыщет, руководствуясь информацией приспешника Шер-Хана из советского мультфильма «Маугли» о направлении их движения перед нашествием диких собак…

Шаг 3. Точки притяжения

Положим, вы гуляли по городу, стране, миру с GPS и, увидев что-либо примечательное, аккуратно заносили координаты этого места вместе с комментариями… Самое время нанести эти точки на карту!

Для каждой из них надо составить три строчки:

а. Объявить переменную, которой будут присвоены географические координаты метки.

б. Объявить переменную, которая будет указывать на вновь созданный объект-метку.

в. Отобразить метку на карте.

Вот как это выглядит в коде:

1. var Moscow_point = new GLatLng(55.752,37.616);

2. var Moscow = new GMarker(Moscow_point);

3. Map.addOverlay(Moscow);

Но чтобы сделать метку более информативной для посетителей сайта, добавим всплывающую подсказку с ее названием, которая будет отображаться каждый раз при наведении курсора мышки (рис. 2).

1. var Moscow_point = new GLatLng(55.752,37.616);

2. var Moscow = new GMarker(Moscow_point, {title:”Москва”});

3. Map.addOverlay(Moscow);

У созданной нами метки - стандартная иконка, но ее легко заменить своей, оригинальной (например, что-то говорящей о событии):

1. var MoscowIcon = new GIcon();

2. MoscowIcon.iconSize=new GSize(40,48); ‹!- размер иконки в пикселах -›

3. MoscowIcon.iconAnchor=new GPoint(20,48);

4. MoscowIcon.infoWindowAnchor=new GPoint(20,0);

5. MoscowIcon.image=”http://www.vkph.com/team/moscow.png”; ‹!- где взять файл -›

6. var Moscow_point = new GLatLng(55.752,37.616);

7. var Moscow = new GMarker(Moscow_point, {icon: MoscowIcon, title:”Москва”});

8. GEvent.addListener(Moscow, “click”, function() {

9. Moscow.openInfoWindowHtml(“Москва - столица нашей Родины!”);

10. });

11. Map.addOverlay(Moscow); www.vkph.com/t2006/t2006_03.html