Журнал «Компьютерра» № 37 от 10 октября 2006 года, стр. 24
Продолжение следует.
ОПЫТЫ: Где были, мы не скажем, на Google Maps покажем! Как разместить карту путешествия на своем сайте
Автор: Виктор Котов
Прелесть путешествий заключается не только в получаемых впечатлениях, но и в последующем удовольствии от общения с благодарными слушателями. Причем если радость от путешествия — товар штучный, то рассказывать об увиденных красотах можно снова и снова, была бы подходящая компания…
Думаю, каждому рассказчику знакома неадекватная оценка слушателей, для которых фразы «из Москвы в Санкт-Петербург» и «из Москвы в Благовещенск» зачастую оказываются равноценными. К тому же лучше один раз показать, чем постоянно говорить, что там «нечего было смотреть»!
Поэтому к делу документирования путешествия необходимо подойти ответственно, и дополнительные очки можно набрать, взяв на вооружение систему GPS и сервис Google Maps. Перед тем как заглянуть за кулисы Google Maps, ознакомимся с:
• документацией Google Maps API;
• утилитой пересчета координат из градусов в десятичные числа.
Необходимый программно-аппаратный минимум для работы с GMaps (наличие такой незаменимой для современного путешественника вещи, как GPS-приемник, предполагается априори):
• подключение к Интернету;
• браузер с поддержкой JavaScript (любой из современных);
• текстовый редактор с поддержкой Unicode для работы с исходным кодом html-страниц.
Не помешают и базовые знания одного из языков программирования (переменные, массивы, управляющие структуры, циклы), языков разметки HTML и XML, но в случае отсутствия таковых знаний читателя выручат терпенье и труд, которые «все перетрут».
Отправляемся на 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;v=2&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
Вследствие принципа относительности центром мира для нас будет именно то место планеты, с которого мы начинаем путешествие. Ниже приведен код страницы, отображающей определенную область карты вокруг него. Отметим самое важное:
• в 6-й строке вместо слова «КЛЮЧ» укажите конкретный код, полученный при регистрации в сервисе;
• в 14-й строке укажите географические координаты, определяющие положение центра карты (в нашем примере используются координаты центра Москвы);
• размеры карты в точках указаны в 9-й строке, там же задается и имя элемента страницы, в котором будет отображена карта (в примере kremlin), далее оно используется в 13-й строке при создании экземпляра карты.
Для удобства навигации добавим на страницу (после 14-й строки) стандартные элементы управления:
• панорамирование и масштабирование: map.add— Control(new GSmallMapControl());
• вид карты: map.addControl(new GMapTypeControl()).
И вообще, все дальнейшие строки с метками необходимо помещать в пространство между 14-й и 15-й строчками (перед фигурной скобкой). То, что должно получиться в результате, можно увидеть на рис. 1.
Так как во время путешествий вычислительные ресурсы и возможности доступа в Интернет обычно ограничены, рекомендую подготовительную часть работы (регистрация в сервисе, создание HTML-страницы) проделать дома, а в пути лишь обновлять XML-файл. Тем самым значительно снижаются требования к аппаратно-программной части: вам понадобится лишь текстовый редактор и наличие возможности загружать обновленный XML-файл на свой сервер (обычно по ftp). Ну а я, чтя традиции программистского цеха, заложил в последнюю карту незамысловатое «пасхальное яйцо». Думаю, пытливый читатель его отыщет, руководствуясь информацией приспешника Шер-Хана из советского мультфильма «Маугли» о направлении их движения перед нашествием диких собак…
Положим, вы гуляли по городу, стране, миру с 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);