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

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

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

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

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

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

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

Решить проблему использования 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, и столько раз, сколько нам необходимо.