http://sulfurzona.com/
News
Service
Magazine
Software (Battle City Game, Wallpaper manager, Superpad, VG-NOW, Puzzle Game, Netler Internet Browser, ..)
Dune Game (Dune III, Dune IV, Cheats, Forum, ..)
Games free
Turbo Pascal (Assembler, Docs, Sources, Debbugers, ..)
Books (Docs for developers)
Forum
Guest book
Компьютерная диагностика двигателя автомобиля (адаптер К-линии)Компьютерная диагностика двигателя автомобиля (адаптер К-линии)
 
 
Прием психолога
Часы приема. Правила приема
psyxofaktor.ru
http://salon.kawaicat.ru
Натуральные и искусственные парики для женщин и мужчин, шиньоны, накладки
salon.kawaicat.ru
 
 

Google Maps: строим карты сами

  

Встраиваем Google Maps на сайт

 
Google Maps: строим карты самиВоспринимая на слух название города Адлер, невольно возникают ассоциации с Германией, а города Джанкой с Таджикистаном. Но, чтобы точно знать, где находятся эти и другие замечательные уголки нашей прекрасной и, пока ещё, цветущей планеты, нам всегда поможет карта или глобус.
 
Замечательные и талантливые люди из Google подарили нам Google Map – карту планеты, где можно найти практически любой населённый пункт. Даже наша родная Украина довольно прилично детализирована в этой системе.
 
Но всё это лишь на сервисе Google. А как аналогичную карту встроить, например, на свой сайт? Да проще некуда. Надо лишь разбираться в HTML и Javascript, а остальное за Google Map API.
 

Google Maps API

 
Google Map API – сервис, предоставляемый Google для встраивания и работы с картами на вашем сайте. Позволяет отмечать точки на карте (ставить маячки), а так же производить поиск и просмотр карты непосредственно на сайте.
 
Если желаете быстро войти в курс дела, рекомендую почитать http://wiki.pws.ru/index.php/Google_Map_API. Полная справка по Google Map API (увы, почему-то на английском) http://code.google.com/intl/ru/apis/maps/documentation/javascript/v2/reference.html. Справка на русском в PDF: www.sterno.ru/rit2008/googlemaps/Google-Maps-cheet-sheet.pdf. Исчерпывающая официальная документация на русском
http://code.google.com/intl/ru/apis/maps/documentation/mapplets/guide.html
 

С чего начать?

 
Чтобы работать с картами Google на своем сайте, нужно получить ключ API. Для этого сначала нужно зарегистрировать аккаунт на Google (если это ещё не сделано), а затем перейти на страницу http://code.google.com/intl/ru_ALL/apis/maps/signup.html.
 
На этой странице нужно согласиться с условиями использования (поставить галочку) и указать адрес сайта, на котором планируется использовать Map API. В результате будет выдан ключ и показан пример использования Google Map API.
Ключ может иметь такой вид:
 
ABQIAAAA4WH5PIrQfCRa762-p1YVXxSUgxVXCnZeaclVeWKDOWdbdybHqhSH5l_c0C-Ts0Vbu71rPc-0dgtnoA
 
Полученный при регистрации ключа пример можно использовать на сайте для проверки правильной работы с Google Map.
 

Добавим карту на свой сайт

 
Предположим, что аккаунт на Google мы с вами уже завели. Кстати, он нам пригодится и для публикаций видео на YouTube. Также мы получили и ключ для работы с Google Map API.
 
Следует отметить, что если полученный для одного сайта ключ применять на другом сайте, то карта всё равно будет работать, но при загрузке веб-страницы с картой будет появляться соответствующее сообщение “Для этого веб-сайта требуется другой ключ API Карт Google. Новый можно получить на странице http://code.google.com/apis/maps/signup.html”.
Итак, начнём и для этого составим следующую веб-страничку:
 
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1251"/>
<script src="http://maps.google.com/maps?file=api&v=2&sensor=true_or_false&key=наш_ключ" type="text/javascript"></script>
<script type="text/javascript">
function GMapInit() {
 // Инициализация класса Google Maps и расположение карты в слое GMapContainer
 var map = new GMap2(document.getElementById("GMapContainer"));
 // Задаем центр выводимой области карты
 // Широта, долгота и коэффициент увеличения цента (обязательный параметр) 
 
 map.setCenter(new GLatLng(50.46275,30.522079), 11);  
}

</script>
 
</head>
<body onload="GMapInit()">
<div style="width: 700px; height: 500px" id="GMapContainer"></div>
</body>
</html>
 
В теге META настоятельно рекомендую указывать кодировку. Затем в теге SCRIPT подключаем библиотеку Google Map API с указанием нашего ключа. После этого начинаем программировать сами.
 
Google Maps: строим карты сами 
Рис. 1
 
