Создание универсальной карты организаций на сайте


Как и было решено в прошлой статье этого цикла, сегодня мы поговорим о том, каким образом сделать для созданного ранее каталога универсальную карту,
на которой бы показывалось местоположение организации. Желательно, чтобы при этом, во время добавления организации в каталог, нам не приходилось специально указывать какие-то координаты, или создавать для каждого объекта новую карту.
Для решения нашей задачи воспользуемся такой отличной штукой, как сервис Яндекс-Карты, а именно функциями API этого сервиса. Причина, по которой выбраны именно Яндекс-Карты, а не, скажем, Google Maps, проста - у сервиса Яндекса на данный момент более полная детализация карт для небольших городов Украины, и в частности, для города Черкассы, на который и ориентирован наш проект.

Разобьём задачу на этапы. Они будут такие:

1. подключится к API Яндекс-Карты и получить уникальный ключ разработчика
2. организовать получение координат объекта по его адресу и вывести карту
3. отобразить подсказки к объекту и фото
4. организовать вывод карты во всплывающем окне, чтобы избежать лишних перезагрузок страниц

1. Подключение к API Яндекс-Карты
Перед началом работы с картами нам необходимо зарегистрироваться в сервисе, и, указав сайт, на котором мы будем работать с картами, получить свой уникальный API-ключ. Для этого зайдем на http://api.yandex.ru/maps/, зарегистрируемся там (или используем уже существующий Яндекс-аккаунт), и перейдем по ссылке "Получить API-ключ". Заполнив поля формы, и согласившись с пользовательским соглашением, жмем кнопку подтверждения, и получаем наш уникальный ключ, который будет работать только на указанном нами сайте. Выглядит он примерно вот так:

AO7t1ksBAAAAOngNSgMACWM7pyOqJjULg9414ydbGQ9WQlAAAAAAAAAAAABXyJdi07HQs33QAyLsMsp2-edeLg==

Этот ключ мы будем в дальнейшем использовать для взаимодействия с API Яндекс-Карты

2. Организовать получение координат объекта по его адресу
Так как, фактически, основной нашей задачей при создании универсальной карты было избавить себя и пользователей от ввода каких либо координат, или адресов специально для отображения на карте, воспользуемся богатым функционалом, предоставляемым API, а также той информацией которая у нас уже есть - почтовым адресом, который добавляется при заполнении анкеты организации в каталоге. Выглядит он примерно вот так:

ул.Чигиринская, 19, г.Черкассы

Для того, чтобы преобразить этот адрес в набор координат, приемлемый для отображения и позиционирования карты, воспользуемся замечательной функцией API - Геокодер.

Сервис геокодирования позволяет определять координаты и получать
сведения о географическом объекте по его названию
или адресу и наоборот, определять адрес объекта
на карте по его координатам (обратное геокодирование).

Подключаем функции API:

<script src="http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key=полученый_вами_ключ" type="text/javascript"></script>

Создаем скрипт геокодирования адреса:

function init () { 
//связываем вывод карты с контейнером, в котором она будет показываться
var mapContainer = YMaps.jQuery("#YMapsID");
//создаем экземпляр карты
map = new YMaps.Map(mapContainer[0]);
//создаем объект геокодера
var geocoder = new YMaps.Geocoder("$AUTHOR_EMAIL$");
//по результатам геокодирования инициализируем карту первым результатом
YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder){
if (geocoder.length()) {
...
}
});
}

В поле $AUTHOR_EMAIL$ у нас хранится адрес организации, потому просто подставляем его в Геокодер.
Данный код создает экземпляр объекта геокодер, с переданным ему адресом, и инициализирует карту первым из полученной выборки результатов.

3. Отобразить подсказки к объекту и фото
После того, как мы вывели карту на экран, было бы неплохо прямо указать место на ней, где находится наш объект. Для этого выведем подсказку-баллун, с названием, фотографией и адресом организации. Делается это несколькими строчками кода. Вот они:

map.openBalloon(geocoder.get(0).getGeoPoint(), "<div align='center' style='font-size:11px;'><b>$ENTRY_TITLE$</b><br><?if($IMG_SMALL_URL1$)?><img src='$IMG_SMALL_URL1$' style='padding:1px; margin:4px; border: solid #666666 1px;'><br><?endif?>$AUTHOR_EMAIL$</div>"); 
map.setBounds(geocoder.get(0).getBounds());

