Как и было решено в прошлой статье этого цикла, сегодня мы поговорим о том, каким образом сделать для созданного ранее каталога универсальную карту,
на которой бы показывалось местоположение организации. Желательно, чтобы при этом, во время добавления организации в каталог, нам не приходилось специально указывать какие-то координаты, или создавать для каждого объекта новую карту.
Для решения нашей задачи воспользуемся такой отличной штукой, как сервис Яндекс-Карты, а именно функциями 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