Как можно видеть в примере (рис. 1), наша функция GMapInit вызывается при загрузке нашей веб-страницы и должна выполнять инициализацию нашей карты. Поскольку карту надо размещать где-то на веб-странице, то для неё следует предусмотреть место (контейнер).
Таким местом в данном случае нам послужит тег DIV с ID=”GMapContainer”.
 
Функция GMapInit выполняет инициализацию карты и привязку ее к контейнеру командой GMap2, в результате вызова которой получаем экземпляр объекта map, с которым будем работать далее.
 
Далее, необходимо задать исходный (видимый) сектор на карте. Для этого командой map.setCenter указываем координаты (широту и долготу) места на планете и коэффициент приближения (масштаб).
 
Так, для города Киева ставим координаты 50.46275,30.522079. Чем больше коэффициент, тем больше масштаб и тем ближе к зрителю объекты на местности.
 

Элементы управления

 
Кое-что у нас уже получается. Но по нашей карте можно только перемещаться в двумерной координатной системе. А как насчёт масштабирования или переключения на спутниковый режим или гибридный?
 
Их есть у меня, вернее у Google Map API ;)
Как только мы создали карту командой GMap2, вслед за ней можем включить элементы навигации по карте:
 
// Блок навигации и масштабирования карты
map.addControl(new GLargeMapControl());
 
Если же нам нужно что-то покрасивее и функциональнее (масштабирование колёсиком мышки), то:
 
// Навигация с анимацией при масштабировании колёсиком мышки
map.setUIToDefault();
 
Чтобы можно было переключаться между режимами отображения карты (Карта, Спутник, Гибрид), добавляем следующую команду:
 
// Кнопки режима карты (Карта, Спутник, Гибрид)
map.addControl(new GMapTypeControl());
 
Что делать, если необходимо задать исходный режим отображения карты? Для этого нам понадобится, например, команда:
 
// Включаем тип карты "Спутник"
map.setMapType(G_SATELLITE_MAP);
 
Если в данной команде указать в качестве аргумента константу, например, G_HYBRID_MAP, то получим гибридную карту, т.е. поверх спутниковой будут наложены транспортные магистрали с обычной карты.
 
Режим обычной карты включается константой G_NORMAL_MAP.
Ну а чтобы желаемый город или улицу можно было найти по названию, можно добавить панель поиска Google прямо на карту:
 
// Панель Google для поиска улиц на карте
map.enableGoogleBar();
 
В итоге получим нечто этакое (рис. 2) в спутниковом режиме с элементами навигации и поиска. Как видно на иллюстрации, национальный спортивный комплекс Олимпийский в Киеве ещё далёк от готовности принимать Чемпионат Европы по футболу 2012 – всюду какие-то вагончики, грейдеры, краны, грузовички,… L
 
Google Maps: строим карты сами 
Рис. 2
 

Добавляем маркер на карту

 
Карта уже есть, но на ней ничего не отмечено. Давайте отметим штаб-квартиру нашего журнала - город Киев. Только не спрашивайте, как я определил точные координаты.
 
Для определения координат я использовал систему администрирования (своего рода карта с прицелом и отображением точных координат прицела, рис. 3), которую в 2009 году разработал для сайта http://www.netbaryerov.org.ua/map/index.php (рис. 4).
 
Google Maps: строим карты сами 
Рис. 3
 
Google Maps: строим карты сами 
Рис. 4
 
Чтобы добавить маркер, после вызова команды map.setCenter в Java-скрипт поставим следующие строки:
 
// Задаем переменную, содержащую настройки создаваемого маркера 
var markerOptions = { title:"Это центр Киева" };
// Устанавливаем маркер в заданные координаты
var marker = new GMarker(new GLatLng(50.417358,30.475594), markerOptions);
// Устанавливаем обработчики события нажатия на маркер
GEvent.addListener(marker, "click", function() {
   // Открытие информационного окна с текстом
   marker.openInfoWindowHtml("Офис журнала «Компьютер» <BR> ул.П.Радченко,4");
});
map.addOverlay(marker);
 
Параметр title будет обеспечивать появление выпадающей подсказки при наведении курсора мыши на маркер. Командой GMarker создаём экземпляр объекта маркера. Собственно, комментарии говорят сами за себя. После того, как все настройки маркера сделаны и к нему привязано событие (хотя это и не обязательно) командой GEvent.addListener, маркер можно добавить на карту командой map.addOverlay.
 
При клике на маркере будет появляться информационное окно с текстом, указанным в команде marker.openInfoWindowHtml (рис. 5).
 
Google Maps: строим карты сами 
Рис. 5
 

Своя картинка для маркера

 
Создавать маркер стандартного вида мы уже научились. Но как это бывает, возникает необходимость выделить маркер на карте. Для этого следует нарисовать картинку, желательно в формате PNG со слоем прозрачности. В следующем коде:
 