В первой строке мы создаем на карте элемент-баллун, и передаем ему координаты объекта, полученные в результате геокодирования, а также сообщение, которое необходимо вывести в html формате. Второй строкой мы устанавливаем центр карты, используя все те же результаты геокодирования.

4. Организовать вывод карты во всплывающем окне, чтобы избежать лишних перезагрузок страниц
Так как карта довольно большая, и перезагружать страницу для ее отображения каждый раз было бы неудобно, выведем ее во всплывающем поверх страницы слое. Также выведем в этом слое кнопку, нажав на которую пользователь сможет закрыть карту, и продолжить изучение информации в каталоге организаций.
Пропишем два стиля для слоев, которые будем использовать. Первый - это слой, в который загружается карта, а второй - слой в котором мы выводим кнопку.

div#YMapsID { 
position: absolute;
top:206px;
display: none;
border: solid #666666 1px;
padding-left:32px;
margin-left:2px;
}
.map-close {
position: relative;
left:580px;
top:5px;
width: 14px;
height: 13px;
background: url('/images/login-close.gif') no-repeat;
border:solid #666666 1px;
cursor:pointer;
z-index:999;
}

Сами же слои расположим один внутри другого и вставим в код страницы:
<div id="YMapsID" style="width:600px;height:470px;display:none;"><div onclick="javascript:document.getElementById('YMapsID').style.display='none';" class="map-close" id="map-close"></div></div>

Рассмотрим, что же у нас получилось в конечном итоге:

<body> 
....
<script src="http://api-maps.yandex.ru/1.1/index.xml?loadByRequire=1&key=полученый_вами_ключ" type="text/javascript"></script>
<script type="text/javascript">

function init () {
var mapContainer = YMaps.jQuery("#YMapsID");

map = new YMaps.Map(mapContainer[0]);
//Создание объекта геокодера
var geocoder = new YMaps.Geocoder("$AUTHOR_EMAIL$");
// По завершению геокодирования инициализируем карту первым результатом
YMaps.Events.observe(geocoder, geocoder.Events.Load, function (geocoder) {
if (geocoder.length()) { map.openBalloon(geocoder.get(0).getGeoPoint(), "<div align='center' style='font-size:11px;'><b>$ENTRY_TITLE$</b><br><?if($IMG_SMALL_URL1$)?><img src='$IMG_SMALL_URL1$' style='padding:1px; margin:4px; border: solid #666666 1px;'><br><?endif?>$AUTHOR_EMAIL$</div>");
map.setBounds(geocoder.get(0).getBounds());
document.getElementById('map-close').style.display='block';
document.getElementById('YMapsID').style.display='block';
}
});
}
</script>
...
<a href='#' onclick="YMaps.load(init)">Посмотреть карту</a>
...
<div id="YMapsID" style="width:600px;height:470px;display:none;"><div onclick="javascript:document.getElementById('YMapsID').style.display='none';" class="map-close" id="map-close"></div></div>
...
</body>

Общий принцип работы можно описать так - при загрузке страницы автоматически подгружаются функции API Яндекс-Карты. Слои, в которых будет отображаться карты, изначально скрыты. По нажатию на ссылку "Посмотреть карту" инициализируется карта, геокодеру передается адрес объекта. После получения координат от геокодера мы устанавливаем центр карты, и выводим подсказку на нужный адрес, которая выглядит как баллун с названием организации, ее фотографией (если есть) и адресом. Все это показывается во всплывающем поверх страницы слое, который можно закрыть, нажав на кнопку в правом верхнем углу.
Вот как все это в итоге выглядит:


Плюсы такого решения:
- карта универсальна. Все точки на карте показываются автоматически, ввод координат или ручная установка точки на карте при добавлении организации не требуется.
- кроме точки на карте посетитель видит адрес организации и фото. Это поможет, при необходимости, проще ориентироваться на местности.
- решение быстрое и практически не требует специальных знаний.

