Решение проблемы Яндекс.Карты и Joomla.

Автор: | 09.08.2009

Среди бесплатных систем управления сайтов наибольшее распространение получила – Joomla.

Она позволяет создать сайт любой степени сложности и при этом не вникать в глубокие подробности и тонкости  веб-программирования.

Поэтому она хорошо подходит и для создания сайта с использованием Яндекс.Карт.

Проблема состоит в том, что использование API Яндекс.Карт началось недавно — 13 ноября 2008 года, поэтому пока отсутствуют готовые расширения для работы с системой Joomla.

Кроме одного плагина, который уже рассматривался на страницах данного блога, см заметки: «Плагин Яндекс.Карт для Joomla», «Доработка плагина Яндекс.Карт для Joomla», «Доработка плагина Яндекс.Карт для Joomla – продолжение» и «Доработка плагина Яндекс.Карт для Joomla – продолжение. Часть 2».

Но у данного расширения есть один существенный недостаток – он позволяет использовать только одну карту на сайте.

Joomla — Профессиональный сайт за один день
86 видеоуроков, 12 часов 46 минут посвящены лучшей системе для создания сайтов — Joomla!

Решить проблему использования API Яндекс.Карт в системе Joomla можно с использованием специального плагина RD Add PHP, его можно скачать со страницы по адресу http://www.run-digital.com/loesungen/open-source/addphp.html

Существуют версия плагина для Joomla 1.5 и Joomla 1.0.

Что же из себя представляет данное расширение и как им пользоваться.

Данный плагин позволяет вставлять php-код из файла в текст любой статьи системы Joomla.

Как его использовать для размещения Яндекс.Карт на сайте.

С начала его необходимо установить и активировать, обычным образом для плагинов Joomla.

Затем на сервере, в каталоге где содержаться файлы системы Joomla,  необходимо создать папку для хранения файлов с кодом  для Яндекс.Карт.

Назовем ее, например, php-mapscript.

Далее в ней нужно создать файл с расширением PHP для будущей карты.

Привожу пример кода с пояснением.

 
<script src="http://api-maps.yandex.ru/1.0/?key=AH3opEkBAAAAr5-FRwMA5r5FEzekeBH0p-CaaXVp0XnjHDYAAAAAAAAAAABoNEjcalCTSez7vWR-YlMFjYDLEw==" type="text/javascript"></script>
 
<!-- ----------------------------------------- -->
 
  <script type="text/javascript">
 
    var map, geoResult;    
 
        window.onload = function init () {
           map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(43.99150,56.31534), 10);
 
 
              map.addControl(new YMaps.TypeControl());
            map.addControl(new YMaps.ToolBar());
            map.addControl(new YMaps.Zoom());
            map.addControl(new YMaps.ScaleLine());
 
 
            var ml = new YMaps.YMapsML( 'http://www.map.cek.ru/xml/termelexnet.xml' );
            map.addOverlay(ml);
 
            YMaps.Events.observe(ml, ml.Events.Fault, function (error) {
                alert('Ошибка: ' + error);
            });
        };
 
function showAddress (value) {
            map.removeOverlay(geoResult);
            var geocoder = new YMaps.Geocoder(value, {results: 1, boundedBy: map.getBounds()});
 
 
            YMaps.Events.observe(geocoder, geocoder.Events.Load, function () {
                if (this.length()) {
                    geoResult = this.get(0);
                    map.addOverlay(geoResult);
                    map.setBounds(geoResult.getBounds());
                }else {
                    alert("Ничего не найдено")
                }
            });
        }
 
 
    </script>
 
<!-- ----------------------------------------- -->
 
    <form action="#" onsubmit="showAddress(this.address.value);return false;">
        <p>
            <input type="text" id="address" style="width:525px;" value="Нижний Новгород" />
            <input type="submit" value="Искать" />
        </p>
        <div id="YMapsID" style="width:550px;height:300px"></div>
    </form>

Мы заносим в файл весь код для создания карты расположения терминалов компании "Элекснет" на карте Нижнего Новгорода без разделения на разделы html-файла.

Весь код можно разделить на три части.

В первой части мы записываем вызов скрипта API Яндекс.Карт с ключем для нашего сайта:

<script src="http://api-maps.yandex.ru/1.0/?key=AH3opEkBAAAAr5-FRwMA5r5FEzekeBH0p-CaaXVp0XnjHDYAAAAAAAAAAABoNEjcalCTSez7vWR-YlMFjYDLEw==" type="text/javascript"></script>

В следующем разделе между строками    <script type="text/javascript"> и     </script> мы вводим код для загрузки карты, координаты меток из файла termelexnet.xml, добавляем элементы управления на карту и функцию showAddress для вывода результатов геокодирования.

В последней части  кода осуществляется вывод формы для поиска и контейнера для самой карты.

Сохраняем файл под именем prim_elexnetnn.php

Основная часть сделана.

После этого, мы создаем новую статью (страницу), где будет размещена наша карта и вводим её содержимое.

В том месте, где должна находиться сама карты мы пишем следующее:

{rdaddphp file= php-mapscript / prim_elexnetnn.php }

Сохраняем статью.

Создаем ссылку на неё в меню и заходим для просмотра.

Наблюдаем результат.

Работающий пример можно увидеть здесь.


Таким образом мы можем встроить Яндекс.Карту в любую страницу нашего сайта , построенного на системе Joomla, и столько раз, сколько нам необходимо.

Решение проблемы Яндекс.Карты и Joomla.: 6 комментариев

  1. Влад

    Отличное решение — изящное и доступное, во всяком случае я сделал карту на свой сайт именно таким образом — плагин для joomla давал возможность добавить лишь две точки, а его изменение не давало нужного результата. Однако есть небольшой вопрос. Я никак не могу разобраться, почему у меня надписи в балонах «плывут». Подозреваю, что CSS виноват, но где это обрабатывается — так найти и не смог. Может кто-что посоветовать?
    Сабж тут (в самом низу): http://www.tdfeb.ru/index.php?option=com_content&view=article&id=60&Itemid=184
    Очень признателен буду если подскажете чем это лечится 🙂

  2. Korum

    Спасибо огромное, всё гораздо проще чем с разными компонентами!

  3. Roman

    Благодарю, все отлично работает. Но в контейнере, в комментариях точки на карте, не отображается латиница. 🙁

  4. Владимир

    Привет! Все сделал по инструкции но джумла пишет файл по такому пути не найден,хотя все на хосте разместил?!

    1. admin Автор записи

      Путь к файлу нужно полный прописать, начиная от папки с установкой Joomla. Например, /myfiles/script.php

  5. Saracin

    делаю все по инстркуции выдает вот эту хрень (((
    File: /pub/home/ijdag/htdocs/php-mapscript/prim_elexnetnn.php don’t exists

Добавить комментарий для Korum Отменить ответ

Ваш адрес email не будет опубликован. Обязательные поля помечены *