var myIcon = new GIcon();
// задаем файл с изображением значка
myIcon.image = "comp_marker.png";
myIcon.iconSize = new GSize(51, 64); // размер значка
myIcon.iconAnchor = new GPoint(51, -64); // смещение значка от точки
myIcon.infoWindowAnchor = new GPoint(45, 5); // смещение информационного окна
// После этого определяем объект GMarkerOptions
var markerOptions = { icon:myIcon };
map.addOverlay(new GMarker(new GLatLng(50.417358,30.475594), markerOptions));
 
командой GIcon мы создаём экземпляр объекта myIcon картинки для маркера. Затем указываем имя файла картинки. В коде веб-страницы путь к файлу лучше указывать полный, например, http://www.mysite.com/icon.png.
 
Картинка может иметь любой размер, но логичнее делать его разумным, например, в пределах 64x64 пикселя. В нашем случае картинка comp_marker.png (рис. 6) имеет размер 51x64 (задаём командой GSize) в свойстве myIcon.iconSize.
 
Google Maps: строим карты сами 
Рис. 6
 
Исходя из её размеров командой GPoint в свойстве myIcon.iconAnchor задаём смещение значка маркера в пикселях от точки на карте, соответствующей координатам маркера, чтобы маркер не перекрывал собой точку, на которую указывает. В нашем случае человечек-компьютер указывает рукой на точку.
 
Для корректного позиционирования информационного окна задаём смещение (в пикселях) в свойстве myIcon.infoWindowAnchor. Для обычного стандартного маркера это смещение соответствует (5,5).
 
Далее командой map.addOverlay добавляем маркер на карту. При этом налету создаём экземпляр маркера и передаём его в качестве аргумента. То, что должно получиться, выглядит, как показано на рис. 7.
 
Google Maps: строим карты сами
Рис. 7
 
Следует учесть, что в старых версиях Internet Explorer могут возникнуть проблемы с отображением полупрозрачных PNG. Для этого есть методики устранения проблемы.
 

Ставим маркеры пачками

 
Один маркер – это хорошо. Но этим, думаю, редко, кто пожелает ограничиваться. Тогда предлагаю рассмотреть следующий пример. Как и в предыдущих примерах, уже известный код инициализации опускаю. Во всё том же теге SCRIPT объявляем ассоциативный массив.
На самом деле, тем нашим читателям, которые знакомы с языком Javascript, должно быть известно, что в нём отсутствует такое понятие как ассоциативный массив, но имеется возможность объявлять объекты с полями.
 
Как раз такой массив объектов и показан в следующем примере. Но это не помешает нам использовать этот массив city в качестве ассоциативного:
 
// Массив с данными для маркеров 
var city = [
 {'x' : 50.46275, 'y' : 30.522079, 'comment' : 'город Киев'},
 {'x' : 50.247205, 'y' : 28.652344, 'comment' : 'город Житомир'},
 {'x' : 49.84861, 'y' : 24.01062, 'comment' : 'город Львов'},
 {'x' : 49.592909, 'y' : 34.557495, 'comment' : 'город Полтава'}
];
// Функция создания маркера с указанными параметрами 
function createMarker(x, y, comment) {
 // Создаем точку на карте с координатами x и y 
 var point = new GLatLng(x, y); 
 // Создаем маркер в указанной точке 
 var marker = new GMarker(point); 
 // Добавляем обработчик события нажатия на маркер 
 GEvent.addListener(marker, "click", function() { 
 // При нажатии открывается информационное окно с заданным текстом 
 marker.openInfoWindowHtml(comment); 
 }); 
 return marker; 
 
После массива объявлена функция createMarker, которая поможет сделать процедуру создания маркера более прозрачной и лаконичной. Теперь нам остаётся лишь добавить цикл перебора элементов всего массива маркеров city в конец тела функции GMapInit:
 
// Добавляем маркеры
for(i in city) map.addOverlay(createMarker(city[i]['x'],city[i]['y'],city[i]['comment'])); 
 
Получилась вот такая карта Украины (рис. 8).
 
Google Maps: строим карты сами 
Рис. 8
 

Определение координат

 
Чтобы удобно и оперативно определять координаты объектов на карте, можно сделать специальную карту с отображением “прицела” в центре контейнера карты и с отслеживанием перемещения карты.
 
Для этого может послужить такая функция Google Map API как map.getCenter, позволяющая получить геометрические координаты центра карты в величинах типа GLatLng. Аналогичным образом можно отслеживать и масштаб функцией map.getZoom.
 
Ну а пока такой специальной карты у вас нет, можете воспользоваться таблицей 1, где перечислены координаты областных центров Украины, либо зайти на сайт www.astrolab.ru/cgi-bin/sdg.cgi и получить координаты любого населённого пункта планеты, воспользовавшись алфавитным указателем.
 
Таблица 1. Координаты областей Украины с выравниванием по областным центрам
Область
Широта
Долгота
Киевская
50.448643
30.522117
Винницкая
49.23105053355255
28.473472595214844
Волынская (Луцк)
50.75763563148197
25.351810455322266
Донецкая
48.00852989514704
37.80773162841797
Днепропетровская
48.469279317167164
35.032310485839844
Житомирская
50.258949209694826
28.67259979248047
Закарпатская (Ужгород)
48.61991714878391
22.296581268310547
Запорожская
47.83874021204476
35.15350341796875
Ивано-Франковская
48.91708480384719
24.714431762695312
Кировоградская
48.50682443050761
32.25088119506836
Крым (Симферополь)
44.980342
34.057617
Луганская
48.56308998729519
39.31663513183594
Львовская
49.835768138126134
24.029159545898438
Николаевская
46.956706848615305
32.01948165893555
Одесская
46.458200503067076
30.710735321044922
Полтавская
49.588235750419855
34.5549201965332
Ровненская
50.62365733358117
26.248226165771484
Сумская
50.913207747893566
34.7966194152832
Тернопольская
49.55450504614626
25.59986114501953
Харьковская
49.98434462650245
36.269989013671875
Херсонская
46.64495810629936
32.60793685913086
Хмельницкая
49.41465875985922
26.99169158935547
Черкасская
49.42180572416235
32.05432891845703
Черновицкая
48.28707663414987
25.93048095703125
Черниговская
51.49987377454688
31.276874542236328
 

А как же Луна, Марс и другие планеты?

 
Действительно, а как же другие планетоиды нашей солнечной системы? Да нет ничего проще! Тем более, что специалисты Google уже давно позаботились и об этом ;)
Для этого вам понадобятся знания, которые вы получили уже в этой статье и новый код уже знакомой вам функции GMapInit:
 
