Yandex карта с переходом их списка адресов

Не редко попадается задача для магазинов с несколькими адресами отделений или филиалами в разных городах, в которых необходимо вывести весь список адресов и, при клике на любой из них, переходить к ним на yandex - картах. Это повышает «юзабилити» и упрощает поиск контактов на карте. Я буду использовать jQuery, по-этому лучше сразу подключить его в файле шаблона header.php Далее нам нужно подключить api yandex карт. Делается это строчкой:

<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&load=Map&lang=ru_RU" type="text/javascript"></script>

Yandex имеет довольно хорошую документацию по своему api Для получения ключа нужно перейти в кабинет разработчика и выбрать api которое будете использовать. Для Yandex карт нужно «JavaScript API и HTTP Геокодер» потом указать почту, домен, телефон, возможно что-то еще. Домен можно указывать как основной, так и тестовый, если ваш сайт еще в разработке. на работу карты это отразиться не должно. И так, Yandex карта подключена, jQuery работает, осталось указать контейнер, для отображения «карты». Делается это просто. При инициализации указывается id блока, на котором она должна рисоваться.

<div id="map" style="width: 600px; height: 400px">

Для того, что бы адреса и прочие атрибуты какого-то офиса можно было задавать через админку Bitrix, нужно завести инфоблок и прописать там эти самые свойства. Для вывода списка адресов я использую bitrix:news.list. Скопируем шаблон и в файле result_modifier.php нужно получить и сгруппировать координаты и прочие данные для подстановки в карту.

<? if (!defined("B_PROLOG_INCLUDED") || B_PROLOG_INCLUDED !== true) die();
foreach($arResult['ITEMS'] as $arItem){
    if($arItem['PROPERTIES']['COORD']['VALUE'] != ""){
        $arResult['COORD'][] = array(
            "NAME" => $arItem['NAME'],
            "COORD" => $arItem['PROPERTIES']['COORD']['VALUE']
        );
    }
}?>

В результате получится массив 'COORD' с двумя ключами "COORD" - координатами и "NAME" - названием элементов из инфоблока. Также можно добавлять и остальные свойства с произвольными ключами массива. В файле template.php соответственно выводим список адресов согласно верстке, например так:

<?foreach ($arResult["ITEMS"] as $item) {?>
    <p>Магазин:
        <a href="#" class="goto_map" data-city="<?=$item['NAME']?>">
            <?=$item['PROPERTIES']["TITLE"]["VALUE"]?>
        </a>
    </p>
<?}?>

По классу "goto_map" будем отлавливать клик и перебрасывать на карте к нужному адресу. В атрибуте "data-city" должен быть ключ для массива «destinations» с координатами для прыжка. В данном случае ключом будет название элемента. И наконец скрипт инициализации карты с подстановкой всех наших параметров и адресов:

<script type="text/javascript">
    // Функция ymaps.ready() будет вызвана, когда
    // загрузятся все компоненты API, а также когда будет готово DOM-дерево.
    ymaps.ready(init);
    destinations = {
          <?foreach($arResult['COORD'] as $arCoord):?>
           '<?=$arCoord['NAME']?>': [<?=$arCoord['COORD']?>],
          <?endforeach;?>
     };

    function init(){
        // Создание карты.
        var myMap = new ymaps.Map("map", {
            // Координаты центра карты.
              // Порядок по умолчанию: «широта, долгота».           
            center: destinations['<?=$arResult['ITEMS']['0']['NAME']?>'],
            // Уровень масштабирования. Допустимые значения:
              // от 0 (весь мир) до 19.
            zoom: 10
        });
        <?foreach($arResult['COORD'] as $arCoord):?>
            myPlacemark = new ymaps.Placemark([<?=$arCoord['COORD']?>], {hintContent: '<?=$arCoord['NAME']?>', balloonContent: '<?=$arCoord['NAME']?>'});
            myMap.geoObjects.add(myPlacemark);
        <?endforeach;?>

        myMap.behaviors.disable('scrollZoom');

        // куда скакать
        function clickGoto() {

            // город
            var pos = $(this).data('city');

            // переходим по координатам
            myMap.panTo(destinations[pos], {
                // Опции перемещения: разрешить уменьшать и затем увеличивать зум карты при перемещении между точками
                //flying: 1
            });
            $("html, body").animate({ scrollTop: $("#map").offset().top-100 }, 1000);

            return false;
        }

        // навешиваем обработчики
        var col = $('.goto_map');
        for (var i = 0, n = col.length; i < n; ++i) {
            col[i].onclick = clickGoto;
        }
    }
</script>