Минусы:
- в случае, если на карте нет нужной точки (например, номера дома) отображается ближайшая к этому адресу известная точка.
- необходимо следить за правильным вводом адресов в каталог. Грамматические ошибки в адресе могут вызывать неправильную работу геокодера.

Что можно сделать еще:
- в будущем планируется внедрить функцию прокладывания маршрутов, для простоты ориентировки посетителей. Достаточно будет просто указать свой текущий адрес, и автоматически построится маршрут до указанной точки.
- будет создана карта, на которой можно будет увидеть все объекты в каталоге, разбитые по категориям. Например, заправки будут отображаться зелеными метками, СТО синими и т.д.

Напоминаем, что результаты работы вы по прежнему можете увидеть на сайте http://autoclub.ck.ua, в разделе "Каталог". Например, вот тут: http://autoclub.ck.ua/publ/azs/lukojl/azs_lukojl/35-1-0-9

Эта статья входит в цикл статей блога "Делаем проект с нуля".
Ознакомиться с полным циклом можно по ссылке.
14 комментариев
1 Написал jazator 03 Ноябрь 2010, 17:53
Те минусы, что указаны, легко исправить, если дать пользователю возможность отмечать объект, непосредственно при загрузке, на карте.
Но сделать это красиво... сложно!
На нашем сайте, подобным образом, отмечаются фотографии на карте, только вот Гугл нам больше подходит.
Вот пример - http://altai-photo.ru/photo/altai/katunskiy/listvennicy_na_kucherle/13-0-4732
Только вот очень, хочу обратить внимание разработчиков, не хватает в модулях "формы добавления и редактирования материалов"... хотя такая форма появилась в новом модуле "онлайн игры". Форма очень нужная и востребованная. Огромная просьба её реализовать! Спасибо!
avatar
5 Написал SEN 04 Ноябрь 2010, 19:52
Поддерживаю! Дело говорит.
2 Написал borschaga 03 Ноябрь 2010, 22:00
Добавляю карты Google biggrin
avatar
3 Написал stealth1477 04 Ноябрь 2010, 11:09
Интересно
avatar
4 Написал анчи 04 Ноябрь 2010, 18:56
Как пользователь altai-photo.ru и ucoz.ru поддерживаю предложение №1 jazator . Вообще всё, что связано с географией, должно быть предельно просто и понятно. Этим-то и отличается система uCoz.
6 Написал core-x 05 Ноябрь 2010, 11:47
Не ужели вы думаете что новичкам в вашей системе будет так легко это сделать?
даже профи иногда тяжело, а тут....
7 Написал Styler 05 Ноябрь 2010, 12:27
Вообще то для этого и пишутся подобные статьи. Чтобы облегчить жизнь новичкам.
avatar
8 Написал Novichok_ 06 Ноябрь 2010, 19:54
тут все элементарно, а разжевывать все до мельчайших подробностей вредно для мозга, кому надо - тот разберется, благо дело информации полно, было бы желание.
10 Написал Styler 08 Ноябрь 2010, 17:04
Разжевывается для тех, кто вообще не ориентируется в вопросе.
Если вы понимаете о чем речь - это не значит что пояснять не нужно для других.
avatar
11 Написал kolian4760 23 Ноябрь 2010, 21:41
Ну если вам нужно, чтобы вас ткнули носом и сказали с точностью до строки куда вставлять Java скрипты, куда код элемента и что вообще такое head и body, то да, статья сложновата....
Но как кажется мне, да думаю и большинству, статья создана для тех кто не первый раз увидел html код, да и то, что в ней описано новичку не понадобится на мой взгляд.
9 Написал точка 08 Ноябрь 2010, 14:18
для возможности масштабирования в api ест метод enableHotKeys(options), куда его вставить чтобы на карте появились стрелочки масштаба.
avatar
12 Написал tanchik 08 Февраль 2011, 02:20
Подскажите новичку! у меня почему то карта открывается внизу текста страницы, как сделать чтобы она выводилась во всплывающем поверх страницы слое?
avatar
13 Написал tanchik 16 Февраль 2011, 00:34
и еще, можно ли на одной странице сделать несколько адресов?
avatar
14 Написал avz 06 Ноябрь 2011, 15:56
Как сделать несколько организаций на карте?
Ваш комментарий