function GMapInit() {
var map = new GMap2(document.getElementById("GMapContainer"), { mapTypes : G_MOON_MAP_TYPES });
map.addControl(new GLargeMapControl());
map.setCenter(new GLatLng(-65,30), 2);
}
 
Где всего-то надо в вызов функции GMap2 добавить указание типа карты. Это:
 
Для Луны (рис. 9):
G_MOON_MAP_TYPES
G_MOON_ELEVATION_MAP
G_MOON_VISIBLE_MAP
 
Для Марса (рис. 10):
G_MARS_MAP_TYPES
G_MARS_ELEVATION_MAP
G_MARS_INFRARED_MAP
G_MARS_VISIBLE_MAP
 
Для звёздного неба (рис. 11):
G_SKY_MAP_TYPES
G_SKY_VISIBLE_MAP
 
Google Maps: строим карты сами 
Рис. 9 Луна
 
Google Maps: строим карты сами 
Рис. 10 Марс
 
Google Maps: строим карты сами 
Рис. 11 Звёздное небо
 
Ну вот, теперь у вас есть всё необходимое, чтобы сделать собственный картографический сайт не хуже какого-то там www.astrolab.ru или http://luna.ua, а может где-то и лучше ;)
 
© Владислав Демьянишин
 
Вы находитесь на официальном сайте Владислава Демьянишина - разработчика игры Dune IV (Dune 4). На нашем сайте Вы можете бесплатно скачать игры Dune IV (Dune 4), Battle City (Танчики с Dendy/Nintendo), читы к играм и многое другое. Также Вы можете скачать бесплатно программы и полезные утилиты. Все программы чистые, т.е. не содержат вирусов и иного вредоносного ПО.
 
Среди доступных программ есть мобильная читалка книг, менеджер переноса файлов с фото- и видеокамер на компьютер, текстовый редактор, WYSIWYG редактор, 3D аниматор, GIF аниматор, AVI аниматор, пакетный конвертор изображений, редактор электрических схем, программа для скриншотов, диспетчер тем рабочего стола и другие.
 
На нашем сайте можно не только бесплатно скачать игры, но и документацию и книги по программированию на MIDLetPascal, Turbo Pascal 6, Turbo Pascal 7, Borland Pascal, по программированию устройств Sound Blaster, Adlib, VESA BIOS, справочник Norton Guide и много другой полезной информации для программистов, включая примеры решения реальных задач по созданию резидентных программ. Предлагаю также посетить Марья искусница - сайт о рукоделии (http://mariya-iskusnica.ru).
 
 

Журнал > Программирование > Google Maps: строим карты сами
 
 
 
483
 
ВКонтакте
Facebook
 
 
 
На главную страницу На предыдущую страницу На начало страницы
 
 
Украинский портАл Украина онлайн Рейтинг@Mail.ru Рейтинг Сайтов YandeG Rambler's Top100