Изменяем компонент каталога SOBI2 для Joomla – продолжение.

На своем блоге я уже писал как можно изменить компонент каталога SOBI2 для Joomla, заменив карты Google на Яндекс.Карты.

В этой заметке я хочу продолжить данную тему и рассказать о том, как можно организовать добавление координат расположения наЯндекс.Карте самими пользователями.

Для этого в начале, в режиме администрирования сайта мы заходим в раздел компонента SOBI2 и выбираем пункт меню Настройка полей.

Для полей Широта (filds_lonmap) и Долгота (filds_latmap) необходимо изменить параметр Административное поле, установить параметр – нет.

После этого необходимо создать еще одно новое поле.

Название поля: field_fsmap

Заголовок поля: Задать координаты по карте

Тип поля: text code

Опубликовано: Да

Административное поле: Нет

В поле Текстовый код ввести следущий текст:

<script src="http://api-maps.yandex.ru/1.1/index.xml?key={googleApiKey}" type="text/javascript"></script>
 
<div id="YMapsID" style="width:400px;height:300px"></div>
 
<script type="text/javascript">
    //<![CDATA[
var placemark;           
            window.onload = function init () {
            var map = new YMaps.Map(document.getElementById("YMapsID"));
            map.setCenter(new YMaps.GeoPoint(43.964988,56.318426), 10);
 
            map.addControl(new YMaps.SmallZoom());
 
 
YMaps.Events.observe(map, map.Events.Click, function (map, mEvent) {
 
                map.removeOverlay(placemark);
 
                var newGeoPoint = mEvent.getGeoPoint();	
 
                placemark = new YMaps.Placemark(newGeoPoint);
                map.addOverlay(placemark);
 
                document.getElementById('field_lat').value = newGeoPoint.getLat();
                document.getElementById('field_lonmap').value = newGeoPoint.getLng();
 
          });               
 
          }	
 
//]]>
</script>

Данный код будет подставлять Яндекс.Карту в форму добавления записи в справочник.

По щелчке на карте в поля формы Широта (filds_lonmap) и Долгота (filds_latmap) будут подставляться соответствующие значения, на карте в данной точке появиться метка.

Что особенного в данном коде.

В первой строке вместо параметра {googleApiKey} будет подставляться ключ API Яндекс.Карт для вашего сайта.

После мы задаем размер окна карты 400 на 300 пикселей.

Затем идет код скрипта инициализации карты.

Мы задаем координаты центра и начальный уровень масштаба.

Добавляем элемент  управления масштабом YMaps.SmallZoom.

После этот идет функция обработки события щелчка мыши по карте.

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

Поле для вывода карты помещаем выше полей ввода значений координат.

Посмотреть, как это работает можно здесь
.
И еще можно сделать метку на карте перемещаемой и отслеживая событие менять координаты в полях широты и долготы.

У меня спрашивали, как сделать так, чтобы карта располагалась ниже всех данных, это очень просто нужно изменить  файл sobi2.details.tmpl.php, который находится в папке

/папка установки Joomla/components/com_sobi2/templates/default/

Там найти код:

<tr>
        <td><?php HTML_SOBI::showGoogleMaps($mySobi, $config); ?></td>
</tr>

Вырезать его и вставить перед строчками

</table>
<table class="sobi2DetailsFooter" width="100%">

Это все что я хотел вам рассказать.